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.
npx agentmods add skills/christopherlouet/claude-base/dev-frontend-designnpx skills add christopherlouet/claude-base --skill dev-frontend-designgit clone --depth 1 https://github.com/christopherlouet/claude-baseWrote 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/christopherlouet/claude-base/dev-frontend-design)<a href="https://agentmods.dev/skills/christopherlouet/claude-base/dev-frontend-design"><img src="https://agentmods.dev/badge/skills/christopherlouet/claude-base/dev-frontend-design.svg" alt="Measured on agentmods" 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 | $0.00045 | $0.01620 |
| Opus 5 | $0.00023 | $0.00810 |
| Sonnet 5 | $0.00009 | $0.00324 |
| Haiku 4.5 | $0.00005 | $0.00162 |
Grade A, and why
dev-frontend-design 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 yesterday.
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 — 159 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Design with Art Direction
Principle
AI-generated interfaces all look alike. Inter/Roboto typography, blue/purple palette, rounded cards, same visual rhythm. To stand out, you must commit to an art direction before writing any code.
Mandatory workflow
1. Check the direction in CLAUDE.md
Read the project's CLAUDE.md to find a Style: directive:
## Design Direction
Style: terminal # or cockpit, vitality, editorial, glass, signal
If found, strictly apply the direction (see rule .claude/rules/design-style.md).
2. If no direction is defined — ASK
Before coding, ask the user:
No art direction is defined in CLAUDE.md. Before coding, choose a direction:
- terminal: monospace, black/neon green, sharp edges (for dev tools, web CLI)
- cockpit: dense, multi-panels, real-time indicators (for dashboards, monitoring)
- vitality: colorful, animated, generously rounded (for B2C apps, gamified)
- editorial: serif, airy, paper/ivory (for blogs, long form)
- glass: glassmorphism, gradients, depth (for premium modern apps)
- signal: minimal, gray/white, dense utilitarian (for productivity tools)
Fonts — what to ban
Forbidden (overused by AI):
- Inter, Roboto, Arial, Space Grotesk
- Helvetica (unless explicit editorial direction)
Prefer depending on the direction:
| Direction | Recommended fonts |
|---|---|
| terminal | JetBrains Mono, Fira Code, IBM Plex Mono, Berkeley Mono |
| cockpit | DM Sans, Geist, IBM Plex Sans + Geist Mono for numbers |
| vitality | Nunito, Plus Jakarta Sans, Bricolage Grotesque, Instrument Serif |
| editorial | Playfair Display, Lora, Merriweather, Fraunces + Inter-like sans-serif |
| glass | Geist, SF Pro, Neue Haas Grotesk |
| signal | Geist Mono, IBM Plex Mono, system-ui |
IMPORTANT: If no direction is chosen and the user refuses to choose one, use Geist (modern neutral) but NEVER Inter/Roboto.
Colors — banish the generic
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.
- yesterday First seen · 159 lines · 45 tokens per session scan A 65b26ff42299
dev-frontend-design is a skill published in the GitHub repository christopherlouet/claude-base (5 stars, last pushed yesterday), licensed MIT. It adds 45 tokens to every session and 1,620 once invoked, about $0.0002 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-03.
Other skills, from other repositories
moai-ref-ui-polish
UI polish and interface-completion reference: the small visual details — concentric border radius, optical alignment, shadow-vs-border, motion easing, typography smoothing, tabular numbers, icon stroke weight, hit areas — that separate polished interfaces from generic ones. Agent-extending skill that amplifies…
ui-web
Web UI - glassmorphism, Tailwind, dark mode, accessibility.
vertical-site-conventions
Compose pages and sites that read as their vertical: ecommerce-catalog storefronts that look like storefronts, hospitality-food sites that look like restaurants, b2b-manufacturer sites that look industrial. Use this skill whenever the user wants to build a site that looks like the vertical it serves, fix a build that…
ring:validating-ux-completeness
Validating that UX specifications are complete before technical design: a read-only checklist over wireframes, states, responsive behavior, accessibility, and component-library alignment, emitting a DESIGN VALIDATED / NEEDS REVISION verdict to design-validation.md. Standalone utility — run after a product-designer…
frontend-design
Generates distinctive, production-grade frontend interfaces and artifacts (React, Vue, HTML/CSS). Prioritizes bold aesthetics, unique typography, and motion to avoid generic designs. Use when building websites, landing pages, dashboards, posters, or when the user requests to style, beautify, or create visually…
accessibility
Use when making a web UI conform to WCAG 2.2 Level AA — axe-core or Lighthouse a11y violations, keyboard operability, focus management, ARIA roles/names/live regions, contrast, tap-target size. NOT palette or visual intent (that is design), NOT test-runner setup (that is testing-web), NOT LCP/page-speed (that is…