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 phuonghx/aim-cli --skill frontend-designgit clone --depth 1 https://github.com/phuonghx/aim-cliWrote 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/phuonghx/aim-cli/frontend-design)<a href="https://agentmods.dev/skills/phuonghx/aim-cli/frontend-design"><img src="https://agentmods.dev/badge/skills/phuonghx/aim-cli/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/phuonghx/aim-cli/frontend-design"><img src="https://agentmods.dev/badge/skills/phuonghx/aim-cli/frontend-design.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.00088 | $0.01953 |
| Opus 5.5 | $0.00035 | $0.00781 |
| Sonnet 5.5 | $0.00018 | $0.00391 |
| Haiku 4.5 | $0.00009 | $0.00195 |
Grade A, and why
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 1mo 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 — 144 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Design System
Premise: Nothing on the page is accidental. Space is a feature. Decisions trace back to the person using the product. Working rule: Reason it out, don't recite it. When in doubt, ask.
Read Files Deliberately
One file is mandatory; the rest are a reference shelf, pulled in only when the work calls for them.
| File | Priority | Open it for |
|---|---|---|
| ux-psychology.md | Read every time | The behavioral foundation behind all of this |
| color-system.md | As needed | Palette and color decisions |
| typography-system.md | As needed | Choosing and pairing type |
| visual-effects.md | As needed | Shadows, blur, gradients, glow |
| animation-guide.md | As needed | Interface motion |
| motion-graphics.md | As needed | Lottie, GSAP, SVG, 3D, particles |
| decision-trees.md | As needed | Context-driven starting points |
Audit Helpers
Run these against a project; they are tools, not reading material.
| Command | What it inspects |
|---|---|
python scripts/ux_audit.py <project_path> |
Broad sweep across UX, color, type, motion, and a11y heuristics |
python scripts/accessibility_checker.py <project_path> |
Targeted a11y checks: labels, ARIA, focus, contrast hints |
Resist the Reflex to Default
When a brief is loose, the easy move is to fall back on the same handful of "tasteful" choices. Don't.
If the brief leaves it open, ask: a color direction (cool / warm / neutral / bolder?), a style cue (pared-back / loud / retro / futuristic / organic?), a layout hint (single column / grid / asymmetric / edge-to-edge?).
| The reflex | The problem | The better question |
|---|---|---|
| Bento grid for everything | The house style of every AI mockup | Does this content actually want a grid? |
| Left-text / right-image hero | Seen a thousand times | What about oversized type, or a vertical scroll story? |
| Aurora / mesh gradient backdrop | The new lazy "wow" | What's a color pairing nobody expects here? |
| Frosted glass panels | A stand-in for "premium" | Would flat, high-contrast blocks read stronger? |
| Safe fintech blue | The escape hatch once purple was off-limits | Why not black, a deep red, an acid green? |
| "Orchestrate," "empower," "seamless" | Copy that smells generated | How would an actual person phrase this? |
| Dark canvas + neon glow | The signature "AI look" | What does the brand genuinely call for? |
| Everything rounded | Soft by default, not by intent | Where would a hard, squared edge hit harder? |
What ships with it
9 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.
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.
- 1mo ago First seen · 144 lines · 88 tokens per session scan A e813d95f268f
frontend-design is a skill published in the GitHub repository phuonghx/aim-cli (1 stars, last pushed 3mo ago), licensed MIT. It adds 88 tokens to every session and 1,953 once invoked, about $0.0004 per session on Opus 5.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-08-31.
Other skills, from other repositories
design-critique
Use this skill to audit an interface that already exists and say precisely why it looks generated, templated, or unfinished — a scored rubric across composition, typography, color, states, accessibility and copy, ending in a ranked fix list. Triggers: user says "review the design", "critique this UI", "why does this…
design-craft
Design or substantially improve user-facing interfaces with a product-specific visual direction, content hierarchy, and rendered critique. Use for new screens, landing pages, redesigns, typography/layout work, or UI that feels generic or AI-generated. For small fixes, preserve the existing design without starting a…
pptx
Author and design high-impact PowerPoint presentations (.pptx) with modern 16:9 layouts, strong typographic hierarchy, visual cards, and zero wall-of-bullet-point slides. Use when creating pitch decks, technical briefings, executive presentations, or keynote slide decks.
theme-factory
Apply curated, professional font pairings, chromatic palettes, and design themes to slide decks, web artifacts, landing pages, and documentation. Use when establishing a distinct visual identity, selecting cohesive color palettes, or applying thematic styling across user-facing artifacts.
conversational-ux
Design voice and conversational interfaces — dialog flows, error recovery, and persona. Use when the interface speaks and listens rather than being tapped. For graphical input collection, use form-design.
platform-conventions
Design to iOS and Android conventions — what each OS mandates, where they diverge, and when to unify. Use when shipping native apps. For breakpoint adaptation use responsive-design; for matching competitor patterns use jakobs-law (interaction-design).