--- name: chameleon-controls-library description: "Builds UIs with Chameleon web components (ch-*). Use when the user mentions Chameleon, ch- components, or needs enterprise UI patterns like grids, trees, chat, sidebars, accordions, combos, tabs, dialogs, or forms. Also use for: implementing a UI from Figma or images, vibe coding a UI, migrating an existing UI to Chameleon, or auditing Chameleon usage in an application." metadata: version: "0.3.0" --- # Chameleon Controls Library Build UIs with Chameleon web components. This skill covers component selection, structure, wiring, usage, and styling of individual components. For Design System-level patterns (tokens, class naming, theme architecture), use the **design-system-builder** skill ## Workflow The workflow is a sequence of phases. Depending on the task, you can enter at any phase, skip phases that don't apply, and jump back to earlier phases to fix issues. Phases A and B always run in parallel at the start ``` ┌─────────────────────────────────────────────────────────────┐ │ [Entry Point] │ │ │ │ │ ┌─────────────┼─────────────┐ │ │ ▼ ▼ │ │ A: Gain Context B: Installation │ │ └─────────────┬─────────────┘ │ │ ▼ │ │ C: Understand the UI │ │ ┌──────┬───────┬───────┬──────┐ │ │ C1 C2 C3 C4 C5 │ │ Figma Image Text Migration Audit─────┐ │ │ └──────┴───────┴───────┘ │ │ │ │ │ │ │ ▼ │ │ │ D: Component Selection │ │ │ │ │ │ │ ▼ │ │ │ E: Understand Component APIs │ │ │ │ │ │ │ ▼ │ │ │ F: Styling Strategy │ │ │ │ │ │ │ ▼ │ │ │ G: Code Implementation │ │ │ │ │ │ │ ▼ │ │ │ H: Audit ◄──────────────────────┘ │ │ │ ▲ │ │ │ │ fix issues │ │ │ └──────┘ │ │ ▼ │ │ [Done] │ └─────────────────────────────────────────────────────────────┘ ``` --- ### Phase A — Gain Context (parallel with B) Detect before writing any code: 1. **Framework** — What framework is the project using? (e.g., Angular, React, Stencil, vanilla JS/TS, Lit/Kasstor, etc.) 2. **Existing code** — What components, structure, and patterns are already in place? 3. **Design System** — Is there a DS built on Chameleon? Check for `ch-theme`, `getBundles`, DS CSS files This is observational — no reference files needed --- ### Phase B — Installation Check (parallel with A) **Read** [Installation guide](references/installation/README.md). Verify Chameleon is installed and configured for the detected framework. If not installed, follow the guide Do not proceed to Phase C until installation is confirmed --- ### Phase C — Understand the UI Choose the sub-entry that matches the task. All sub-entries converge on the same output: a semantic understanding of each UI element — what it is, how it's used, how keyboard users reach it, and how elements interact #### C1: From Figma Analyze Figma frames. Identify visual elements and their semantic roles (navigation, data entry, data display, action triggers, feedback, etc.) #### C2: From an image Analyze the visual. Map each visible element to its semantic purpose. Identify layout structure, component boundaries, and interactive elements #### C3: From text, audio, or description Parse the user's description. Identify the UI elements described, their relationships, and the interactions expected #### C4: Migration from existing UI Analyze the current implementation. Map existing HTML elements and third-party components to Chameleon equivalents. Identify what can be replaced 1:1 and what requires restructuring #### C5: Audit only Skip directly to [Phase H](#phase-h--audit) --- ### Phase D — Component Selection **Read** [Components index](references/components-index.md). For every UI element identified in Phase C, look up the matching component: 1. Read its "When to use" and "When NOT to use" columns 2. **Never pick a component from memory** — always verify against the index 3. If a native HTML element (``, etc.) is chosen instead of a Chameleon component, **state the explicit reason** before proceeding **When a component does not exist in Chameleon:** - Chameleon does not wrap `