design-standards SKILL.md skillA
design-standards from rampstackco/claude-skills is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add rampstackco/claude-skills/design-standards@git:20260507.ac2b078Pins git:20260507.ac2b078 in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- rampstackco/claude-skills
- Path
skills/design-standards/SKILL.md- Versions recorded
- 3
- Latest version
- git:20260507.ac2b078, committed May 7, 2026
- First version recorded
- Apr 28, 2026
- Size
- 9,597 bytes
- Repository stars
- 1,037
- License
- MIT
Apply production-grade design standards when building or reviewing pages, components, or UI. Use this skill whenever the user asks to build a page, design a component, lay out a section, review the UI, fix the layout, or check design quality. Triggers on build a page, create a component, design a section, hero, card, CTA, layout, review the UI, fix the design, design system, design tokens, spacing, typography scale, button standards, mobile design. Also triggers for any production design…
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# Design Standards Production design standards for any web project. Stack-agnostic. Tool-agnostic. Covers tokens, contrast, hierarchy, spacing, mobile rules, and the pre-ship checklist. This skill complements `brand-identity` (which defines the visual system) and `brand-style-guide` (which documents it). This skill is for the day-to-day work of applying those standards in real components and pages. --- ## When to use - Building a new page, section, or component - Reviewing UI for quality, accessibility, or consistency - Setting up design tokens for a new project - Fixing layout, contrast, or hierarchy issues - Establishing a button or form standard - Pre-ship design review ## When NOT to use - Defining a brand identity from scratch (use `brand-identity`) - Documenting a finished brand system (use `brand-style-guide`) - Building a formal component library (use `design-system`) - Frontend code architecture (use `frontend-component-build`) - Accessibility-only audits with WCAG remediation (use `accessibility-audit`) --- ## Required inputs - The page or component being built or reviewed - The brand's design tokens (colors, type, spacing) - or willingness to define them …
Read the whole file at its exact version.
How to install
mdr add rampstackco/claude-skills/design-standards@sha256:39d0e08ebf96c753The line at the top of this page pins the label git:20260507.ac2b078, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_x5h3jrluvu4cf7e2)
4 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 3 versions of this file, between Apr 28, 2026 and May 7, 2026, about one every 4 days.
| version | committed | commit | size | audit | |
|---|---|---|---|---|---|
| git:20260507.ac2b078 latest | 2026-05-07 | ac2b078 | 9,597 B | A | view · diff |
| git:20260505.c80b896 | 2026-05-05 | c80b896 | 9,412 B | A | view · diff |
| git:20260428.f066ffe | 2026-04-28 | f066ffe | 9,306 B | A | view |
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (9597 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
rampstackco/claude-skills · 1,037 stars · license MIT · pushed 2026-10-27 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_x5h3jrluvu4cf7e2 GET https://markdownregistry.com/api/v1/resolve?ref=rampstackco/claude-skills/design-standards GET https://markdownregistry.com/api/v1/blob/39d0e08ebf96c75330accefc409000df9155c7d8ae094a3121ae1c6083e764ff
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.