Frontend Architecture

Use this skill for TypeScript frontend work. It is framework-aware but project-agnostic: apply it to React apps, Astro islands, Next.js pages, shared UI packages, design-system components, typed API clients, form-heavy screens, and browser-facing integration modules by mapping the same responsibilities to the local framework.

First Move

Before changing code:

• Read repo guidance first: AGENTS.md, package READMEs, component docs, local test setup, and nearby code.
• Identify the framework boundary: static page, server-rendered page, React island, client-only component, route handler, shared UI package, or generated client package.
• Inspect existing import aliases, naming, test helpers, query client setup, store helpers, form utilities, analytics conventions, and shared UI primitives.
• Prefer repo conventions when they are clear. Use this skill as the default for new code, ambiguous code, or code that needs architectural cleanup.
• Search before creating a new component, hook, service, store, query key, schema, variant, or helper. Consolidate similar code instead of adding another near-duplicate.
• Find the canonical source of truth for DTOs, schemas, route contracts, generated clients, and design tokens before duplicating any of them.

Default posture: keep UI ergonomic, keep data ownership explicit, and keep shared components free of app-specific behavior.

Core Principles