Skip to content
acss-plugins

/kit-create

/kit-create turns a short natural-language description into a ready-to-paste TSX snippet (or a standalone component file). It is the “creator-mode” companion to /kit-add — instead of generating the catalogue source, it composes a specific instance of a component with the props you described.

Syntax

Section titled “Syntax”
/kit-create <description>

Examples

Section titled “Examples”
/kit-create primary pill button saying "Add to cart"
/kit-create danger alert with title "Payment failed" and a retry action
/kit-create outlined card titled "Pricing" with a primary CTA
/kit-create checkbox labelled "I agree to the terms"

Supported components

Section titled “Supported components”

Any component with a dedicated reference doc under plugins/acss-kit/skills/components/references/components/:

GroupComponents
InteractiveButton, IconButton, Checkbox
FeedbackAlert
SurfacesCard, Dialog, Popover
ContentLink, Img, Icon
FormInput, Field
CollectionsList, Table, Nav

How it works

Section titled “How it works”

The Creator Mode workflow lives in the ## Creator Mode section of skills/components/SKILL.md (steps CM-0 through CM-G):

  1. Parse the description against the component’s reference doc and prop vocabulary.
  2. Resolve the components directory via detect_target.py and bootstrap missing dependencies through /kit-add if needed.
  3. Choose output mode — print a JSX snippet, or write a standalone component file.
  4. Validate with H1 generic rules and any H2 component-specific rules.
  5. Generate single-element or compound JSX with the correct imports.
  6. Accessibility check — confirms required props (aria-label, alt, labelFor) are present.
  7. Refine on follow-ups — “make it larger”, “swap to secondary”, etc., adjust the in-memory spec.
  8. Halt or confirm for unresolved required props, out-of-union values, or same-axis conflicts.
  9. Worked examples double as parser test fixtures.

Form-shaped requests (“signup form”, “create a login form”) are handled by the Form Mode section of the same skill — not Creator Mode. Say “create a signup form with email and password” to enter that flow.

Vocabulary the skill recognises

Section titled “Vocabulary the skill recognises”

Colour family — maps to color, severity, or kind:

primary, secondary, tertiary, info, success, warning, danger, neutral/default

Size family — maps to size, scale, or density:

xs, sm, md, lg, xl, 2xl

Variant synonyms:

You sayResolves to
pill, rounded, capsulepill
outline, outlined, bordered, ghostoutline / outlined
filled, solidfilled
soft, subtle, tonalsoft

Anti-patterns

Section titled “Anti-patterns”

The skill explicitly refuses to:

  1. Silently default a colour prop — it asks instead.
  2. Substitute a value not in the prop’s union.
  3. Hard-code component import paths (always uses detect_target.py).
  4. Generate empty compound slots.
  5. Write files without confirmation when an H1 halt is triggered.
Section titled “Related”