Frontend Agent

What it does

The Frontend Agent is designed to automate frontend development tasks, specifically focusing on building user interfaces and components based on design specifications. It assists with client-side logic, state management, styling (using TailwindCSS v4 + shadcn/ui), form validation, and integrating with backend APIs. The agent prioritizes performance and accessibility throughout the development process.

When to use it

This skill is useful for:

• Building user interfaces and components
• Implementing client-side logic and state management
• Creating responsive designs
• Handling form validation and user interactions
• Integrating frontend code with backend APIs

Key capabilities

• Utilizes shadcn/ui components, extending them via cva variants or composition.
• Enforces a 1:1 mapping of code to Design Tokens.
• Defaults to Server Components for performance optimization.
• Mandates semantic HTML and accessibility best practices (ARIA labels, keyboard navigation).
• Leverages pre-made hooks from ahooks.
• Employs es-toolkit for utility functions; custom logic requires >90% test coverage.
• Uses TanStack Query for server state management.

Example prompts

• "Create a component for displaying user profile information, following the design tokens."
• "Implement form validation using Zod and @tanstack/react-form for this signup page."
• "Generate a loading skeleton component for the product listing feature."

Tips & gotchas

• Component Strategy: Prioritize Server Components unless interactivity or API integration is required.
• Design Tokens: Always refer to packages/design-tokens (OKLCH) as the source of truth for colors and avoid hardcoding them directly in your code.
• Testing: Custom utility logic requires a minimum of 90% unit test coverage.