skills.rest
eymass
eymassCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-development

Standardize React frontend design patterns for accessible UI development.

1|1|Updated Mar 6, 2026
Search Tags:#accessibility#frontend#ui-design#design-systems#ux-patterns#component-architecture
One-click install
npx skills add https://github.com/eymass/swe-plugin --skill frontend-development-eymass
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-development
Source: https://github.com/eymass/swe-plugin/tree/main/skills/frontend-development
Command: npx skills add https://github.com/eymass/swe-plugin --skill frontend-development-eymass

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a comprehensive blueprint for designing accessible, scalable frontends, reducing guesswork and aligning teams on UI patterns and quality criteria.

Core Features & Use Cases

  • Component-first architecture guidance, state management patterns, and performance considerations.
  • Accessibility and semantic HTML practices, loading state strategies, and error handling checklists.
  • Use case: when kicking off a new frontend feature, apply this skill to ensure consistent architecture, accessible UI, and measurable performance.

Quick Start

Integrate the component output checklist and accessibility guidelines into your first UI component.

Frequently Asked Questions about frontend-development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize React component architecture for accessible UI development?▼

Standardize React component architecture by applying consistent UI patterns, state management strategies, and semantic HTML practices to ensure accessible UI development across your team.

What's the best way to implement WCAG accessibility in a new frontend feature?▼

Implement WCAG accessibility by integrating semantic HTML practices and an accessibility guidelines checklist into your frontend workflow, ensuring your new feature meets required compliance standards.

How do I manage loading states and error handling in scalable frontend design systems?▼

Manage loading states and error handling in scalable frontend design systems by applying standardized component patterns and utilizing dedicated error handling checklists to maintain UI consistency.

Can I use these frontend patterns to enforce performance budgets and responsive design?▼

Yes, these frontend patterns enforce performance budgets and responsive design by integrating measurable performance criteria and scalability checks into your component-first architecture workflow.

When do I need a comprehensive component checklist for frontend development?▼

You need a comprehensive component checklist when kicking off new frontend features to guarantee consistent architecture, accessible UI, and measurable performance across your development team.

Why does my team struggle with UI consistency and how can design systems help?▼

Teams struggle with UI consistency due to unaligned development patterns; applying a standardized design system and frontend blueprint reduces guesswork and aligns everyone on quality criteria.

Related Skills

Explore More Design & Creative Skills→
Fr-e-dFr-e-d
157

architecture-extract

Analyze project directory structures to generate architectural summaries.

Community
Basic
junchenghuojunchenghuo
3

fe-a11y-performance-audit

Audit frontend web pages for WCAG compliance and Core Web Vitals.

Community
Intermediate
strongeronstrongeron
18

sb-wrappers

Scaffold typed React wrapper components into .storybook/wrappers for audit data visualization.

Community
Intermediate
tranhieutttranhieutt
70

radix-ui-design-system

Build accessible Radix UI design systems with headless primitives.

Community
Advanced