Components
Self-contained .tsx + .scss file pairs written to
src/components/fpkit/. No runtime npm dependency — you own the source.
acss-kit Overview
acss-kit is a Claude Code plugin that generates accessible React components and CSS themes for fpkit/acss projects.
What it generates
Section titled “What it generates”Themes
OKLCH-derived CSS custom property files in src/styles/theme/. 18 semantic
color roles, WCAG AA validated, light + dark.
Commands
Section titled “Commands”| Command | What it does |
|---|---|
/setup | Bootstrap a project — install ui.tsx, configure the target, seed a starter theme |
/kit-add | Generate one or more components (with dependency resolution) |
/kit-add-html | Generate static HTML + SCSS + vanilla JS versions of components for non-React projects |
/kit-create | Generate a single component from a natural-language description |
/kit-list | Browse the component catalogue or inspect a specific component |
/kit-sync | Bulk-install every component, foundation, and starter theme in one shot |
/kit-update | Re-copy unmodified components after a plugin upgrade, preserving your edits |
/theme-create | Generate a full light/dark theme from a seed hex color |
/theme-brand | Scaffold a brand-specific theme override file |
/theme-extract | Extract brand colors from an image or Figma URL |
/theme-update | Edit specific color roles in an existing theme file |
/style-tune | Tune theme roles or component tokens with natural-language modifiers |
/prompt-book | Print the copy-paste prompt catalogue for all slash commands |
Skills
Section titled “Skills”| Skill | Triggered by | Purpose |
|---|---|---|
setup | /setup | One-shot project bootstrap (ui.tsx, target, optional seed theme) |
components | /kit-add | Full component generation workflow (Steps A–F) |
component-creator | /kit-create or natural language (“create a primary pill button”) | Generate a single component instance from a description |
styles | All /theme-* commands | OKLCH palette math, WCAG validation, role catalogue |
component-form | Natural language (“build a signup form”) | Auto-generates accessible form components |
style-tune | /style-tune or natural language (“warmer button”) | Adjusts visual feel via token edits + WCAG validation |
Key design decisions
Section titled “Key design decisions”Vendored source. Components are written as source files into your project. There’s no runtime @fpkit/acss import — your bundle doesn’t grow, and you can edit the generated files freely.
Generation contract. Before writing any file, /kit-add shows a preview listing exactly which files will be created or skipped. You always know what’s about to happen.
Dependency resolution. If you request dialog, acss-kit checks whether button and overlay exist. Missing dependencies are generated first (bottom-up), never silently skipped.
Atomic WCAG validation. Theme edits are pre-validated in a temp directory. If any contrast pair fails, the entire batch rolls back. Paired roles (primary + primary-hover) are always updated together.
CSS-variable-first. Every component token — --btn-bg, --card-radius, --dialog-overlay — is a CSS custom property with a hardcoded fallback. Override anything in your own CSS without touching the generated file.
Available components
Section titled “Available components”Components are organized into six categories:
| Category | Components |
|---|---|
| Simple | Badge, Tag, Heading, Text, Link, List, Icon, Img |
| Interactive | Button, IconButton |
| Form | Field, Input, Checkbox |
| Layout | Card, Nav |
| Complex | Alert, Dialog, Popover, Table |
| Form (skill) | Auto-generated by the component-form skill on natural-language prompts |
→ See the Component Catalogue for the full list with props and CSS tokens.