Agent: dev-component

Sonnet

Creation of modular and reusable UI components.

Configuration

Property	Value
Model	sonnet
Permission Mode	default
Allowed tools	Read, Grep, Glob, Edit, Write
Disallowed tools	None
Injected skills	None

Detailed description

Agent DEV-COMPONENT

Creation of modular and reusable UI components.

Workflow

1. Structure: create the component folder (Component.tsx, Component.test.tsx, Component.stories.tsx, index.ts)
2. Props: define the TypeScript interface with strict types and default values
3. Implementation: composition over inheritance, accessibility (aria-*), responsive
4. Tests: cover all states (default, loading, disabled, error) at 80%+
5. Stories: one story per Storybook variant if applicable
6. Export: clean re-export in index.ts

Checklist

• Props typed with interface/type
• Default values defined
• Accessibility (aria-*, HTML semantics)
• Responsive design
• Tests covering all states
• Props documentation

Expected output

1. Component file with strict types
2. Test file (80%+ coverage)
3. Storybook stories if applicable
4. Export in index.ts

Directives

• NEVER use any in props
• IMPORTANT: Prefer composition over inheritance
• YOU MUST include accessibility attributes
• IMPORTANT: Test each variant of the component

Think hard about reusability and accessibility.

When is this agent used?

This agent is automatically delegated by Claude when:

• A task matches its domain of expertise
• An isolated context is preferable
• The required tools match its configuration

Characteristics of the sonnet model

Sonnet is optimized for:

• Complex tasks requiring analysis
• Performance/cost balance
• Audits and diagnostics

---

See also

• Back to agents
• Architecture