skills.rest
spartDev
spartDevCOMMUNITY
Explore all skills by this author →
𝕏@SpartDevGitHub

Design System Compliance

Enforce design-system compliance for UI components with dark mode and accessibility requirements.

6|2|Updated Jul 29, 2025
Search Tags:#accessibility#front-end#design system#component library#UI development#Tailwind CSS#dark mode
One-click install
npx skills add https://github.com/spartDev/My-Prompt-Manager --skill design-system-compliance
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Design System Compliance
Source: https://github.com/spartDev/My-Prompt-Manager/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/spartDev/My-Prompt-Manager --skill design-system-compliance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures all UI components adhere strictly to the My Prompt Manager design system, preventing visual inconsistencies, accessibility issues, and deviations from brand identity. It streamlines UI development by providing clear guidelines and patterns, reducing design debt and review cycles.

Core Features & Use Cases

  • Comprehensive Design Guidelines: Details brand colors (purple-indigo gradient), typography, spacing, border radius (rounded-xl), and signature glassmorphism effects (backdrop-blur).
  • Dark Mode & Accessibility Enforcement: Mandates dark mode variants for every style and outlines ARIA label, keyboard navigation, and focus management requirements.
  • Component Patterns & Best Practices: Provides ready-to-use code patterns for primary buttons, input fields, cards, modals, and more, along with common mistakes and their fixes.
  • Use Case: A designer or developer is creating a new settings panel. This Skill guides them through applying the correct gradients, rounded corners, dark mode styles, and accessibility attributes, ensuring the new UI seamlessly integrates with the existing application.

Quick Start

I'm building a new UI component. Guide me through the design system compliance checklist, focusing on dark mode, accessibility, and the purple-indigo gradient.

Frequently Asked Questions about Design System Compliance

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

FAQPage Schema
How do I ensure my UI components meet accessibility and design system standards?▼

Design system compliance enforces accessibility requirements including ARIA labeling, keyboard navigation, and color-contrast compliance across all UI components. It applies predefined patterns for buttons, forms, cards, and modals with mandatory dark mode variants and focus states, eliminating visual inconsistencies and brand deviations.

What accessibility features do I need to implement in Tailwind CSS components?▼

Accessibility features include ARIA labels for screen readers, keyboard navigation support, predefined focus classes, and color-contrast compliance. Dark mode styling must accompany all light-mode variants, and interactive elements require hover, focus, and active state definitions for full keyboard and assistive-technology support.

How do I add dark mode support to my component library?▼

Dark mode support requires creating parallel style variants for every component using Tailwind CSS dark mode utilities. This Skill mandates dark mode styling alongside light-mode definitions, ensuring consistent contrast ratios, readability, and brand color application (purple-indigo gradient) across both themes.

Can I use the purple-indigo gradient and rounded-xl styling with my existing Tailwind CSS setup?▼

Yes. The design system applies Tailwind CSS natively, using rounded-xl (12px) border radius for cards and inputs, purple-indigo gradient for primary actions, and backdrop-blur for glassmorphism effects. These integrate directly into standard Tailwind configurations without additional dependencies.

What's the best way to reduce design review cycles and prevent component inconsistencies?▼

Design system compliance provides ready-to-use component patterns and comprehensive guidelines covering brand colors, typography, spacing, and accessibility. Clear standards reduce design debt by enforcing consistent styling, focus management, and ARIA requirements upfront, streamlining reviews and integration.

Do I need to handle focus states and keyboard navigation separately for each component?▼

No. This Skill provides predefined focus classes and keyboard navigation patterns that apply across all components—buttons, forms, cards, and modals. Standardized focus management and state handling eliminate the need for custom implementations per component.

Related Skills

Explore More Software Engineering Skills→
fusenginefusengine
22

designing-systems

Define OKLCH color palettes, CSS variables, and typography scales for Tailwind CSS v4 theming.

Community
Advanced
nguyenthienthanhnguyenthienthanh
24

design-expert

Provides expert guidance on UI/UX design, design systems, and responsive layouts.

Community
Basic
masumi-networkmasumi-network
11

building-components

Guide development of accessible, composable UI components with semantic HTML and ARIA.

Official
Advanced
markky21markky21

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 and design tokens.

Community
Advanced