frontend-agent_skill

Overview

This skill is a frontend specialist focused on React, Next.js, and TypeScript using an FSD-lite architecture, shadcn/ui, and a design-token driven design system. It enforces performance, accessibility, and consistent component patterns for production-ready UIs. I help implement UI components, client-side logic, and design-aligned workflows in a fullstack monorepo context.

How this skill works

I inspect the feature directory layout, component boundaries, and design-token usage to ensure 1:1 mapping to Figma and OKLCH tokens. I prefer server components by default and flag interactive areas that must be client components, enforce shadcn/ui primitives first, and suggest wrappers or CVA composition rather than editing core UI primitives. I also verify accessibility, performance budgets (FCP target), import rules, and test coverage requirements for custom utilities.

When to use it

• Building new UI features or pages with Next.js and TypeScript
• Creating or wrapping components with shadcn/ui and CVA variants
• Implementing client-side interactions, forms, and state with Jotai/TanStack Query
• Ensuring design-token fidelity and i18n compliance
• Optimizing performance and accessibility before release

Best practices

• Use shadcn/ui primitives first; create wrappers for customization rather than editing components/ui/*
• Default to Server Components; mark client components only when interactivity or useQuery is required
• Map every visual value to design tokens in packages/design-tokens; never hardcode colors or strings
• Follow FSD-lite: one component per file, absolute @/ imports, no cross-feature imports
• Require >90% unit test coverage for any custom utility logic; prefer es-toolkit and ahooks where possible

Example use cases

• Build a responsive feature folder with components/, types/, and utils/ adhering to FSD-lite rules
• Create a form using @tanstack/react-form + zod and wire it to a TanStack Query mutation with client component boundaries
• Wrap a shadcn Button in a project-level wrapper to add theme variants via cva without modifying core UI primitives
• Audit a page for accessibility, performance (FCP <1s), and mobile-first breakpoints and provide remediation steps