Mongodb Design System

Reusable design system skill scaffolded from DESIGN.md. Source: VoltAgent/awesome-claude-design + getdesign.md.

When to use

User asks to build, scaffold, or style UI matching Mongodb's visual language. Also: "make it look like Mongodb", "use Mongodb aesthetic", "Mongodb-style components".

How to apply

1. Read DESIGN.md (bundled in this skill dir) — contains full token spec. → verify: file exists and colors: / typography: blocks present
2. Emit CSS variables from colors: section verbatim. → verify: hex values match DESIGN.md spec
3. Build type scale from typography: block. → verify: font-family + weight scale defined
4. Apply component patterns from components: section. → verify: each component uses spec radii/shadows
5. Respect dos_donts: rules — these are guardrails. → verify: no dos_donts: rule violated
6. Use agent_prompt_guide: reusable prompts for new screens. → verify: prompts referenced when generating UI

Files