skills.rest
pranav8494
pranav8494COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-designer

Implement accessible React/TypeScript UI components with semantic HTML and WCAG 2.1 AA compliance.

7|1|Updated Mar 23, 2026
Search Tags:#performance#accessibility#react#core web vitals#css architecture#wcag 2.1 aa#ui component design
One-click install
npx skills add https://github.com/pranav8494/team-of-agents --skill frontend-designer-pranav8494
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-designer
Source: https://github.com/pranav8494/team-of-agents/tree/main/skills/frontend-designer
Command: npx skills add https://github.com/pranav8494/team-of-agents --skill frontend-designer-pranav8494

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you create UI components, layouts, and styles that are accessible, maintainable, and fast—without relying on brittle JavaScript workarounds.

Core Features & Use Cases

  • Accessible-first component implementation: Builds semantic React UIs with correct ARIA usage, keyboard operability, and WCAG 2.1 AA compliance.
  • Performance-oriented frontend changes: Targets Core Web Vitals (LCP/INP/CLS) with concrete fixes like image strategy and code-splitting guidance.
  • Progressive enhancement & clean architecture: Uses semantic HTML, scoped styling approaches, and disciplined CSS/token usage to keep features resilient.

Quick Start

Use the frontend-designer skill to design a responsive, accessible React component for a payment form, then explain the accessibility and performance decisions it made.

Frequently Asked Questions about frontend-designer

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

FAQPage Schema
How do I build accessible React components that meet WCAG 2.1 AA standards?▼

Build accessible React components by applying semantic HTML, correct ARIA usage, and keyboard operability patterns to meet WCAG 2.1 AA compliance. Prioritize native HTML elements over ARIA roles and follow progressive enhancement rules for resilient UI interactions.

What's the best way to improve Core Web Vitals for an existing React UI?▼

Improve Core Web Vitals by implementing concrete fixes targeting LCP, INP, and CLS. Apply image loading strategies, code-splitting guidance, and disciplined CSS architecture to reduce layout shifts and optimize loading performance without relying on JavaScript workarounds.

How do I integrate design tokens into CSS architecture without causing style conflicts?▼

Integrate design tokens using scoped styling approaches and disciplined CSS architecture to prevent conflicts. Maintain semantic HTML structure and apply progressive enhancement rules to keep features resilient and maintainable across React component implementations.

When should I use native HTML elements instead of ARIA roles for UI component design?▼

Use native HTML elements instead of ARIA roles whenever possible to ensure accessibility and reduce JavaScript dependencies. Apply ARIA only when semantic HTML cannot achieve the required interaction pattern, following progressive enhancement principles for robust UI components.

Can I use this approach for UI code reviews and accessibility audits?▼

Yes, use this approach for UI code reviews to evaluate accessibility compliance, performance bottlenecks, and CSS architecture quality. Review semantic HTML usage, ARIA implementation, Core Web Vitals metrics, and design-token integration to identify actionable improvements.

Related Skills

Explore More Design & Creative Skills→
VYRE-StudiosVYRE-Studios

frontend-design

Design responsive, accessible UI components with semantic HTML and WCAG AA compliance.

Official
Intermediate
Sir-chawakornSir-chawakorn
9

optimize-core-web-vitals

Diagnose and remediate Core Web Vitals metrics using Lighthouse audits and performance traces.

Community
Advanced
CrazyDubyaCrazyDubya

accessibility-auditor

Audit web applications for WCAG 2.1 Level AA accessibility compliance.

Community
Intermediate
HR-ARHR-AR
1

ux-designer

Audit HTML, CSS, and vanilla JavaScript interfaces for UX bugs.

Community
Advanced