design-references

The Design References skill acts as a comprehensive knowledge base for UI/UX agents, providing immediate access to industry-standard design system specifications. Designed for front-end developers, UI engineers, and design systems architects, this tool streamlines the code review process by ensuring that implementations strictly adhere to established principles, color systems, typography scales, and component patterns. Instead of manually searching through external documentation, the agent can programmatically query these references to validate layout integrity, accessibility compliance, and visual consistency against popular frameworks.

• Access authoritative design data for Material Design 3, Apple Human Interface Guidelines (HIG), Tailwind UI, Ant Design, and Shadcn/ui.

• Retrieve structured details on color systems, including semantic color roles, tonal palettes, and contrast metrics per WCAG standards.

• Consult typography scales including font roles, weights, line heights, and system-specific units (sp, pt, px).

• Use predefined review checklists to automate the verification of touch targets, grid systems, and dark mode support.

• Leverage responsive spacing patterns and baseline grid definitions to detect common layout discrepancies in real-time.

• When performing a UI review, provide the specific Reference ID (e.g., material-3, apple-hig, tailwind-ui) to fetch the relevant constraints.

• Use the data to compare current DOM or component properties against the reference's recommended values.

• The skill functions best when paired with browser testing agents to cross-reference computed CSS values with the provided design guidelines.

• Note that these are static references for validation; they do not apply changes automatically but provide the source of truth for the agent to recommend improvements.

• Ideal for cross-platform applications requiring high fidelity to native platform conventions like iOS/macOS or web-standard frameworks like Tailwind.