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_scaffoldervscomponent_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
| Tool | Purpose | Command |
|------|---------|---------|
| frontend_scaffolder.py | Scaffold a Next.js or React project with TypeScript + Tailwind + optional features | python scripts/frontend_scaffolder.py my-app --template nextjs --features auth,api |
| component_generator.py | Generate a component/hook with optional test and Storybook story | python scripts/component_generator.py ProductCard --type client --with-test --with-story |
| bundle_analyzer.py | Score bundle health and flag heavy dependencies from package.json + imports | python scripts/bundle_analyzer.py /path/to/project --verbose |
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.jsondependency 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
| Skill | Integration | Data Flow |
|-------|-------------|-----------|
| senior-fullstack | Scaffolded frontend projects connect to fullstack project scaffolder for API layer setup | Frontend project structure feeds into project_scaffolder.py which adds backend, Docker, and CI/CD layers |
| senior-backend | Components consuming API data follow patterns defined by backend skill's REST/GraphQL conventions | Backend API response types imported into frontend types/ directory generated by this skill |
| senior-qa | Generated test files (--with-test) use the same Testing Library conventions that the QA skill's test strategies build upon | Component test files hand off to QA skill for integration and E2E test coverage expansion |
| senior-devops | Bundle analyzer output informs build pipeline optimization decisions | Bundle health score and dependency warnings feed into CI quality gates configured by DevOps skill |
| senior-secops | Dependency analysis identifies packages that need security audit | Heavy/outdated dependency warnings from bundle_analyzer.py trigger security review workflows |
| code-reviewer | Generated components follow patterns that the code reviewer skill validates | Code reviewer checks generated components against React/TypeScript best practices defined in this skill's references |