Senior Frontend

Senior Frontend

Frontend development patterns, performance optimization, and automation tools for React/Next.js applications. Scaffold projects, generate components and hooks, analyze bundle sizes, and apply React/Next.js patterns with accessibility and testing built in.

Core Capabilities

• Project scaffolding — generate Next.js 14+ (App Router) or React+Vite projects with TypeScript, Tailwind, and optional auth/api/forms/testing/storybook features.
• Component generation — client/server components, custom hooks, with test and Storybook story files following established patterns.
• Bundle analysis — static package.json + import scanning that scores bundle health and flags heavy dependencies with lighter alternatives.
• React patterns — compound components, custom hooks, render props, and reusable state-sharing patterns.
• Next.js optimization — Server vs Client Components, image optimization, parallel/streaming data fetching with Suspense.
• Accessibility & testing — semantic HTML, ARIA, keyboard nav, focus, and React Testing Library component/a11y tests.

When to Use

• Starting a new React/Next.js project that needs a best-practice baseline.
• Adding components, hooks, or test/story scaffolding to an existing app.
• Optimizing bundle size or diagnosing heavy dependencies.
• Implementing accessible, performant Server/Client Component architecture.
• Reviewing frontend code against React/TypeScript/a11y best practices.

Clarify First

Before scaffolding or generating, confirm these inputs. If any is unknown or vague, ASK — do not assume:

• Template — Next.js (App Router) vs React+Vite (--template; produces a different project structure)
• Features — auth / api / forms / testing / storybook (--features; decides what gets generated)
• Generation target — a new project vs a component/hook in an existing app (selects frontend_scaffolder vs component_generator)

Stop rule: ask only the 2-3 that most change the output. If the user says "just draft it," proceed and list your assumptions at the top of the artifact.

Tools

References

Load the reference that matches the task — keep this file lean and pull detail on demand:

• references/tooling-guide.md — full scaffolding / component-generation / bundle-analysis workflows, option tables, generated structure, the per-script flag reference, troubleshooting table, and success criteria. Read when running a tool or wiring up CLI flags.
• references/code-patterns.md — inline React patterns (compound components, hooks, render props), Next.js optimization (Server/Client, image, data fetching), accessibility + testing snippets, and the Next.js config / Tailwind / TypeScript quick reference. Read when writing components or optimizing pages.
• references/react_patterns.md — deep React patterns library. Read when designing component/state architecture.
• references/nextjs_optimization_guide.md — deep Next.js performance and rendering guide. Read when tuning Next.js apps.
• references/frontend_best_practices.md — accessibility, testing, and general frontend best-practice guide. Read before shipping a component.

Scope & Limitations

What this skill covers:

• React and Next.js project scaffolding with TypeScript and Tailwind CSS
• Component, hook, test, and Storybook story generation following established patterns
• Static bundle analysis based on package.json dependency inspection and import pattern scanning
• Frontend-specific best practices for Server Components, image optimization, data fetching, and accessibility

What this skill does NOT cover:

• Backend API development, database schema design, or server infrastructure -- see senior-backend and senior-fullstack
• End-to-end testing with Cypress or Playwright -- see senior-qa
• CI/CD pipeline configuration and Docker deployment -- see senior-devops
• Security vulnerability scanning and penetration testing -- see senior-secops and senior-security

Integration Points