design-references

The Design References skill acts as a comprehensive knowledge repository for frontend engineers and UI/UX designers, enabling rapid validation of user interface designs against industry-standard design systems. By centralizing technical constraints and design principles for major frameworks like Material Design 3 (Google), Apple Human Interface Guidelines (iOS/macOS), Tailwind UI, Ant Design, and Shadcn/ui, it ensures consistency and accessibility across multi-platform projects. This skill is particularly useful during the code review or design implementation phase, allowing agents to verify typography scales, spacing patterns, color system roles, and platform-specific component behaviors automatically.

• Provides architectural design principles for M3, Apple HIG, and utility-first frameworks.

• Includes technical specification lookups for type scales, baseline grids, and touch target sizing (dp/pt).

• Contains semantic color mapping for light/dark mode implementations and contrast ratio benchmarks (WCAG).

• Offers component pattern checklists for common UI elements such as buttons, navigation bars, cards, and input forms.

• Facilitates automated UI consistency checks to ensure adherence to established token systems.

• Use this skill when performing design reviews to compare current code against official documentation standards.

• Input typically involves UI components or layout files; output provides comparative analysis, metric verification, and compliance checklists.

• Be aware that design systems evolve; always verify against the official documentation links provided for the latest versioning.

• Integrates seamlessly into the ui-developer agent workflow for automated frontend validation tasks.

• Supports designers and developers in maintaining brand integrity while using atomic utility classes or system-provided interface controls.