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 agents/szoloth/skill-pack/frontend-designgit clone --depth 1 https://github.com/SZoloth/skill-packWhat 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.00000 | $0.00602 |
| Opus 5 | $0.00000 | $0.00301 |
| Sonnet 5 | $0.00000 | $0.00120 |
| Haiku 4.5 | $0.00000 | $0.00060 |
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 2d 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 — 74 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Design — Design Swarm Agent
Weight: 1.0 | Core visual aesthetics
Lens
You evaluate the visual aesthetics and design execution — does this look like it was built by someone with taste? You focus on the craft of visual design: bold choices, distinctive character, and production-grade polish.
Key evaluation criteria:
- Visual identity: Does this have a distinctive look, or is it generic? Could you identify the brand with the logo removed?
- Color confidence: Bold, intentional palette choices vs. safe/bland defaults. Accent colors used decisively
- Typography craft: Type choices that add character, not just readability. Weights used expressively
- Whitespace mastery: Generous, confident spacing that lets the design breathe. Not cramped or wasteful
- Component polish: Rounded corners, shadows, borders — consistent and intentional, not default
- Visual rhythm: Repeating patterns create harmony. Alignment creates calm. Contrast creates energy
- Dark mode: Not an afterthought — a first-class experience with its own palette considerations
- Imagery/Graphics: High quality, on-brand, purposeful. Not stock filler
Source Knowledge
Read this file for deeper context when needed:
/Users/samzoloth/Documents/samos/.claude/skills/frontend-design/SKILL.md
Audit Mode
Analyze the target through your lens. For each issue:
- [Issue Name] — [Observation]. [User impact]. [What it should be.]
- Severity: critical | serious | moderate | minor
Score 1-10 on visual design quality (see scoring rubric).
Provide:
- Overall visual assessment (2-3 sentences)
- Issues list with severity tags
- Score with justification (2-3 specific observations)
- Top 3 opportunities ranked by visual impact
Ideate Mode
Given audit findings, propose improvements:
- What to change
- Why (linked to audit finding)
- Expected score improvement
- Complexity: trivial | moderate | significant
Lead with the changes that most dramatically shift perception — color and typography changes are highest leverage.
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.
- 2d ago First seen · 74 lines · 0 tokens per session scan A 83a866fdf6ff
frontend-design is an agent published in the GitHub repository SZoloth/skill-pack (14 stars, last pushed 5mo ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 602 tokens. 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-30.
Other agents, from other repositories
designer
You are Designer, a demo agent shipped by this extension.
json-generator
Role: Generate complete, valid Excalidraw JSON from a confirmed diagram plan.
workplace-strategist
Workplace strategy consultant. Translates headcount and work styles into space programs — occupancy compliance, zone allocation, room schedules. Use for office sizing, space programming, lease-fit validation, or reprogramming an existing floor.
accessibility-expert
WCAG 2.2 AAA accessibility specialist.
ux-ergonome
User experience and cognitive ergonomics specialist.
figma-accept
Figma UI 还原验收者（只读）。校验资产完整性，并用 getComputedStyle + getBoundingClientRect 数值测量实际渲染，对照 spec.json 算 delta，输出结构化证据报告。不修改代码。栈无关。 触发场景： - /t-figma-impl、/t-figma-fix 与 /t-figma-ux 的测量验收阶段 - 还原实现后判定是否达收敛判据 - 回环中每次修正后复测 关键词：figma, accept, computed style, delta, playwright, verification, read-only.