skills.rest
d-oit
d-oitCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design-system

Refactor React/Tailwind frontend UI to conform to project design system tokens.

Updated Aug 23, 2026
Search Tags:#accessibility#react#tailwind#tokens#ux#design-system
One-click install
npx skills add https://github.com/d-oit/do-novelist-ai --skill frontend-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design-system
Source: https://github.com/d-oit/do-novelist-ai/tree/main/.claude/skills/frontend-design-system
Command: npx skills add https://github.com/d-oit/do-novelist-ai --skill frontend-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guides building and refactoring React/Tailwind frontends to align with the project design system, enforce accessibility, and avoid generic AI visuals.

Core Features & Use Cases

  • Design tokens & themes: Use semantic colors, spacing, radii, and typography from the design system.
  • Accessible by default: WCAG-compliant components with keyboard navigation and proper naming.
  • Anti-slop guardrails: Prevent generic, over-styled, or inconsistent visuals.

Quick Start

Apply the design system to a component and verify token usage, typography hierarchy, and accessibility states.

Frequently Asked Questions about frontend-design-system

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

FAQPage Schema
How do I apply a design system to React and Tailwind components?▼

Apply design system tokens—semantic colors, spacing, radii, and typography—to your React/Tailwind components by replacing hard-coded values with design token variables. This ensures consistent styling across pages and layouts while maintaining a cohesive visual language aligned to your project's specifications.

What makes a React frontend accessible by default?▼

Build accessible frontends by using semantic HTML, proper ARIA naming, keyboard navigation support, and WCAG-compliant components. Design systems enforce these patterns automatically, reducing the effort to meet accessibility standards across your entire UI.

How do I avoid generic AI-generated UI visuals in my design?▼

Enforce anti-slop guardrails by adhering strictly to your design system's tokens, typography hierarchy, and component patterns. This prevents over-styled or inconsistent visuals and ensures your interface remains distinctive and product-ready instead of falling into generic AI-generated aesthetics.

Can I use design tokens with responsive layouts in Tailwind?▼

Yes. Design tokens integrate with Tailwind's responsive utilities to create consistent, accessible, responsive layouts. Apply semantic spacing and sizing tokens across breakpoints to maintain design system alignment without repeating hard-coded values.

What's the best way to refactor existing React components to match a design system?▼

Audit your components for token usage, semantic HTML, and accessibility compliance. Replace inline styles and utility classes with design system tokens, verify keyboard navigation and naming conventions, then test responsive behavior across all breakpoints.

Related Skills

Explore More Design & Creative Skills→
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
bychrisrbychrisr

aiox-ux-design-expert

Orchestrate UX design workflows with atomic components and WCAG compliance.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
TheGreatLTheGreatL

web-component-design

Create reusable UI components with React, Vue, and Svelte.

Community
Advanced