What does /form-component do?

It produces a component design spec with visuals for all states, interaction, props, ARIA, and usage guidelines.

How do I install /form-component?

Install Tonone for Claude Code via tonone.ai/get-started.

AI UI Component Spec Generator

Component specs that go straight to implementation skip the parts that matter. Visual design covers default; the engineer guesses at hover, focus, active, disabled, loading, error. ARIA attributes are added by intuition. Prop types are improvised. The result is a component built consistently with itself in the demo and inconsistently with the rest of the system.

The /form-component skill produces the component design spec. Visual for every state. Interaction behavior with timing. Prop definitions with types. ARIA attributes. Usage guidelines (when to reach for this, when not). Output ready for Prism to implement without further design clarification.

Tonone's /form-component skill produces complete component specs with visuals for every state, interaction, props, ARIA, and usage guidelines.

FormVisual Design

/form-component

Produces a component design spec: visual design for all states (default, hover, focus, active, disabled, loading, error, and domain-specific states), interaction behavior and animation, prop definitions with types, accessibility requirements including ARIA attributes, and usage guidelines. Ready for Prism to implement.

When adding a new component to a design system and…

FormVisual Design

/form-tokens

Defines a complete design token system: semantic color tokens (primary, surface, text, border, status), spacing scale, typography tokens, shadow and radius values, animation timing tokens, and maps them to CSS custom properties and Tailwind configuration. Bridges design decisions to code so both are consistent.

When establishing a design system and need the tok…

FormVisual Design

/form-brand

Creates brand identity foundations: color palette with primary, secondary, and semantic tokens with usage rules; type system with scale, pairing rationale, and line height specifications; iconography style direction; and style guide documentation. Every choice is tied to a brand principle so the reasoning can be applied consistently to new surfaces.

When launching a new product that needs a visual i…

PrismFrontend

/prism-component

Builds a reusable, accessible, typed UI component with every state handled: default, hover, focus, active, disabled, loading, error, and any domain-specific states. Includes prop documentation, usage examples, keyboard interaction patterns, and ARIA attribute coverage.

When adding a new reusable component to a design s…

Install

/form-component ships with the Form agent in Tonone for Claude Code.

1. Add to marketplace

$ claude plugin marketplace add tonone-ai/tonone

2. Install Form

$ claude plugin install form@tonone-ai

Frequently asked questions

What does /form-component do?: It produces a component design spec with visuals for all states, interaction, props, ARIA, and usage guidelines.
How do I install /form-component?: Install Tonone for Claude Code via tonone.ai/get-started.