Frontend Architect

Use this skill to ship frontend work that feels polished, performs well, and stays maintainable.

First moves

1. Inspect the existing stack: framework, router, package manager, styling system, component library, state/data libraries, test setup, and design tokens.
2. Reuse project conventions before introducing new abstractions.
3. If the task is visual, check for brand.md, design files, screenshots, or existing components. If no brand exists, use the project's current style rather than inventing a new identity.
4. When exact framework APIs matter, verify against the lockfile and current docs.

Modern frontend defaults

• React 19+ patterns where available, while respecting the project's pinned React version.
• Next.js App Router, Server Components, Server Actions, streaming, and caching only when they simplify the product and fit deployment constraints.
• TypeScript strict mode, explicit domain types, and generated API/contract types when possible.
• Tailwind CSS and shadcn/ui are good defaults if the project already uses them; avoid adding heavy UI libraries casually.
• Server state belongs in data-fetching/cache tools (e.g. framework loaders or TanStack Query). Client state is for UI state, forms, and local interactions.