Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add nyldn/claude-dolphin --skill ux-ui-design-systemgit clone --depth 1 https://github.com/nyldn/claude-dolphinWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/nyldn/claude-dolphin/ux-ui-design-system)<a href="https://agentmods.dev/skills/nyldn/claude-dolphin/ux-ui-design-system"><img src="https://agentmods.dev/badge/skills/nyldn/claude-dolphin/ux-ui-design-system/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/nyldn/claude-dolphin/ux-ui-design-system"><img src="https://agentmods.dev/badge/skills/nyldn/claude-dolphin/ux-ui-design-system.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00342 | $0.01706 |
| Opus 5 | $0.00171 | $0.00853 |
| Sonnet 5 | $0.00068 | $0.00341 |
| Haiku 4.5 | $0.00034 | $0.00171 |
Grade A, and why
ux-ui-design-system scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 192 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Claude Dolphin - UX/UI Design System
Systematic approach to UI/UX quality, accessibility compliance, and design consistency for Claude Code.
When to Apply
Activate for ANY design-related work:
- Creating or modifying UI components
- Reviewing existing interfaces
- Accessibility compliance checks
- Design system consistency audits
- Visual refinement and polish
- Component styling changes
- Layout modifications
Core Methodology
Hierarchy of Concerns (Priority Order)
- Accessibility - WCAG 2.2 AA compliance (non-negotiable)
- Consistency - Design system alignment
- Usability - Intuitive interaction patterns
- Aesthetics - Visual polish and refinement
Before Any UI Work
- Assess the current state - Read existing code before suggesting changes
- Check for design tokens - Use existing colors, spacing, typography
- Verify component library - Use shadcn/existing components before creating custom
- Consider accessibility first - Every change must maintain or improve a11y
Systematic Checks
Accessibility (WCAG 2.2 AA)
Color Contrast:
- Body text: 4.5:1 minimum ratio
- Large text (18px+ or 14px+ bold): 3:1 minimum ratio
- UI components and icons: 3:1 minimum ratio
- Focus indicators: 3:1 against adjacent colors
Interactive Elements:
- Touch targets: minimum 44×44px (WCAG 2.2)
- Focus states: visible, 2px+ outline, high contrast
- Keyboard navigation: logical tab order, no traps
- Skip links for repetitive content
Semantic Structure:
- Proper heading hierarchy (h1 > h2 > h3, no skips)
- Form labels associated with inputs
- Alt text for images (empty for decorative)
- ARIA labels where semantic HTML insufficient
Motion & Time:
- Respect
prefers-reduced-motion - No auto-playing media
- Provide pause controls for animations
Design Consistency
Design Tokens:
- Colors from defined palette (CSS variables or Tailwind config)
- Spacing from consistent scale (4, 8, 12, 16, 24, 32, 48, 64px)
- Typography from defined scale
- Border radius consistent across components
What ships with it
4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 10d ago First seen · 192 lines · 342 tokens per session scan A 0cb3d288d044
ux-ui-design-system is a skill published in the GitHub repository nyldn/claude-dolphin (9 stars, last pushed 18d ago), licensed MIT. It adds 342 tokens to every session and 1,706 once invoked, about $0.0017 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
design-md
Author/validate/export Google's DESIGN.md token spec files.
accessibility
Use when making a web UI conform to WCAG 2.2 Level AA — axe-core or Lighthouse a11y violations, keyboard operability, focus management, ARIA roles/names/live regions, contrast, tap-target size. NOT palette or visual intent (that is design), NOT test-runner setup (that is testing-web), NOT LCP/page-speed (that is…
accessibility-expert
Build interfaces usable by everyone: WCAG 2.2 conformance, semantic HTML, ARIA, keyboard navigation, screen readers and accessible forms. Use when the user mentions accessibility, a11y, WCAG, ARIA, screen readers, keyboard navigation, colour contrast, focus management, the European Accessibility Act or Section 508, or…
figma-extract-design-system
Extract a design system from vibe-coded production apps that never had one: inventory components, mine de-facto styling into DTCG tokens, scaffold a Storybook package, port components, and optionally round-trip tokens/components into Figma. Use when the user wants to 'extract a design system', 'create a design system…
figma-version-history
List a Figma file's version history, snapshot the file at any past version, and diff two versions (added/removed/renamed pages plus deep per-component changes). Use when the user wants to inspect Figma history — triggers: 'list Figma versions', 'what versions does this file have', 'show version history', 'snapshot…
figma-blame-node
Find which Figma version introduced a specific change — a component property or a child node — via a binary search over version history (log2(N) API calls instead of N). Answers 'who added this and when'. Use when the user wants git-blame-style attribution for a Figma design — triggers: 'when was this component…