---
name: component-icon
description: Use when the user asks to generate, create, or scaffold an Icon — accessible SVG icon wrapper with aria-hidden/aria-label toggle, size variants, and decorative/semantic modes.
disable-model-invocation: true
hint: >-
  Invoke explicitly via `/kit-add icon`, `/kit-create` (then ask for an
  icon), or call the `component-icon` skill by name. Describe the icon
  source (name or SVG path), the size, whether it is decorative
  (aria-hidden) or semantic (aria-label), and any color or stroke override.
allowed-tools: Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion
---

# SKILL: component-icon

Generate an fpkit-style accessible Icon component directly into a developer's project.

## Workflow

1. **Read** `reference.md` in this skill directory for the canonical templates, Generation Contract, Props Interface, CSS Variables, Accessibility requirements, and Usage Examples.
2. **Init check** — run `python3 ${CLAUDE_PLUGIN_ROOT}/scripts/detect_target.py <cwd>`. If foundation (`ui.tsx`) is missing, run Step A of `${CLAUDE_PLUGIN_ROOT}/skills/kit-core/SKILL.md` to initialize it before generating this component.
3. **Dependencies** — Icon has no upstream dependencies (it is a leaf component). Skip dep resolution.
4. **Generate** — apply the Generation Contract from `reference.md` to produce:
   - `<targetDir>/icon.tsx` from the `## TSX Template` section
   Icon has no SCSS template (renders via CSS custom properties on the host element).
   Substitute `{{IMPORT_SOURCE:...}}`, `{{NAME}}`, `{{FIELDS}}` placeholders if present.
5. **Verify** — run `python3 ${CLAUDE_PLUGIN_ROOT}/scripts/verify_integration.py <projectRoot>` and print the summary to the developer.

## Reference

All templates and documentation live in `reference.md` alongside this SKILL.md. The shared generation contract, accessibility patterns, SCSS conventions, and CSS variable strategy are documented in `${CLAUDE_PLUGIN_ROOT}/skills/kit-core/references/`.