agentmods.dev

design-doctrine

design-doctrine is a skill for Claude Code from plugin87/ux-ui-agent-skills. It costs 92 tokens per session (2,273 once invoked), scanned A, original, MIT.

A shared rulebook for building and checking user interfaces, including themes, visual states, responsive layouts, and verification steps. A user interface is the part of software people see and operate.

In plain words
What is it for?
Use it when creating, reviewing, or theming screens, components, or design tokens, and when checking them in multiple themes and screen sizes.
Why use it?
It reduces visual and interaction errors that automated checks alone may miss, such as broken focus states, poor small-screen layouts, or controls that do not visibly change.

Skill for Claude Code

Written for Claude Code: ${CLAUDE_SKILL_DIR} variable. Also seen: mentions CLAUDE.md.

Part of the ux-ui-agent-skills plugin — 25 skills, 1 command, 1 agent, 3 hooks, 2 MCP servers shipped together

not rated 1.9krepo +367 changed 9d ago A scan 92 tokens original MIT

Good fit Use it when creating, reviewing, or theming screens, components, or design tokens, and when checking them in multiple themes and screen sizes.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/plugin87/ux-ui-agent-skills/design-doctrine
View source ↗ plugin87/ux-ui-agent-skills plugin87.github.io
About the project

UX/UI Agent Skills is a set of instructions, design tokens, reusable components, accessibility rules, and design-system references that guide Claude in producing interface designs and code. It is intended for developers and designers who want framework-independent, token-based UI work with accessibility checks. The catalogue entries package these UX, UI, component, and validation workflows as Claude Code skills and related add-ons.

plugin87/ux-ui-agent-skills · 1,927 stars · on GitHub · plugin87.github.io

Install

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.

Any agent
npx skills add plugin87/ux-ui-agent-skills --skill design-doctrine
Clone the repo
git clone --depth 1 https://github.com/plugin87/ux-ui-agent-skills

Made for: Claude Code.

Or install ux-ui-agent-skills, the plugin that ships this one along with the rest of its 25 skills, 1 command, 1 agent, 3 hooks, 2 MCP servers.

Wrote 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.

agentmods badge for design-doctrine

README.md
[![agentmods](https://agentmods.dev/badge/skills/plugin87/ux-ui-agent-skills/design-doctrine/github.svg)](https://agentmods.dev/skills/plugin87/ux-ui-agent-skills/design-doctrine)
Your own site
<a href="https://agentmods.dev/skills/plugin87/ux-ui-agent-skills/design-doctrine"><img src="https://agentmods.dev/badge/skills/plugin87/ux-ui-agent-skills/design-doctrine/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.

agentmods 80×15 button for design-doctrine

Your own site · 80×15
<a href="https://agentmods.dev/skills/plugin87/ux-ui-agent-skills/design-doctrine"><img src="https://agentmods.dev/badge/skills/plugin87/ux-ui-agent-skills/design-doctrine.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 92 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,273 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00092 $0.02273
Opus 5.5 $0.00037 $0.00909
Sonnet 5.5 $0.00018 $0.00455
Haiku 4.5 $0.00009 $0.00227

Measured 9d ago against content hash 8c1b3ffe964a, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

design-doctrine 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 9d 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.

.claude/skills/design-doctrine/SKILL.md · 158 lines

How it starts

The opening of the file, as written. The whole thing — 158 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Skill: Design Doctrine

Step 0 — is the kit here? This skill reads files from the kit. Check once: ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING On KIT_MISSING only the skill folders were installed, which is what npx skills add does. Say so plainly, point the user at npx ux-ui-agent-skills init or the plugin install, and stop. Do not guess the contents of a file you could not open.

A plugin's root CLAUDE.md is not loaded as project context, so the always-on brief travels here instead. Read this before the first line of any design work, then load the rule file for the territory you are actually in.

Verification protocol - run gates, never claim

  1. Never state a number you did not measure. Any contrast ratio, "WCAG pass", or "100%" must come from running a gate and reporting its real output. If you have not run it, say "not verified yet."
  2. Verify every state, not just resting. node ${CLAUDE_SKILL_DIR}/../../../scripts/verify_states.mjs <file> [--dark] measures default, hover and focus - a button that passes at rest can fail on hover.
  3. One command before reporting done: node ${CLAUDE_SKILL_DIR}/../../../scripts/accuracy_report.mjs. Report the real N/N line. It is all-or-nothing.
  4. Build with the gates, not after them. Fix and re-run until green; never announce success between failures.
  5. Render and LOOK. Gates pass while a UI is still visibly broken. Screenshot the harness in both themes, click every control, and confirm the state changed.
  6. Responsive is gated too: node ${CLAUDE_SKILL_DIR}/../../../scripts/verify_responsive.mjs <file|dir> - no horizontal overflow at 280/320/414px.
  7. Honest scope. The gates prove objective correctness. They never prove taste. For that, run /critique, look at the work yourself, and start from the taste preflight below rather than from default components.
  8. SKIPPED is not a pass. With no browser installed a render gate prints SKIPPED and exits 0, reporting nothing. Run single render gates behind DS_REQUIRE_BROWSER=1 so that becomes REQUIRED, FAILING, and fix it with npx playwright install chrome rather than by removing the flag.

Read the full file on GitHub · 158 lines

Changes

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.

  1. 9d ago Changed · +78 lines 8c1b3ffe964a
  2. 1mo ago Changed · +4 lines c3afec8d55f0
  3. 1mo ago First seen · 76 lines · 92 tokens per session scan A f76d94da12a8

Subscribe to this mod's changes

design-doctrine is a skill published in the GitHub repository plugin87/ux-ui-agent-skills (1,927 stars, last pushed 5d ago), licensed MIT. It adds 92 tokens to every session and 2,273 once invoked, about $0.0004 per session on Opus 5.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-09-15.

CSS and stylingClaude CodeDesign and UXFrontendaccessibilityai-agentsclaudeclaude-skillscomponent-library
Related

Other skills, from other repositories

brand-visual-language

Shape language across type, radius and icons carries brand personality. Use when starting a design system, picking icons or radius tokens, or reviewing visual consistency.

dembrandt/dembrandt-skills · 35 tokens

loading-states-and-perceived-performance

Spinners, skeletons and staggered reveals that manage wait times. Use when designing loading states, async data or the feel of a slow interface.

dembrandt/dembrandt-skills · 38 tokens

micro-interactions

Small purposeful animations — toggles, animated icons, success moments. Use when designing interactive feedback, success states or loaders.

dembrandt/dembrandt-skills · 28 tokens

responsive-paradigms

Mobile, tablet and desktop are different paradigms, not one layout scaled. Use when designing responsive layouts or deciding what each breakpoint shows.

dembrandt/dembrandt-skills · 33 tokens

color-mode-and-theme

Light, dark or both, and when a theme selector is worth it. Use when defining a base palette or deciding on dark mode support.

dembrandt/dembrandt-skills · 33 tokens

elevation-and-depth

Shadows and layering that lift elements above the surface. Use when designing cards, dropdowns, modals, tooltips or any floating element.

dembrandt/dembrandt-skills · 34 tokens