skills.rest
roerohan
roerohanCOMMUNITY
Explore all skills by this author →
Website𝕏@roerohanGitHub

frontend-design

Audit React user interfaces for accessibility, design consistency, and component anti-patterns.

27|1|Updated May 13, 2026
Search Tags:#accessibility#react#ui-ux#responsive-design#design-tokens#frontend-design#component-architecture
One-click install
npx skills add https://github.com/roerohan/skills --skill frontend-design-roerohan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/roerohan/skills/tree/main/frontend-design
Command: npx skills add https://github.com/roerohan/skills --skill frontend-design-roerohan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Agents and developers frequently build React user interfaces that are inconsistent, inaccessible, lack clear visual hierarchy, and fail to follow established component architecture and meta-framework best practices, leading to high technical debt and poor user experiences.

Core Features & Use Cases

  • Comprehensive React Guidance: Covers component architecture, hooks, composition patterns, state management, and meta-framework conventions for Next.js, Remix, and TanStack Start.
  • End-to-End UI/UX Principles: Provides actionable rules for layout, typography, color systems, accessibility (WCAG compliance), and responsive design.
  • Practical Review Tools: Includes checklists for design reviews, React code audits, and common anti-pattern fixes to catch issues early.
  • Use Case: When building a new customer dashboard, use this skill to ensure components follow React composition best practices, meet WCAG accessibility standards, use a consistent spacing and color system, and adapt properly to all screen sizes.

Quick Start

Use the frontend-design skill to audit the existing user settings page for accessibility gaps, inconsistent spacing, and React component anti-patterns.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I ensure my React components meet WCAG accessibility standards?▼

To build accessible React UIs, apply standardized guidelines for component architecture and accessibility auditing. This enforces proper visual hierarchy and WCAG AA compliance to eliminate inaccessible user interfaces during development.

What is the best way to implement consistent design tokens in React applications?▼

Implementing consistent design tokens in React requires applying standardized UI/UX principles for color systems and spacing. This ensures a consistent visual hierarchy and eliminates technical debt caused by poorly architected user interfaces.

How do I audit a React application for component anti-patterns and accessibility gaps?▼

Audit React applications for anti-patterns and accessibility gaps by using practical review checklists. These tools catch component architecture issues, inconsistent spacing, and WCAG compliance failures early in the development workflow.

Does this approach work with meta-frameworks like Next.js and Remix?▼

Yes, this approach works with meta-frameworks like Next.js, Remix, and TanStack Start. It provides specific React composition patterns and component architecture conventions tailored for these frameworks to ensure consistent UI implementation.

How do I implement mobile-first responsive design for React user interfaces?▼

Implement mobile-first responsive design in React by following actionable UI/UX rules for layout and screen adaptation. This ensures components adapt properly to all screen sizes and eliminates poorly architected page layouts.

Related Skills

Explore More Software Engineering Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
aquariuscookaquariuscook

QE Visual Accessibility

Test web applications for visual regressions, responsive design, and WCAG 2.2 AA compliance.

Community
Advanced
memorysavermemorysaver

vercel-composition-patterns

Replace boolean props with explicit variant components and shared context in React.

Community
Basic
NolanPicNolanPic

Frontend CSS

Enforce CSS standards for naming, organization, linting, and accessibility.

Community
Basic