{"enrichment":{"faq":[{"a":"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.","q":"What does Senior Frontend expect for React component development production grade?"},{"a":"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.","q":"How should I set up Next.js TypeScript strict mode with Senior Frontend?"},{"a":"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.","q":"What atomic design component architecture patterns does Senior Frontend recommend?"},{"a":"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.","q":"How do I implement comprehensive testing with Vitest, RTL, and Playwright?"},{"a":"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.","q":"What should a frontend code review checklist include per Senior Frontend?"},{"a":"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.","q":"How does Senior Frontend optimize frontend performance and ensure accessibility?"}],"shadow_tags":["enterprise-react","quality-gates","component-hierarchy","test-coverage-threshold","performance-metrics","type-safety","accessibility-first","server-client-split","state-architecture","handoff-workflow"],"summary_rewrite":"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."},"files":[{"bytes":11147,"path":"templates/skills/senior-frontend/SKILL.md","sha256":"306d238060f0084849a64d5c6cbfd7b2538c66449d732590d50f0ca2da93189a","url":"https://skillfed.io/files/Pixel-Process-UG/superkit-agents/senior-frontend/6b692b11/SKILL.md"}],"id":"Pixel-Process-UG/superkit-agents/senior-frontend","links":{"html":"https://skillfed.io/Pixel-Process-UG/superkit-agents/senior-frontend","md":"https://skillfed.io/Pixel-Process-UG/superkit-agents/senior-frontend.md","repo":"https://github.com/Pixel-Process-UG/superkit-agents"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":0,"language":"TypeScript","last_updated":"2026-03-16","license":"MIT","name":"senior-frontend","publisher":"Pixel-Process-UG","stars":1},"relations":{"similar":[{"id":"emanueleielo/deepagents-open-lovable/data-fetching"},{"id":"bobmatnyc/claude-mpm-skills/tanstack-query"},{"id":"patricio0312rev/skills/tanstack-query-setup"},{"id":"tanstack-skills/tanstack-skills/tanstack-query"},{"id":"Mindrally/skills/tanstack-query"},{"id":"Bbeierle12/Skill-MCP-Claude/frontend-dev-guidelines"},{"id":"PracticalSwan/agent-skills/react-development"},{"id":"personamanagmentlayer/pcl/react-expert"},{"id":"daffy0208/ai-dev-standards/frontend-builder"},{"id":"miles990/claude-software-skills/frontend"}]},"slug":{"owner":"Pixel-Process-UG","repo":"superkit-agents","skill":"senior-frontend"},"version":"6b692b11"}