senior-frontend

name: senior-frontenddescription: >  Frontend development for React, Next.js, TypeScript, and Tailwind CSS. Use when building  React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding  projects, implementing accessibility, or reviewing frontend code.license: MIT + Commons Clausemetadata:   version: 1.1.0  author: borghei  category: engineering  domain: frontend  updated: 2026-06-17  tags: [react, typescript, accessibility, performance, state-management]

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, settle the inputs below. When one is missing or vague and would change the result, ask about it; when it wouldn't, use a sensible default and say which one you used.

• 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).

Ask about the two or three inputs that matter most for this request, not the whole list. If the user wants a result straight away, produce it and state your assumptions at the top.

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