Why does the skill prefer CSS Grid over Flexbox?

The skill recommends Grid for overall page and section structure (using named areas) while reserving Flexbox for flowing items like navigation links or galleries where content determines size.

What are component states and why are they required?

Component states include Default, Hover, Active, Focus, and Disabled. Requiring all five ensures that interactive elements provide clear, accessible feedback to all users regardless of their input method.

Is this skill compatible with mobile-first development?

Absolutely. It mandates a mobile-first approach using only min-width media queries, ensuring that base styles are optimized for smaller screens first.

How does this skill enforce design tokens?

It requires all values like color, spacing, and typography to be mapped to CSS variables (tokens) from a single source of truth, preventing the use of hardcoded values or 'magic numbers' in stylesheets.

Does this skill handle accessibility compliance?

Yes, it enforces WCAG AA standards, specifically requiring proper color contrast ratios, keyboard navigation support, and correct semantic tag usage.

Professional UI Design Standards

Name: Professional UI Design Standards
Author: AlexanderStephenThompson

byAlexanderStephenThompson

デザインツール

Enforces high-end UI design standards, semantic HTML, and accessibility-compliant CSS for modern web applications.

概要

This skill provides a rigorous framework for Claude to build production-grade interfaces by enforcing strict design token usage, semantic markup, and responsive layouts. It bridges the gap between basic styling and professional 'S-Tier' SaaS aesthetics—reminiscent of Stripe or Linear—by providing clear rules for component states, layout logic using CSS Grid, and mobile-first responsiveness. It ensures every interface created is accessible, performant, and maintains a single source of truth for design variables.

主な機能

Semantic HTML pattern validation for improved SEO and screen reader support
0 GitHub stars
Comprehensive component state requirements covering hover, focus, active, and disabled
Mobile-first responsive design patterns using standardized breakpoints
Strict design token enforcement to eliminate hardcoded magic numbers
Advanced layout philosophy prioritizing CSS Grid for structured application shells

ユースケース

Converting legacy CSS into a modern, token-based design system
Auditing existing frontend components for semantic HTML and accessibility gaps
Building premium-feeling UI components from scratch with full interactive states and polish

概要

主な機能

Semantic HTML pattern validation for improved SEO and screen reader support
0 GitHub stars
Comprehensive component state requirements covering hover, focus, active, and disabled
Mobile-first responsive design patterns using standardized breakpoints
Strict design token enforcement to eliminate hardcoded magic numbers
Advanced layout philosophy prioritizing CSS Grid for structured application shells

ユースケース

Converting legacy CSS into a modern, token-based design system
Auditing existing frontend components for semantic HTML and accessibility gaps
Building premium-feeling UI components from scratch with full interactive states and polish