claude-copilot: Skill for Claude Code

.claude/skills/design/design-heuristics/SKILL.md

design-heuristics is a skill for Claude Code from Everyone-Needs-A-Copilot/claude-copilot. It costs 95 tokens per session (1,967 once invoked), scanned A, original, MIT.

A set of structured checklists for reviewing user interfaces and other designs. It uses established principles from designers such as Dieter Rams and Jakob Nielsen to find usability problems and suggest fixes.

In plain words
What is it for?
Use it to critique screens, interactions, and visual designs before release or peer review. It also helps compare beginner and experienced approaches to design decisions.
Why use it?
It replaces subjective feedback with specific questions and pass-or-fail criteria. Teams can catch confusing or unnecessary design choices before users encounter them.

Skill for Claude Code

Written for Claude Code: when-to-use in frontmatter.

This is Everyone-Needs-A-Copilot/claude-copilot's own configuration. It tells Claude Code how to work on claude-copilot itself, so it is not a mod to install elsewhere. Copy it as a starting point and replace the rules that are about this project. Everything claude-copilot configures →

Part of the claude-copilot plugin — 72 skills, 17 commands, 16 agents, 6 hooks shipped together

Reuse

Borrowing it

Nothing to install: this file belongs to Everyone-Needs-A-Copilot/claude-copilot. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file
curl -O https://raw.githubusercontent.com/Everyone-Needs-A-Copilot/claude-copilot/main/.claude/skills/design/design-heuristics/SKILL.md
Clone the repo
git clone --depth 1 https://github.com/Everyone-Needs-A-Copilot/claude-copilot

Made for: Claude Code.

Or install claude-copilot, the plugin that ships this one along with the rest of its 72 skills, 17 commands, 16 agents, 6 hooks.

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-heuristics

README.md
[![agentmods](https://agentmods.dev/badge/skills/everyone-needs-a-copilot/claude-copilot/design-heuristics/github.svg)](https://agentmods.dev/skills/everyone-needs-a-copilot/claude-copilot/design-heuristics)
Your own site
<a href="https://agentmods.dev/skills/everyone-needs-a-copilot/claude-copilot/design-heuristics"><img src="https://agentmods.dev/badge/skills/everyone-needs-a-copilot/claude-copilot/design-heuristics/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-heuristics

Your own site · 80×15
<a href="https://agentmods.dev/skills/everyone-needs-a-copilot/claude-copilot/design-heuristics"><img src="https://agentmods.dev/badge/skills/everyone-needs-a-copilot/claude-copilot/design-heuristics.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 95 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,967 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.00095 $0.01967
Opus 5 $0.00048 $0.00983
Sonnet 5 $0.00019 $0.00393
Haiku 4.5 $0.00010 $0.00197

Measured 5d ago against content hash f3c9c260a609, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-10, from the pricing page.

Security

Grade A, and why

design-heuristics 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 5d 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/design-heuristics/SKILL.md · 144 lines

How it starts

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

Design Heuristics

Evaluation frameworks for rigorous design critique. Use these to evaluate work before shipping, not after.

Purpose

  • Provide structured evaluation rubrics (not vibes)
  • Distinguish senior from junior design thinking
  • Identify common design anti-patterns with fixes
  • Enable self-critique before peer review

Rams' 10 Principles — Evaluation Rubric

# Principle Ask Yourself Pass Fail
1 Innovative Does this explore new possibilities or just copy patterns? Introduces at least one novel interaction or visual approach Pure template reproduction
2 Useful Does every element serve the user's goal? All elements traceable to user needs Decorative elements with no function
3 Aesthetic Is the visual design intentional and cohesive? Named aesthetic direction, consistent application "Clean and modern" without specifics
4 Understandable Can a new user grasp this without instructions? Self-evident UI, progressive disclosure Requires tutorial or manual
5 Unobtrusive Does the design serve content, not itself? Content is hero, chrome is invisible Design competes with content
6 Honest Does it promise only what it delivers? Accurate affordances, no dark patterns Misleading buttons, hidden costs
7 Long-lasting Will this feel dated in 6 months? Based on principles, not trends Relies on current trend (glassmorphism everywhere)
8 Thorough Is every detail considered? All states, edge cases, error paths designed Only happy path designed
9 Environmentally friendly Is it efficient with resources? Optimized assets, minimal HTTP requests, lean code Bloated, wasteful, over-engineered
10 Minimal Is anything here unnecessary? Every element justified Elements that can be removed without loss

Scoring: Count passes. 8+ = ship it. 6-7 = iterate. Below 6 = rethink approach.

Read the full file on GitHub · 144 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. 5d ago First seen · 144 lines · 95 tokens per session scan A f3c9c260a609

Subscribe to this mod's changes

design-heuristics is a skill published in the GitHub repository Everyone-Needs-A-Copilot/claude-copilot (13 stars, last pushed today), licensed MIT. It adds 95 tokens to every session and 1,967 once invoked, about $0.0005 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-09-04.

Related

Other skills, from other repositories

ln-75-architecture-diagram-builder

Creates current or target architecture diagrams as the primary deliverable. Not for UI design, architecture audits, or invented structure.

levnikolaevich/claude-code-skills · 33 tokens

ui-animation

Builds, reviews, and measures UI motion, including springs, gestures, scroll effects, and curve fitting from recordings. Use when asked to "add animation", "match this easing", "reverse engineer this motion", or find animation opportunities. For action semantics use product-design; for visual layout use ui-design.

mblode/agent-skills · 65 tokens

ui-design

Designs and builds React/Next/Tailwind UI and audits visual and interaction defects. Use when asked to "build a landing page", "extract our design system", "add dark mode", "make this responsive", "remove UI slop", or "audit this component". For product decisions use product-design; for browser measurements use…

mblode/agent-skills · 80 tokens

presentation-creator

Builds decks with a story spine, house visual system, setting-specific density, and speaker notes. Use when asked to "create a presentation", "write a pitch deck", or "turn this doc into slides". Defaults to Marp; use an available presentation tool for editable PowerPoint. For product UI use ui-design.

mblode/agent-skills · 69 tokens

product-design

Specifies interaction choices, action scope, reversibility, recovery, and reachable states. Use when asked to "design the flow", "should delete be undoable", "choose the control", or "review this product decision". For visual implementation use ui-design; for motion use ui-animation; for wording use copywriting.

mblode/agent-skills · 67 tokens

design-inventory

Use to run the Claude Design to ClosedLoop pipeline against the current web-ui. Stage A inventories a design export zip into schema-validated findings (typed design units - screens, regions like nav bars, standalone components like a chat dialog; UX and behavioral changes; Storybook component reuse mapping; token…

closedloop-ai/claude-plugins · 173 tokens