senior-frontend
Senior Frontend enforces a three-phase workflow for shipping React and Next.js code: context discovery to map your stack, development with atomic design and TDD, and handoff verification of test coverage and performance. It mandates TypeScript strict mode, comprehensive testing across unit, integration, and E2E layers, and decision tables for state management, SSR patterns, and component architecture.
Senior Frontend delivers production-grade React/Next.js components with atomic design, strict TypeScript, and mandatory >85% test coverage.
AI-generated summary based on this skill's SKILL.md
Install
Pixel-Process-UG/superkit-agents/senior-frontend · repository language: TypeScript
git clone https://github.com/Pixel-Process-UG/superkit-agents
cp -r superkit-agents/templates/skills/senior-frontend ~/.claude/skills/senior-frontendFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What does Senior Frontend expect for React component development production grade?
Senior Frontend enforces production-grade React component development through strict TypeScript, atomic design architecture, and mandatory >85% test coverage. It requires comprehensive testing across unit (Vitest), integration (React Testing Library), and E2E (Playwright) layers, with accessibility compliance via axe-core. The skill guides you through context discovery, TDD-driven development, and handoff verification before shipping.
How should I set up Next.js TypeScript strict mode with Senior Frontend?
Senior Frontend mandates TypeScript strict mode as a foundational requirement for Next.js projects. During context discovery, it maps your existing stack and establishes quality standards. The skill provides decision tables for SSR, SSG, and ISR implementation patterns, server vs. client component strategies, and form validation using React Hook Form with Zod. Strict mode enforcement prevents type-safety gaps before development begins.
What atomic design component architecture patterns does Senior Frontend recommend?
Senior Frontend designs component architecture using atomic design principles combined with state management patterns. It guides selection between Zustand for global state, React Query for data fetching, and local state via hooks. The skill establishes component library structure with Storybook documentation, memoization strategies (useMemo, useCallback), and bundle size optimization. Architecture decisions are made during phase one context discovery.
How do I implement comprehensive testing with Vitest, RTL, and Playwright?
Senior Frontend implements a three-layer testing strategy: unit tests with Vitest, integration tests with React Testing Library, and E2E tests with Playwright. The skill enforces >85% test coverage requirements and accessibility testing using axe-core. During development phase, TDD principles guide test-first implementation. Handoff verification confirms all coverage thresholds and performance metrics before production release.
What should a frontend code review checklist include per Senior Frontend?
Senior Frontend's code review checklist verifies TypeScript strict mode compliance, >85% test coverage across all layers, accessibility standards, performance optimization (bundle size, memoization), and architectural consistency with atomic design. It confirms SSR/SSG/ISR pattern correctness, state management decisions, and form validation implementation. The checklist is established during context discovery and applied at handoff verification.
How does Senior Frontend optimize frontend performance and ensure accessibility?
Senior Frontend optimizes performance through bundle size analysis, memoization strategies (useMemo, useCallback), and React Query data fetching patterns. Accessibility compliance is ensured via axe-core testing integrated into the test suite. The skill provides decision tables for SSR vs. client-side rendering trade-offs and component memoization. Performance and accessibility metrics are verified during handoff before production deployment.
SKILL.md
rendered from the published skill — quoted content, verbatim
Senior Frontend Engineer
Overview
Deliver production-grade frontend code following a structured three-phase workflow: context discovery, development, and handoff. This skill enforces strict quality standards including atomic design component architecture, comprehensive state management patterns, SSR/SSG/ISR optimization, and mandatory >85% test coverage with Vitest, React Testing Library, and Playwright.
Announce at start: "I'm using the senior-frontend skill for production-grade React/TypeScript development."
Phase 1: Context Discovery
Goal: Understand the existing codebase before writing any code.
Actions
- Analyze existing codebase structure and conventions
- Identify the tech stack version (React 18/19, Next.js 14/15, TypeScript version)
- Review existing component library and
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
templates/skills/senior-frontend/SKILL.md