skills.rest
rodrigorjsf
rodrigorjsfCOMMUNITY
Explore all skills by this author →
GitHub

web-frontend-design

Validate JSX, CSS, and Tailwind usage against UI design principles.

1|1|Updated Feb 28, 2026
Search Tags:#accessibility#frontend#design system#component library#tailwind css#ui design
One-click install
npx skills add https://github.com/rodrigorjsf/political-authority-highlighter --skill web-frontend-design-rodrigorjsf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-frontend-design
Source: https://github.com/rodrigorjsf/political-authority-highlighter/tree/main/.claude/skills/web-frontend-design
Command: npx skills add https://github.com/rodrigorjsf/political-authority-highlighter --skill web-frontend-design-rodrigorjsf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that all user interface elements within the apps/web/ directory strictly adhere to the project's established design principles, including design tokens, color palettes, typography, layout rules, component specifications, and accessibility standards.

Core Features & Use Cases

  • Design Token Validation: Verifies that all UI implementations use only approved design tokens for colors, spacing, and typography.
  • Component Consistency: Enforces specific styling and behavior for UI components like buttons, cards, and tables.
  • Accessibility Compliance: Checks for adherence to WCAG 2.1 AA standards, including touch target sizes and keyboard navigation.
  • Use Case: When a developer modifies a button component in apps/web/, this Skill will automatically check if the button's color, size, border-radius, and hover/focus states match the specifications in the Frontend Design PRD.

Quick Start

Ensure all new UI elements in apps/web/ follow the design tokens and accessibility guidelines outlined in the project's PRD.

Frequently Asked Questions about web-frontend-design

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

FAQPage Schema
How do I enforce UI design standards in a React project?▼

To enforce UI design standards, you must validate JSX, CSS, and Tailwind class usage against approved design tokens, component specifications, and accessibility rules within your web directory. This ensures strict visual and structural consistency across the application.

How do I validate Tailwind CSS design tokens for component consistency?▼

Validating Tailwind CSS design tokens involves checking UI implementations against the project's Frontend Design PRD to ensure only approved colors, spacing, and typography are used. This process maintains component consistency for elements like buttons and cards.

Does this frontend design validation check WCAG 2.1 AA accessibility standards?▼

Yes, frontend design validation checks for strict adherence to WCAG 2.1 AA accessibility standards. It verifies that UI implementations include correct touch target sizes and support proper keyboard navigation for all interactive components.

What is the best way to maintain component specifications in a web directory?▼

The best way to maintain component specifications is to automatically verify that modified UI elements match the Frontend Design PRD. This includes validating specific styling, border-radius, and hover or focus states for components within the web directory.

Can I use this to check color palette and typography rules in JSX files?▼

Yes, you can use this to check color palette and typography rules in JSX files. It validates that all user interface elements strictly adhere to established design principles by analyzing the code against inspiration assets and project tokens.

Are there limitations when enforcing layout rules outside the apps/web/ directory?▼

Yes, a key limitation is that the enforcement of layout rules, design tokens, and accessibility standards is strictly scoped to the apps/web/ directory. UI implementations outside this specific directory are not validated against the Frontend Design PRD.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
alexandrbasisalexandrbasis
12

fci

Diagnose and fix CI pipeline failures blocking pull request merges.

Community
Advanced
otto-poblyshotto-poblysh

tailwind-design-system

Convert UI styling into Tailwind CSS v4 design tokens and component variants.

Community
Intermediate
nickstradnickstrad

web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and UX compliance.

Community
Basic