design-doctrine

Featured

The house rules for ANY design or UI work - the verification protocol (run the gate, never claim a number), the absolute no-emoji rule, token by intent, one shared theme, the eight states, one thing leads, and output completeness. Load this FIRST whenever building, reviewing, or theming a screen, component, or token set. Installed as a plugin, this skill carries what CLAUDE.md carries in the repo.

Web & Frontend 1,473 stars 154 forks Updated 1 weeks ago MIT

Install

Quality Score: 94/100

Stars 20%

100

Recency 20%

90

Frontmatter 20%

70

Documentation 15%

100

Issue Health 10%

50

License 10%

100

Description 5%

100

Skill Content

# Skill: Design Doctrine 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 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 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 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` and look at the work yourself. 8. **SKIPPED is not a pass.** With no browser installed a render gate prints `SKIPPED` and exits 0, reporting nothing. Run sin...

Details

Author: plugin87
Repository: plugin87/ux-ui-agent-skills
Created: 6 months ago
Last Updated: 1 weeks ago
Language: JavaScript
License: MIT

Integrates with

Tailwind CSS · Frontend

Bundled in these plugins

ux-ui-agent-skills

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

design

Audit and fix the design of interfaces that already exist in files, across 17 modes (checkup, smell, review, deslop, typeset, recolor, motion, interaction, relayout, responsive, redesign, tokenize, setup, finish, refine, voice, surface). Use this whenever the user types "/design" or "design" followed by a mode name or a target file. Also use it, without waiting for the word "design", whenever someone says a screen looks generic, AI-generated, templated, sloppy, boring, flat, weak, unfinished, or "like every other landing page", or asks to audit, critique, review, de-slop, restyle, recolor, retype, relayout, tighten, polish, or ship-check an existing page or component. Trigger on complaints about a hero, feature cards, spacing, type hierarchy, color palette, motion, hover or focus states, empty and error states, dark mode, or responsive behavior in code that is already written. For inventing a brand new interface from nothing, prefer the frontend-design skill; this skill is for UI that is already in files.

0 Updated 1 months ago

Web & Frontend Listed

designos

Design intelligence OS for any UI/UX task. Routed craft modules — 24 components, 24 industry packs, 13 UX patterns, 10 foundations (typography, color, spacing, tokens, dark mode, accessibility), 8 psychology modules, motion system — plus a deterministic review gate (designos review/audit) with WCAG-computing validators. Use when designing, building, reviewing, scoring, or refactoring UI: landing pages, dashboards, pricing pages, forms, auth, docs sites, emails, native iOS/Android, color schemes, type scales, layout, spacing, accessibility, animation, or when asked to make UI 'premium', 'distinctive', or 'Stripe/Linear/Apple-level'. Skip for pure backend, API, or infra work with no visual surface.

4 Updated yesterday

Web & Frontend Listed

ultimate-frontend-skills

Use whenever a website, landing page, marketing site, portfolio, microsite, homepage, or any public-facing web page is being built, redesigned, restyled, or made to "look better" - including plain HTML/CSS pages, Next/React/Astro sites, and single-file pages. Supplies the house style (editorial serif typography, warm-neutral and near-black grounds, cinematic imagery, layered scroll parallax, exploded technical views) plus a copy-in CSS chassis, a motion runtime, a section library, a scaffolder, and an audit.

6 Updated today