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 skills add notque/vexjoy-agent --skill distinctive-frontend-designgit clone --depth 1 https://github.com/notque/vexjoy-agentWrote 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/notque/vexjoy-agent/distinctive-frontend-design)<a href="https://agentmods.dev/skills/notque/vexjoy-agent/distinctive-frontend-design"><img src="https://agentmods.dev/badge/skills/notque/vexjoy-agent/distinctive-frontend-design/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/notque/vexjoy-agent/distinctive-frontend-design"><img src="https://agentmods.dev/badge/skills/notque/vexjoy-agent/distinctive-frontend-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00016 | $0.05066 |
| Opus 5 | $0.00008 | $0.02533 |
| Sonnet 5 | $0.00003 | $0.01013 |
| Haiku 4.5 | $0.00002 | $0.00507 |
Grade A, and why
distinctive-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 6d 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 — 296 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Distinctive Frontend Design Skill
Systematic aesthetic exploration that produces contextual, validated design specifications. Every design choice flows from project context -- purpose, audience, emotion -- not from defaults or convenience. The workflow enforces exploration before implementation: you cannot write CSS until you have a validated aesthetic direction, typography selection, color palette, animation strategy, and atmospheric background.
Optional capabilities (off unless explicitly enabled by the user): design system generation, full WCAG accessibility auditing, animation performance profiling, dark mode variant generation.
Reference Loading Table
| Signal | Load These Files | Why |
|---|---|---|
| adding motion: page load orchestration, state transitions, scroll reveals, easing | animation-patterns.md |
Loads detailed guidance from animation-patterns.md. |
| applying layout rules after Phase 1 surface-type classification (app vs landing) | app-vs-landing-rules.md |
Loads detailed guidance from app-vs-landing-rules.md. |
| building backgrounds: gradients, noise, geometric patterns, atmosphere | background-techniques.md |
Loads detailed guidance from background-techniques.md. |
| auditing CSS for banned fonts, hardcoded colors, over-animation | css-audit-patterns.md |
Loads detailed guidance from css-audit-patterns.md. |
| errors, error handling | error-handling.md |
Loads detailed guidance from error-handling.md. |
| brief-level walkthroughs: new landing page, app surface | examples.md |
Loads detailed guidance from examples.md. |
| game UI, AAA game, polished game, Steam game, roguelike UI, Slay the Spire | game-ui-polish.md |
Loads game-native polish rules that prevent website-like surfaces, excessive gradients, nested boxes, and fake-premium chrome. |
| starter code: design tokens, base styles, React/Tailwind and HTML templates | implementation-examples.md |
Loads detailed guidance from implementation-examples.md. |
| performance work | performance-budgets.md |
Loads detailed guidance from performance-budgets.md. |
| text animation, kinetic typography, roll text, slot machine, animated headline, rolling label, rolling counter | text-animation.md, then roll-text.md or text-animation-patterns.md per signal |
Loads text-animation domain skill and the matching pattern reference. |
| card effects, holographic, foil, shimmer, card glow, shader card, WebGL card, rarity effects, Balatro effect | webgl-card-effects.md, then card-shader-patterns.md or shader-integration-react.md or balatro-shader-breakdown.md per phase |
Loads card-effects domain skill and the matching shader reference. |
| HTML slides, browser presentation, web deck, reveal-style, viewport presentation, PPTX conversion, kiosk presentation | frontend-slides.md, then STYLE_PRESETS.md or slide-controller.md or pptx-conversion.md per phase |
Loads slides domain skill and the matching slides reference. |
| aesthetic direction examples and expanded phase steps | phase-details.md |
Loads detailed guidance from phase-details.md. |
| picking a page structure in Phase 1 | macrostructure-catalog.md |
Load only the single chosen macro:* entry by its heading anchor (e.g. #macrostat-led), never the whole file — one entry carries every rule the build needs. |
| before Phase 1: definitions of Hero, Full-bleed, Surface type, and other gating terms | vocabulary.md |
Loads detailed guidance from vocabulary.md. |
What ships with it
35 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- references/animation-patterns.md 11 KB
- references/app-vs-landing-rules.md 1.9 KB
- references/background-techniques.md 10 KB
- references/balatro-shader-breakdown.md 15 KB
- references/card-shader-patterns.md 11 KB
- references/color-inspirations.json 9.4 KB
- references/css-audit-patterns.md 10 KB
- references/error-handling.md 1.4 KB
- references/examples.md 1.4 KB
- references/font-catalog.json 8.4 KB
- references/frontend-slides.md 4.5 KB
- references/game-ui-polish.md 6.3 KB
- references/honest-placeholders.md 3.2 KB
- references/implementation-examples.md 7.7 KB
- references/js-controller-patterns.md 1.8 KB
- references/macrostructure-catalog.md 9.2 KB
- references/oklch-color-harmony.md 7.2 KB
- references/performance-budgets.md 11 KB
- references/phase-details.md 12 KB
- references/pptx-conversion.md 9.7 KB
- references/preferred-patterns.json 2.5 KB
- references/project-history.json 226 B
- references/roll-text.md 7.2 KB
- references/shader-integration-react.md 17 KB
- references/slide-controller.md 9.4 KB
- references/slide-layout-patterns.md 1.7 KB
- references/STYLE_PRESETS.md 2.4 KB
- references/text-animation-patterns.md 4.3 KB
- references/text-animation.md 2.8 KB
- references/vocabulary.md 1.7 KB
- references/webgl-card-effects.md 5.7 KB
- scripts/css_slop_rules.py 13 KB runs code
- scripts/tests/test_css_slop_rules.py 5.2 KB runs code
- scripts/tests/test_validate_design_macro.py 4.3 KB runs code
- scripts/validate_design.py 22 KB runs code
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.
- 6d ago First seen · 296 lines · 16 tokens per session scan A 321ee4007f10
distinctive-frontend-design is a skill published in the GitHub repository notque/vexjoy-agent (419 stars, last pushed today), licensed MIT. It adds 16 tokens to every session and 5,066 once invoked, about $0.0001 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
top-design
Create award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "Awwwards quality", "make my site stunning", "scroll animations", "parallax storytelling", "cinematic web design", "portfolio site", or "brand experience". Also trigger when elevating a standard…
web-typography
Select, pair, and implement typefaces for web projects. Use when the user mentions "font pairing", "which typeface", "line height", "responsive typography", "web font loading", "type hierarchy", "variable fonts", "FOUT/FOIT", "typographic scale", or "the text is hard to read". Also trigger when choosing between system…
refactoring-ui
Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent…
design-engineering
UI craftsmanship: animation rules, easing, micro-interactions, state polish. Triggers: animation, transition, ease-out, motion, micro-interaction, hover, loading state, UI polish.
web-animation-css-animations
CSS animation patterns - transitions, keyframes, scroll-driven timelines, @property, compositor-friendly properties, prefers-reduced-motion.
designsystem
Design system architecture. design tokens, theme systems, Figma to code, component API, Storybook, light/dark, versioning.