How does this skill help with web accessibility?

The reference guides include specific WCAG contrast requirements, touch target minimums, and ARIA patterns defined by each respective design system's standards.

Which design systems are supported by this skill?

Currently, the skill supports Material Design 3 (Google), Apple Human Interface Guidelines, Tailwind UI, Ant Design, and Shadcn/ui.

Can I use this with my own custom brand guidelines?

Yes, you can combine these predefined references with a local project style file to maintain brand consistency while using a framework's base patterns.

Does it support dark mode reviews?

Yes, it includes semantic color mappings and specific tokens for both light and dark modes for all supported design systems.

How do I trigger a design review using this skill?

You can use the 'ui' task and specify the reference ID (e.g., 'material-3' or 'tailwind-ui') to guide Claude's audit process.

Design System References

Name: Design System References
Author: MadAppGang

byMadAppGang

•

196

デザインツール

Performs professional UI design reviews against industry-standard systems like Material Design, Apple HIG, and Tailwind UI.

概要

This skill equips Claude with specialized knowledge of major design systems, enabling precise UI audits and frontend code reviews. It provides comprehensive reference data for Material Design 3, Apple Human Interface Guidelines, Tailwind UI, Ant Design, and Shadcn/ui, including specific color palettes, typography scales, spacing grids, and component patterns. It is an essential tool for developers and designers who need to ensure their implementations align with professional standards, accessibility requirements, and platform-specific conventions.

主な機能

Multi-system support for Material 3, Apple HIG, Tailwind, Ant, and Shadcn
Guidance on platform-specific navigation and interaction patterns
Comprehensive typography, spacing, and color role reference guides
Automated design review checklists for framework compliance
Semantic color system mapping and WCAG accessibility checks
196 GitHub stars

ユースケース

Auditing a React dashboard against Material Design 3 specifications
Ensuring an iOS mobile app implementation follows Apple's Human Interface Guidelines
Validating a Tailwind CSS layout for spacing and typography consistency

概要

主な機能

Multi-system support for Material 3, Apple HIG, Tailwind, Ant, and Shadcn
Guidance on platform-specific navigation and interaction patterns
Comprehensive typography, spacing, and color role reference guides
Automated design review checklists for framework compliance
Semantic color system mapping and WCAG accessibility checks
196 GitHub stars

ユースケース

Auditing a React dashboard against Material Design 3 specifications
Ensuring an iOS mobile app implementation follows Apple's Human Interface Guidelines
Validating a Tailwind CSS layout for spacing and typography consistency