skills.rest
jimmymalhan
jimmymalhanCOMMUNITY
Explore all skills by this author →
GitHub

frontend-engineer

Develop UI components with design tokens and WCAG 2.1 AA accessibility standards.

1|Updated Mar 7, 2026
Search Tags:#ui#accessibility#frontend#react#components#design tokens
One-click install
npx skills add https://github.com/jimmymalhan/codereview-pilot --skill frontend-engineer-jimmymalhan
Or copy as Structured Prompt for Agentâ–¼
Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/jimmymalhan/codereview-pilot/tree/main/.claude/skills/frontend-engineer
Command: npx skills add https://github.com/jimmymalhan/codereview-pilot --skill frontend-engineer-jimmymalhan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables the creation and review of user interfaces, ensuring they are functional, accessible, and adhere to design standards, streamlining the frontend development process.

Core Features & Use Cases

  • Component Development: Build new UI components and pages.
  • Design System Adherence: Utilize and enforce design tokens (CSS variables) for consistent styling.
  • Accessibility Compliance: Implement WCAG AA standards for better usability.
  • State Management: Ensure components handle Normal, Loading, and Error states correctly.
  • Use Case: Develop a new user dashboard page, ensuring all interactive elements have proper loading and error states, and that the page is fully keyboard navigable.

Quick Start

Use the frontend-engineer skill to create a new user profile page in src/www/pages/.

Frequently Asked Questions about frontend-engineer

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

FAQPage Schema
How do I build React components that meet WCAG 2.1 AA accessibility standards?â–¼

Build accessible React components by enforcing WCAG 2.1 AA standards during development. This Skill ensures proper keyboard navigation, semantic HTML, and ARIA attributes are integrated into component creation, producing UIs that are fully navigable and compliant.

What is the best way to manage loading and error states in frontend UI components?â–¼

Manage loading and error states by explicitly defining normal, loading, and error conditions within component logic. This Skill structures UI state handling to ensure components render appropriate feedback and maintain functionality across all operational states.

How do I implement design tokens for consistent CSS styling across UI components?â–¼

Implement design tokens by utilizing CSS variables to enforce consistent styling across the design system. This Skill adheres to token-based architecture, mapping visual properties to variables so components maintain unified and maintainable styling.

Can I use this to integrate frontend UI components with backend APIs?â–¼

Yes, you can integrate frontend UI components with backend APIs. This Skill handles API integration and validates frontend logic through local testing, ensuring data flows correctly between backend services and the user interface.

How do I create a user dashboard page that handles component states and accessibility?â–¼

Create a user dashboard page by developing UI components that manage normal, loading, and error states while adhering to WCAG AA standards. This Skill generates production-ready pages ensuring interactive elements are keyboard navigable and fully accessible.

Related Skills

Explore More Software Engineering Skills→
saranskumarsaranskumar

api-designer

Define API contracts with endpoints, schemas, validation, and error handling.

Community
Advanced
jaypatrickjaypatrick

cloudflare-deploy

Deploy Cloudflare Workers and Pages across development, staging, and production environments.

Community
Advanced
saajunaidsaajunaid

design-system-tokens

Generate and validate design tokens as CSS variables across three-layer architectures.

Community
Intermediate
mefardalesmefardales

alpine-js

Implement reactive behavior in server-rendered HTML with Alpine.js directives and stores.

Community
Intermediate