# Design System Reference

> Compare real-world design-system patterns when specifying, auditing, or naming a component and current external references would improve the decision.

- Skill: `memi-design/design-system-reference` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add memi-design/design-system-reference`
- Raw SKILL.md: https://api.skillmd.com/api/skills/memi-design/design-system-reference/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: memi-design (https://skillmd.com/u/memi-design)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/memi-design/design-system-reference

---


# Design system reference

Use this skill to benchmark a component or pattern against established design systems.

## Workflow

1. Define the exact component, state, or interaction under review.
2. Read the relevant section of [the cross-industry catalog](references/catalog.md).
3. Open three to five primary design-system sources and verify that their guidance is current.
4. Separate broad consensus from stack-specific conventions.
5. Prefer the project's existing vocabulary and primitives unless evidence supports a change.
6. Cite the primary sources that shaped the recommendation.

Do not treat the catalog as a timeless authority. External APIs and documentation drift, so verify details before implementation.