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.
curl -O https://raw.githubusercontent.com/Everyone-Needs-A-Copilot/claude-copilot/main/.claude/skills/design/aesthetic-directions/SKILL.mdgit clone --depth 1 https://github.com/Everyone-Needs-A-Copilot/claude-copilotWrote 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/everyone-needs-a-copilot/claude-copilot/aesthetic-directions)<a href="https://agentmods.dev/skills/everyone-needs-a-copilot/claude-copilot/aesthetic-directions"><img src="https://agentmods.dev/badge/skills/everyone-needs-a-copilot/claude-copilot/aesthetic-directions/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/everyone-needs-a-copilot/claude-copilot/aesthetic-directions"><img src="https://agentmods.dev/badge/skills/everyone-needs-a-copilot/claude-copilot/aesthetic-directions.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.00102 | $0.03091 |
| Opus 5 | $0.00051 | $0.01545 |
| Sonnet 5 | $0.00020 | $0.00618 |
| Haiku 4.5 | $0.00010 | $0.00309 |
Grade A, and why
aesthetic-directions 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.
How it starts
The opening of the file, as written. The whole thing — 260 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Aesthetic Directions
Named aesthetic directions for committing to a specific visual identity. Each direction includes concrete visual moves, not vague adjectives.
Purpose
- Force intentional aesthetic commitment before designing
- Provide concrete visual vocabulary (not "clean and modern")
- Map directions to industries and audiences
- Detect and reject AI-generated visual clichés
Named Directions
1. Neo-Brutalist
Visual Moves: Raw borders (3-4px black), no border-radius, monospace type, flat colors, visible grid, intentional "ugliness" as confidence Type: Mono headings (Space Mono), grotesque body (Work Sans) Color: Black, white, one screaming accent (yellow, red, cyan) Spacing: Tight, aggressive, asymmetric Motion: None or instant. Movement is dishonest in this aesthetic Best For: Creative agencies, dev tools, counter-culture brands
2. Swiss Precision
Visual Moves: Strict grid, Helvetica-adjacent type, lots of whitespace, left-aligned, minimal color, information-dense but ordered Type: Grotesk headings (Neue Haas Grotesk), proportional body (Suisse Int'l or Geist) Color: Black + white + one accent (typically red or blue) Spacing: Generous, mathematical, grid-locked Motion: Subtle, functional transitions only Best For: Data platforms, fintech, professional services
3. Soft Tech
Visual Moves: Large border-radius (12-16px), soft shadows, pastel-adjacent palette, generous padding, rounded illustrations Type: Rounded sans (Nunito Sans, Figtree), friendly weight Color: Soft primaries, tinted neutrals (not pure gray) Spacing: Generous, breathable, comfortable Motion: Gentle easing, subtle bounce on interaction Best For: Consumer SaaS, onboarding flows, education platforms
4. Editorial Luxury
Visual Moves: Serif dominance, generous line-height, pull quotes, editorial grid with asymmetric columns, restrained palette Type: Display serif headings (Playfair Display, Cormorant), refined body (Source Serif Pro) Color: Deep darks, cream/ivory backgrounds, gold or copper accents Spacing: Luxurious whitespace, dramatic margins Motion: Slow, deliberate fades and reveals Best For: Fashion, publishing, luxury brands, portfolios
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.
- 5d ago First seen · 260 lines · 102 tokens per session scan A 44106d2f3457
aesthetic-directions is a skill published in the GitHub repository Everyone-Needs-A-Copilot/claude-copilot (13 stars, last pushed today), licensed MIT. It adds 102 tokens to every session and 3,091 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.
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.
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.
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…
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.
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.
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…