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

Ready to run

npx skills add https://github.com/rodrigorjsf/political-authority-highlighter --skill web-frontend-design-rodrigorjsf

💬 Prompt for ChatGPT / Claude Chat▼

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.