frontend-senior-engineer
CommunityMaster React/Next.js UI, handle all states, ensure accessibility and performance.
AuthorhaJ1t
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill ensures high-quality, accessible, and performant frontend UI components by guiding you through all four mandatory states and key frontend best practices.
Core Features & Use Cases
- State Management: Handles loading, error, empty, and success states for data-fetching components.
- Accessibility: Enforces WCAG 2.1 AA compliance with semantic HTML, keyboard navigation, and color contrast.
- Responsive Design: Implements mobile-first CSS and testing across various breakpoints.
- Form Validation: Validates forms on blur and submit with inline errors and server error mapping.
- Performance Budget: Targets Core Web Vitals for fast and smooth experiences.
- Use Case: Ideal for implementing or reviewing frontend UI components in React/Next.js applications, ensuring they are robust, accessible, and optimized for performance.
Quick Start
Run the frontend-senior-engineer skill to generate a fully accessible and responsive user list component.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: frontend-senior-engineer Download link: https://github.com/haJ1t/senior-dev-squad-skills/archive/main.zip#frontend-senior-engineer Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.