component-creator skill
The component-creator skill powered /kit-create. It also auto-triggered on natural-language phrases. /kit-create is now handled by the components skill (Creator Mode).
| Triggered by | /kit-create plus phrases like “create a …”, “make me a …”, “build a …”, “design a …”, “generate a …” |
| Output | A TSX snippet (default) or a standalone component file |
| Dependencies | Per-component reference docs under plugins/acss-kit/skills/components/references/components/<name>.md |
| Status | Absorbed into components skill v1.0.0 — Creator Mode and Form Mode now live in that skill |
Supported components
Section titled “Supported components”Reference docs live under plugins/acss-kit/skills/components/references/components/:
| Component | Reference doc |
|---|---|
| Button, IconButton | button.md, icon-button.md |
| Alert | alert.md |
| Card, Dialog, Popover | card.md, dialog.md, popover.md |
| Link, Img, Icon | link.md, img.md, icon.md |
| Input, Checkbox, Field | input.md, checkbox.md, field.md |
| List, Table, Nav | list.md, table.md, nav.md |
<div style="display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-start">
<button>Button</button>
<button style="display:inline-flex;align-items:center;gap:.4rem">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><circle cx="8" cy="8" r="7"/></svg>
IconButton
</button>
<div role="alert" style="padding:.5rem 1rem;border-left:3px solid currentColor">Alert message</div>
<div style="padding:1rem;border:1px solid #ccc;border-radius:4px;min-width:10rem">
<strong>Card</strong><p style="margin:.25rem 0 0">Card body text</p>
</div>
<a href="#">Link</a>
<input type="text" placeholder="Input" style="padding:.25rem .5rem" />
<label style="display:flex;gap:.4rem;align-items:center"><input type="checkbox" /> Checkbox</label>
</div>Steps 0, A–I
Section titled “Steps 0, A–I”The skill is structured as a ten-step pipeline. Each step has explicit halt/confirm rules so the output is reproducible.
Step 0 — Exit plan mode
Section titled “Step 0 — Exit plan mode”If the session is in plan mode, exit it before Step A. Step B runs detect_target.py and may invoke /kit-add to bootstrap a missing component or dependency, and Step C’s file-mode output writes a standalone TSX file — all blocked by plan mode. The skill only stays in plan mode when the user asked for a description without running anything.
Step A — Parse the description
Section titled “Step A — Parse the description”- A1 Resolve component noun to its reference doc via the dispatch table.
- A2 Load the doc’s Props Interface, Generation Contract, and Usage Examples.
- A3 Match user phrases against the prop vocabulary (colours, sizes, booleans, slots).
- A3.5 State-control demo defaults:
open/expanded/visible→true,checked→false. Wire up to caller state in the summary note. - A4 Extract quoted strings for slot content (
"Add to cart"→children). - A5 Halt if any required prop is unresolved or any conflict is detected.
Step B — Resolve the target
Section titled “Step B — Resolve the target”Run detect_target.py to locate the components directory. If the requested component or any dependency is missing, bootstrap it via /kit-add.
Step C — Choose output
Section titled “Step C — Choose output”Ask the user: snippet mode (print the TSX block) or file mode (write a standalone component).
Step D — Validate
Section titled “Step D — Validate”Apply H1 generic rules; then any H2 rules from the component’s reference doc.
Step E — Generate
Section titled “Step E — Generate”Emit single-element JSX, or compound JSX (Step E2) when slots are present. Add the correct imports.
Step F — Accessibility
Section titled “Step F — Accessibility”Verify aria-label, alt, and labelFor (where required). Drop empty compound slots rather than emitting them.
Step G — Refinement
Section titled “Step G — Refinement”Support delta turns (“make it larger”, “swap to secondary”) on the in-memory spec until the user resets or names a new component.
Step H — Validation matrix
Section titled “Step H — Validation matrix”- Hard halts — unresolved required props, out-of-union values, same-axis conflicts.
- Confirms — long text, sub-minimum sizes called out by the reference doc.
Step I — Examples
Section titled “Step I — Examples”Four worked examples (button, alert, card, refinement) double as parser test fixtures.
Anti-patterns
Section titled “Anti-patterns”- Silently default a colour prop. Ask the user instead.
- Substitute a value that isn’t in the prop’s union.
- Hard-code component import paths — always use
detect_target.py. - Generate empty compound slots.
- Write files without confirmation when an H1 halt fires.
Roadmap
Section titled “Roadmap”| Version | Planned |
|---|---|
| v0.2 | Each reference doc declares its own Generation Notes — Creator Mode halts/confirms |
| v0.3 | Multi-component compositions in one prompt |
| v0.4 | Project naming-conventions awareness |