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/phuonghx/aim-cli/frontend-designnpx skills add phuonghx/aim-cli --skill frontend-designgit clone --depth 1 https://github.com/phuonghx/aim-cliWhat 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.00088 | $0.01953 |
| Opus 5 | $0.00044 | $0.00977 |
| Sonnet 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 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 — 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.
- yesterday 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 2mo ago), licensed MIT. It adds 88 tokens to every session and 1,953 once invoked, about $0.0004 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-08-31.
Other skills, from other repositories
mulch-record-from-evidence
Turn the evidence of a finished work session — git commits, changed files, recently-touched seeds issues — into well-formed ml record invocations. Use at session close, when an agent has made changes worth preserving as mulch expertise but hasn't yet recorded them.
memory-protocol
Universal protocol for total-agent-memory MCP server. Activate at session start, before any non-trivial task, after every significant action, on errors, and at session end. Relevant whenever the user mentions: memory, recall, past context, decisions history, conventions, lessons learned, "продолжаем", "сохранись"…
new-feedback
Log a harness lesson / post-incident so the SYSTEM improves, not just this one bug — fires on "log a harness lesson", "post-incident", "we should make this less likely", System-Evolution moments. Part of the Agentsmith harness; scaffolds a numbered docs/feedback/NNNN-.md with the five-stage template (R9 — numbers are…
memory
Activate this skill when starting a new session, beginning a new task, saving knowledge, recalling past decisions, or after completing significant work. Also activate on errors to log them for pattern analysis. Relevant when the user asks about memory, past context, lessons learned, decisions history, project…
contextstream-workflow
Manage persistent AI memory across sessions with ContextStream MCP.
postmortem-writing
Template and process for writing incident reports (IRs) with causal chain analysis, action items, and mandatory skill/checklist updates.