acss-kit

Generate fpkit-style accessible React components without installing @fpkit/acss

List available fpkit/acss components or inspect a specific one

First-run bootstrap for acss-kit. Run once after `/plugin install acss-kit` to prepare your project before generating components or themes.

Adjust visual feel of theme roles or component tokens using natural language

Scaffold a brand-<name>.css preset that layers over light/dark

Generate light and/or dark theme CSS from a seed hex color

Extract theme tokens from an image or Figma URL and generate theme CSS

Edit one or more role values in an existing theme file and re-validate

Use when the user asks to create a form, scaffold a form, build a signup/contact/login form, generate form components, add form validation, or design accessible form layouts. Triggers include "create a form", "add a form", "build a form component", "scaffold a form", "form with fields", "form scaffolding". Pilot per-component skill — promoted from `references/components/form.md` because forms are high-iteration and benefit from auto-discoverable triggering.

Use when generating fpkit-style React components into a developer's project. Markdown-as-source templates with embedded TSX/SCSS and accessibility patterns. No @fpkit/acss package required — only React + sass.

Use when the user runs /setup or asks to "set up", "bootstrap", "initialize", or "prepare" a project for acss-kit components and themes. One-time first-run init — detects package manager, prints the sass install command, writes .acss-target.json, copies ui.tsx, optionally seeds a starter theme. Cross-domain skill (touches both components and styles concerns) — deliberately not nested under either domain skill.

Use when the user asks to adjust visual feel of a named acss-kit component or theme role using natural language. Triggers must reference a component (button, card, alert, dialog, input, nav) or a theme role (primary, accent, danger, warning, info, success, brand) — bare adjectives in prose contexts do NOT trigger. Phrases include "warmer button", "softer card", "calmer alert", "more spacious cards", "more elevated dialog", "tone down the primary", "deeper accent for primary", "make buttons feel sharper", "give the input a quieter look", "bolder primary", "smaller buttons", "bigger dialog", "narrower dialog", "wider input", "shorter dialog", "taller dialog". Routes between theme-role edits (delegated to /theme-update with WCAG pre-validation) and component SCSS token edits (--btn-*, --card-*, --alert-*, --dialog-*, --input-*, --nav-*). Pilot per-feel skill — promoted because feel-based iteration is high-touch and benefits from auto-discoverable triggering.

Generate and update CSS themes for fpkit/acss projects. Creates full light/dark palettes from seed colors using OKLCH, scaffolds brand presets, edits theme roles in place with WCAG re-validation, and extracts tokens from images or Figma designs. Use when the developer wants to create a theme, customize brand colors, or update specific role values in an existing theme.