---
name: "stencil-cross-framework-components"
description: "Build standards-compliant design systems that compile to native Web Components for all frameworks."
metadata:
  author: "Ionic Team"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "build design system stencil"
  - "generate react bindings stencil"
  - "stencil component lifecycle"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Stencil Web Component Compiler & Design System Bundler

Constructs component libraries with Stencil: JSX templating, reactive state with @State and @Prop, lifecycle methods (componentWillLoad), automated documentation generation, and React/Vue/Angular output wrappers.

## When to Invoke
Invoke this skill whenever you need to:
- build design system stencil
- generate react bindings stencil
- stencil component lifecycle

## Execution SOP & Rules
1. Define component: @Component({ tag: 'my-button', styleUrl: 'my-button.css', shadow: true }).
2. Declare typed props: @Prop() disabled: boolean = false;.
3. Configure stencil.config.ts with outputTargets: [dist(), reactOutputTarget(), vueOutputTarget()].
4. Run build: stencil build to emit compiled custom elements and framework-specific npm wrappers.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.