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/alebgl77/claude-inc/frontend-designnpx skills add alebgl77/claude-inc --skill frontend-designgit clone --depth 1 https://github.com/alebgl77/claude-incWrote 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/alebgl77/claude-inc/frontend-design)<a href="https://agentmods.dev/skills/alebgl77/claude-inc/frontend-design"><img src="https://agentmods.dev/badge/skills/alebgl77/claude-inc/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.1 | $0.00107 | $0.01166 |
| Opus 5 | $0.00053 | $0.00583 |
| Sonnet 5 | $0.00021 | $0.00233 |
| Haiku 4.5 | $0.00011 | $0.00117 |
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 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 — 91 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Design — Front of House
"Build front-end UIs"
When to use
- It is time to write real interface code — "build the landing page", "code this dashboard UI".
- An existing front-end looks generic — "this screams AI-generated, give it a point of view".
- A design system exists and needs its first consumer — pairs with
ui-ux-pro-maxtokens. - The user wants craft, not scaffolding — "make it feel expensive", "no template energy".
Workflow
- Commit to one art direction before writing a line. Editorial (serif display, generous whitespace, hairline rules), brutalist (raw borders, mono, hard shadows), soft-depth (layered surfaces, tinted shadows), retro-terminal (phosphor palette, restraint with the scanlines), industrial (dense, technical, visible grid) — or argue for another. Write the direction as one sentence; every later decision must serve it.
- Set the typographic reality. Two families max; display size at least 3x body — no 14/16/18 mush. Tighten letter-spacing on large sizes, widen it on small caps and labels. Load one hosted family at most; fall back to a deliberate system stack.
- Structure in semantic HTML first. Landmarks (header/nav/main/section/footer), heading
order without skips, buttons are
<button>, links are<a>, inputs have labels. No div soup. - Style with intent. Spacing on one scale, color through role variables, and exactly one signature move executed hard — an oversized numeral, an asymmetric grid, sticky marginalia, an unexpected hover. One. Not four.
- Craft the custom details.
::selectiontinted to the palette,:focus-visiblerings designed rather than default blue, cursor changes where they mean something, real empty and error states. - Wire interactions in vanilla JS — or the project's existing framework. Event delegation, no dependencies for what CSS already does.
- Run the anti-slop checklist below. Any hit is rework, not an excuse.
- Deliver one self-contained file (or components matching repo conventions) opening with a three-line comment: the art direction, its rules, its one signature move.
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 · 91 lines · 107 tokens per session scan A 9d2aad4d42b0
frontend-design is a skill published in the GitHub repository alebgl77/claude-inc (14 stars, last pushed 4d ago), licensed MIT. It adds 107 tokens to every session and 1,166 once invoked, about $0.0005 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-30.
Other skills, from other repositories
slide-deck
When you want to draft, update, convert, or export a slide deck for a React/Next.js slide system (${SLIDEDECKREPO:-$HOME/code/your-slide-deck-site}/src/app/slides/). Writes TypeScript Slide[] arrays using your primitives (Eyebrow, Heading, Accent, Body, BulletList, Divider, TwoCol, GradientText), 12 cycling brand…
knowledge-interaction-surfaces-terminal-ui
覆盖 Blade React + Ink TUI 的初始化、输入协议、消息与工具渲染、确认队列、Session 切换、流式缓冲和 Runtime 清理。进入时机：修改终端键盘行为、粘贴、Ctrl+C、审批与 问答、流式输出、Static 布局、会话恢复或 slash command 展示。 不包含：Headless/Print 输出（见 ../cli-bootstrap-headless-and-print/）、Web React 状态（见 ../web-client/）。 关键词：AppWrapper, BladeInterface, MessageArea, useCommandHandler, useAgent…
mcp-lark
Based on FeiShu(飞书) / Lark's OpenAPI MCP server, manage user information, chats, emails, cloud documents, multidimensional tables, tasks, calendars, etc.
deep-work
Activate when: user says 'I can never find time for focused work', 'I feel busy but produce nothing', 'I keep getting interrupted', 'I want to protect my focus time', 'flow state', 'deliberate practice', 'Cal Newport', or asks how to make progress on hard cognitive work (research, writing, engineering, strategy). Do…
dichotomy-of-control
Activate when: user says "I can't stop worrying about something I can't control," "I'm anxious about how this will turn out," "I keep replaying what went wrong," "I need them to change," "this uncertainty is paralyzing me," or is processing a setback, preparing for a high-stakes unknown outcome, or stuck in…
knowing-and-doing-as-one
Activate when: user says 'I know I should but I haven't', a team is stuck in analysis paralysis going in circles, you need to assess whether someone actually learned from a past experience, a strategy or lessons-learned doc has produced no operational change, or an organization keeps repeating the same mistake. Do NOT…