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
Decision gist · record as of 2026-03-16
Senior Frontend delivers production-grade React/Next.js components with atomic design, strict TypeScript, and mandatory >85% test coverage. 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.
Use it when
- Senior Frontend mandates TypeScript strict mode as a foundational requirement for Next.js projects.
- Senior Frontend designs component architecture using atomic design principles combined with state management patterns.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
Pixel-Process-UG/superkit-agents/senior-frontend · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
templates/skills/senior-frontend/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build production-grade React/Next.js components with strict TypeScript and >85% test coverage”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
TanStack Query handles server-state fetching and caching in React applications, automating data synchronization and eliminating manual boilerplate. It provides built-in background refetching, optimistic mutations, intelligent cache invalidation, and pagination support for complex data workflows.
TanStack Query provides asynchronous state management for server data across React, Vue, Solid, Svelte, and Angular. It handles caching, background synchronization, pagination, infinite scrolling, and optimistic updates automatically. Use queries for data fetching and mutations for server modifications, with lifecycle hooks for managing side effects and rollback scenarios.
Master server state management and data fetching with TanStack Query through expert guidelines covering query organization, mutations, caching strategies, and performance optimization. This skill teaches you how to structure queries with factory patterns, implement optimistic updates, handle errors gracefully, and prefetch data efficiently.
Transform design specification documents into fully-featured Next.js/React components complete with TypeScript types, Tailwind styling, browser-mode tests, and Storybook stories. This skill automates the journey from design to implementation, handling component structure, variant logic, responsive behavior, and accessibility patterns across atoms, molecules, and organisms.
Senior Architect guides system design through structured phases: requirements analysis, architecture evaluation, and decision documentation. It produces Architecture Decision Records, trade-off analyses, and scalability blueprints grounded in proven patterns.
UI Design System guides you through building production-ready design systems from the ground up. It covers the complete workflow: establishing primitive, semantic, and component token layers; architecting atomic to organism-level components; and implementing light/dark theming with responsive patterns. Built for Tailwind CSS v4 and CSS custom properties.