/senior-frontend

name: "senior-frontend"
description: "Build and review React, Next.js, TypeScript or Tailwind frontends: components, scaffolding, performance and bundle size. Use whenever the user wants a new component or app, a page feels slow, the bundle is too big, or asks for a frontend code review."

Senior Frontend

Frontend development patterns, performance optimization, and automation tools for React/Next.js applications.

Table of Contents

• [Project Scaffolding](#project-scaffolding)
• [Component Generation](#component-generation)
• [Bundle Analysis](#bundle-analysis)
• [React Patterns](#react-patterns)
• [Next.js Optimization](#nextjs-optimization)
• [Accessibility and Testing](#accessibility-and-testing)

---

Project Scaffolding

Generate a new Next.js or React project with TypeScript, Tailwind CSS, and best practice configurations.

Workflow: Create New Frontend Project

1. Run the scaffolder with your project name and template:

   python scripts/frontend_scaffolder.py my-app --template nextjs

2. Add optional features (auth, api, forms, testing, storybook):

   python scripts/frontend_scaffolder.py dashboard --template nextjs --features auth,api

3. Navigate to the project and install dependencies:

   cd my-app && npm install

4. Start the development server:

   npm run dev

Scaffolder Options

| Option | Description | |--------|-------------| | `--template nextjs` | Next.js 14+ with App Router and Server Components | | `--template react` | React + Vite with TypeScript | | `--features auth` | Add NextAuth.js authentication | | `--features api` | Add React Query + API client | | `--features forms` | Add React Hook Form + Zod validation | | `--features testing` | Add Vitest + Testing Library | | `--dry-run` | Preview files without creating them |

Generated outputs

The generated project structure and an example component are in `references/frontend_best_practices.md` (section Generated outputs).

---

Component Generation

Generate React components with TypeScript, tests, and Storybook stories.

Workflow: Create a New Component

1. Generate a client component:

   python scripts/component_generator.py Button --dir src/components/ui

2. Generate a server component:

   python scripts/component_generator.py ProductCard --type server

3. Generate with test and story files:

   python scripts/component_generator.py UserProfile --with-test --with-story

4. Generate a custom hook:

   python scripts/component_generator.py FormValidation --type hook

Generator Options

| Option | Description | |--------|-------------| | `--type client` | Client component with 'use client' (default) | | `--type server` | Async server component | | `--type hook` | Custom React hook | | `--with-test` | Include test file | | `--with-story` | Include Storybook story | | `--flat` | Create in output dir without subdirectory | | `--dry-run` | Preview without creating files |

---

Bundle Analysis

Analyze package.json and project structure for bundle optimization opportunities.

Workflow: Optimize Bundle Size

1. Run the analyzer on your project:

   python scripts/bundle_analyzer.py /path/to/project

2. Review the health score and issues:

   Bundle Health Score: 75/100 (C)

   HEAVY DEPENDENCIES:
     moment (290KB)
       Alternative: date-fns (12KB) or dayjs (2KB)

     lodash (71KB)
       Alternative: lodash-es with tree-shaking

3. Apply the recommended fixes by replacing heavy dependencies.

4. Re-run with verbose mode to check import patterns:

   python scripts/bundle_analyzer.py . --verbose

Bundle Score Interpretation

| Score | Grade | Action | |-------|-------|--------| | 90-100 | A | Bundle is well-optimized | | 80-89 | B | Minor optimizations available | | 70-79 | C | Replace heavy dependencies | | 60-69 | D | Multiple issues need attention | | 0-59 | F | Critical bundle size problems |

Heavy Dependencies Detected

The analyzer identifies these common heavy packages:

| Package | Size | Alternative | |---------|------|-------------| | moment | 290KB | date-fns (12KB) or dayjs (2KB) | | lodash | 71KB | lodash-es with tree-shaking | | axios | 14KB | Native fetch or ky (3KB) | | jquery | 87KB | Native DOM APIs | | @mui/material | Large | shadcn/ui or Radix UI |

---

---

React Patterns

Compound components, custom hooks and render props are in `references/react_patterns.md` (section Examples).

---

Next.js Optimization

Server vs Client Components, image optimization and data fetching examples are in `references/nextjs_optimization_guide.md` (section Examples).

---

Accessibility and Testing

Code examples for accessibility and testing are in `references/frontend_best_practices.md`.

Accessibility Checklist

1. **Semantic HTML**: Use proper elements (`<button>`, `<nav>`, `<main>`) 2. **Keyboard Navigation**: All interactive elements focusable 3. **ARIA Labels**: Provide labels for icons and complex widgets 4. **Color Contrast**: Minimum 4.5:1 for normal text 5. **Focus Indicators**: Visible focus states

---

Quick Reference

Config, Tailwind and TypeScript snippets are in `references/frontend_best_practices.md` (section Quick reference).

---

Resources

• React Patterns: `references/react_patterns.md`
• Next.js Optimization: `references/nextjs_optimization_guide.md`
• Best Practices: `references/frontend_best_practices.md`
• Forcing-question library (Matt Pocock grill): `references/forcing_questions.md`
• Composition map (which specialist to fork into): `references/composition_map.md`

---

Assumptions and Verifiable Success Criteria (Karpathy discipline)

Before this skill scaffolds a component, recommends a framework, or audits a bundle, the following four assumptions MUST be surfaced.

1. **Primary user device + network** — mobile-4G, deskt