The Complete Production SOP: How to Deploy and Run Stencil Web Component Compiler & Design System Bundler in Autonomous AI Agents

---
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
---

import { Config } from '@stencil/core';
import { reactOutputTarget } from '@stencil/react-output-target';

export const config: Config = {
  namespace: 'design-system-core',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
      customElementsExportBehavior: 'auto-define-custom-elements',
      externalRuntime: false,
    },
    reactOutputTarget({
      componentCorePackage: 'design-system-core',
      proxiesFile: '../packages/react-bindings/src/components.ts',
    }),
  ],
};

import { Component, Prop, State, Event, EventEmitter, h } from '@stencil/core';

@Component({
  tag: 'ds-button',
  styleUrl: 'ds-button.css',
  shadow: true,
})
export class DsButton {
  @Prop({ reflect: true }) variant: 'primary' | 'secondary' = 'primary';
  @Prop() disabled: boolean = false;
  @State() isPressed: boolean = false;
  @Event() dsClick: EventEmitter<void>;

  private handleClick = () => {
    if (!this.disabled) {
      this.isPressed = !this.isPressed;
      this.dsClick.emit();
    }
  };

  render() {
    return (
      <button
        class={`btn btn-${this.variant} ${this.isPressed ? 'active' : ''}`}
        disabled={this.disabled}
        onClick={this.handleClick}
      >
        <slot />
      </button>
    );
  }
}