skills.rest
MadAppGang
MadAppGangOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-references

Provide design system references for UI review tasks.

7|4|Updated Feb 26, 2026
Search Tags:#design system#material design#ui review#tailwind#guidelines#shadcn#apple hig
One-click install
npx skills add https://github.com/MadAppGang/magus --skill design-references
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-references
Source: https://github.com/MadAppGang/magus/tree/main/plugins/designer/skills/design-references
Command: npx skills add https://github.com/MadAppGang/magus --skill design-references

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides standardized design system references to ensure UI reviews are consistent, objective, and aligned with established best practices.

Core Features & Use Cases

  • Comprehensive References: Access guidelines for Material Design 3, Apple HIG, Tailwind UI, Ant Design, and Shadcn/ui.
  • Structured Review Points: Each reference includes principles, color, typography, spacing, and component patterns.
  • Use Case: When reviewing a new mobile app screen, you can instruct the AI to check it against Apple's Human Interface Guidelines using the apple-hig reference ID.

Quick Start

Review the attached screenshot 'login-screen.png' using the Material Design 3 guidelines.

Frequently Asked Questions about design-references

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize UI reviews against design systems like Material Design or Apple HIG?▼

Apply predefined design system references to standardize UI reviews. This enforces objective critiques by checking designs against established color, typography, spacing, and component pattern guidelines to ensure adherence to best practices.

What design system guidelines are available for objective UI critiques?▼

Available guidelines include Material Design 3, Apple Human Interface Guidelines, Tailwind UI, Ant Design, and Shadcn/ui. These references provide structured principles for color, typography, spacing, and component patterns to facilitate objective UI critiques.

Can I use this to check a mobile app screenshot against Apple Human Interface Guidelines?▼

Yes, you can check mobile app screenshots against Apple Human Interface Guidelines. The reference provides structured review points for principles, color, typography, spacing, and component patterns to ensure adherence to established standards.

How do I review a login screen using Material Design 3 guidelines?▼

Review a login screen using Material Design 3 guidelines by instructing the AI to evaluate the attached screenshot against the reference. It checks color, typography, spacing, and component patterns for adherence to Material principles.

Does this UI review reference cover accessibility standards and component patterns?▼

Yes, the UI review references cover accessibility standards and component patterns. They ensure adherence to established design principles by providing structured guidelines for color, typography, and spacing across supported design systems.

Related Skills

Explore More Design & Creative Skills→
IsKenKenYaIsKenKenYa
35

ui-visual-validator

Analyze screenshots to validate UI modifications against design mockups and WCAG guidelines.

Community
Advanced
DauQuangThanhDauQuangThanh
14

frontend-design-review

Review Figma/Sketch assets for UI/UX quality, design-system alignment, and WCAG 2.1 AA compliance.

Community
Advanced
anbeimeanbeime
5.0k

web-design-analyzer

Extract design systems from web page screenshots into structured JSON and coding prompts.

Community
Intermediate
iBz-04iBz-04
63

web-design-guidelines

Review web UI source files against Web Interface Guidelines for accessibility and design issues.

Community
Basic