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.

主要功能

01Multi-system support for Material 3, Apple HIG, Tailwind, Ant, and Shadcn

02Guidance on platform-specific navigation and interaction patterns

03Comprehensive typography, spacing, and color role reference guides

04Automated design review checklists for framework compliance

05Semantic color system mapping and WCAG accessibility checks

06196 GitHub stars

使用场景

01Auditing a React dashboard against Material Design 3 specifications

02Ensuring an iOS mobile app implementation follows Apple's Human Interface Guidelines

03Validating a Tailwind CSS layout for spacing and typography consistency

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add madappgang/claude-code design

For use in Claude.ai and ChatGPT

Download Skill