Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Plug-and-play MCP for UI superpowers. Use when building, designing, redesigning, refactoring, polishing, auditing, or enhancing any web or app user interface — landing pages, marketing sites, dashboards, product UI, components, forms, or design systems. Use when an interface looks generic or "AI-made", or needs better typography, color, spacing, layout, hierarchy, motion, accessibility, or performance. For any coding agent doing frontend visual work. Not for backend logic, data pipelines, CLI to
.claude/skills/hashgraph-online-designer-skill/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-08 | ✗→✓ | ▲ Improved | 56% | 0% |
| case-02 | ✗→✓ | ▲ Improved | 17% | 0% |
| case-07 | ✗→✓ | ▲ Improved | -37% | 0% |
| case-10 | ✗→✓ | ▲ Improved | -20% | 0% |
| case-11 | ✗→✓ | ▲ Improved | 190% | 0% |
A plug-and-play MCP that gives your agent UI superpowers: design, refactor, and ship interfaces that don't look AI-made.
Foundation: Brief by default → commit direction before code → deep refs on demand → deterministic gate before done.
This file is the router. Substance lives in fifteen reference files under reference/; load them on demand via MCP — do not work from memory.
When the designer-skill MCP server is connected:
get_preflight_brief — compact binding rules (~500 tokens). Call first.commit_design_direction — declare register, aesthetic, physical scene, layouts, type direction, anti-slop risks, inverse test. Must PASS before code.load_project_context — PRODUCT.md / DESIGN.md when present. If NO_PRODUCT_MD on greenfield, run get_command({ verb: "setup" }).dispatch_intent — map the user's request to verb(s) + which references to load (2–4 files, not all fifteen).get_reference — load only the files dispatch_intent recommends.get_reference({ name: "css-techniques" }) for idiomatic patterns (centering, specificity, logical properties, container queries, :has(), clamp()).review_and_gate — scan changed files; score ≥85, zero blocking slop. Do not claim done on FAIL.Optional: get_palette_seed on greenfield (no committed brand colors); detect_antipatterns for ad-hoc scans; web-search MCP for contemporary UI references on visually-led net-new work (extract moves, don't copy layouts).
If MCP is unavailable, read local reference/ files using the routing map below.
reference/aesthetic-systems.md. Never mix two signatures on one surface.reference/differentiation-playbook.md: inverse test, layout families, named references, one weird thing (brand).reference/refactor-and-redesign.md; preserve functionality.reference/refactor-and-redesign.md.| Open this | When the task is about | |---|---| | reference/differentiation-playbook.md | How to be distinctive — inverse test, layout menu, one weird thing, named references, physical scene | | reference/design-principles.md | Visual fundamentals — typography, spacing, color, layout, hierarchy, depth (neutral baseline) | | reference/aesthetic-systems.md | Five design languages + brand-identity font procedure | | reference/avoid-ai-slop.md | What to refuse — ban-list, category-reflex, output-completeness, ship checklist | | reference/motion-and-interaction.md | Animation timing, springs, scroll, reduced-motion | | reference/engineering-and-performance.md | Tokens, a11y, responsive, CWV, framework-honest output | | reference/refactor-and-redesign.md | Improve existing UI without breaking it | | reference/command-playbook.md | Intent → verb dispatch | | reference/interaction-design.md | Cognitive laws, forms, navigation, errors, loading | | reference/visual-critique.md | Seven-dimension critique instrument | | reference/design-systems.md | Token architecture, component specs, theming | | reference/project-init.md | Discovery, PRODUCT.md, DESIGN.md setup | | reference/craft-flow.md | Shape-then-build pipeline with user gates | | reference/live-mode.md | Browser variant mode: HMR hot-swap | | reference/css-techniques.md | How to write the CSS — resets, centering, selectors/specificity, logical properties, container queries, :has(), clamp(); the cookbook for applying CSS fixes |
design-principles.md is the neutral baseline. Committing to a system in aesthetic-systems.md overrides baseline for that surface. Existing brand identity beats both on edits; never second-guess committed fonts, lanes, or palettes.
design-principles.mdaesthetic-systems.mddifferentiation-playbook.mdavoid-ai-slop.mdmotion-and-interaction.mdengineering-and-performance.mdcss-techniques.mdreview_and_gate replaces manual checklist-only shipping. It runs the 44-rule detector, computes a slop score, and returns blocking fixes. Also verify: category-reflex pass, no truncated code output, text ≥4.5:1, focus-visible rings, reduced-motion alternative, touch targets ≥44×44px, tested at 375/768/1440px.
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-08 | fail→pass | 21,364 | 6,863 | -68% | 1 | 1 | 0% | 1,065 | 1,664 | +56% | 0 | 0 | — |
case-01 | fail→fail | 44,219 | 13,696 | -69% | 1 | 1 | 0% | 8,241 | 1,735 | -79% | 0 | 0 | — |
case-02 | fail→pass | 42,081 | 51,155 | +22% | 1 | 1 | 0% | 8,236 | 9,642 | +17% | 0 | 0 | — |
case-03 | fail→fail | 37,704 | 5,884 | -84% | 1 | 1 | 0% | 8,243 | 1,825 | -78% | 0 | 0 | — |
case-04 | pass→pass | 18,796 | 19,383 | +3% | 1 | 1 | 0% | 3,634 | 4,455 | +23% | 0 | 0 | — |
case-05 | pass→pass | 14,619 | 14,265 | -2% | 1 | 1 | 0% | 2,650 | 4,248 | +60% | 0 | 0 | — |
case-06 | pass→pass | 18,468 | 17,847 | -3% | 1 | 1 | 0% | 2,611 | 3,314 | +27% | 0 | 0 | — |
case-07 | fail→pass | 21,286 | 7,405 | -65% | 1 | 1 | 0% | 2,856 | 1,798 | -37% | 0 | 0 | — |
case-09 | pass→pass | 10,237 | 1,921 | -81% | 1 | 1 | 0% | 1,544 | 1,660 | +8% | 0 | 0 | — |
case-10 | fail→pass | 16,688 | 7,713 | -54% | 1 | 1 | 0% | 2,281 | 1,823 | -20% | 0 | 0 | — |
case-11 | fail→pass | 9,467 | 7,960 | -16% | 1 | 1 | 0% | 590 | 1,710 | +190% | 0 | 0 | — |
case-12 | fail→pass | 14,679 | 7,613 | -48% | 1 | 1 | 0% | 1,491 | 1,660 | +11% | 0 | 0 | — |
case-13 | fail→pass | 14,012 | 2,919 | -79% | 1 | 1 | 0% | 2,037 | 1,908 | -6% | 0 | 0 | — |
case-14 | fail→pass | 20,639 | 11,001 | -47% | 1 | 1 | 0% | 2,322 | 2,452 | +6% | 0 | 0 | — |
case-15 | fail→pass | 7,788 | 7,680 | -1% | 1 | 1 | 0% | 1,217 | 1,725 | +42% | 0 | 0 | — |
case-16 | pass→pass | 20,204 | 3,131 | -85% | 1 | 1 | 0% | 1,961 | 1,865 | -5% | 0 | 0 | — |
case-17 | fail→pass | 14,196 | 2,075 | -85% | 1 | 1 | 0% | 1,989 | 1,712 | -14% | 0 | 0 | — |
case-18 | pass→pass | 13,095 | 1,571 | -88% | 1 | 1 | 0% | 2,004 | 1,630 | -19% | 0 | 0 | — |
case-19 | pass→pass | 9,811 | 6,579 | -33% | 1 | 1 | 0% | 1,541 | 1,648 | +7% | 0 | 0 | — |
case-20 | pass→pass | 3,537 | 2,460 | -30% | 1 | 1 | 0% | 527 | 1,728 | +228% | 0 | 0 | — |
case-21 | fail→pass | 8,807 | 6,823 | -23% | 1 | 1 | 0% | 1,437 | 1,652 | +15% | 0 | 0 | — |
case-22 | fail→pass | 11,004 | 2,843 | -74% | 1 | 1 | 0% | 1,672 | 1,714 | +3% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted, and 19 counted toward the lift figure. The other 3 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of +55 percentage points is the difference between those two pass rates over the 19 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.