Borrowing it
Nothing to install: this file belongs to abdullah1854/MCPGateway. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/abdullah1854/MCPGateway/main/.agents/skills/frontend-build/SKILL.mdgit clone --depth 1 https://github.com/abdullah1854/MCPGatewayWrote 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/abdullah1854/mcpgateway/frontend-build)<a href="https://agentmods.dev/skills/abdullah1854/mcpgateway/frontend-build"><img src="https://agentmods.dev/badge/skills/abdullah1854/mcpgateway/frontend-build.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.00054 | $0.03327 |
| Opus 5 | $0.00027 | $0.01664 |
| Sonnet 5 | $0.00011 | $0.00665 |
| Haiku 4.5 | $0.00005 | $0.00333 |
Grade A, and why
frontend-build 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 8d 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 — 434 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Build Protocol
When This Skill Activates
- "Build a component", "create UI", "design this"
- "Landing page", "dashboard", "form"
- "Make it responsive", "mobile-friendly"
- "Tailwind", "shadcn", "styling"
- "React", "Next.js", "frontend"
BEFORE WRITING CODE
Establish a bold aesthetic direction. Ask yourself:
- Purpose: What problem does this solve? Who uses it?
- Tone: Minimalist? Maximalist? Retro? Brutalist? Warm? Clinical?
- Differentiator: What ONE thing makes this memorable?
- Constraints: Technical limitations? Brand guidelines?
"A design with clear intent—whether maximalist or minimal—always beats scattered, unfocused choices."
Design Philosophy
The Core Principle
Distinctive, production-grade interfaces that avoid generic AI aesthetics.
Every design choice should be intentional:
- If it's minimal, it should feel deliberately restrained
- If it's bold, it should feel confidently expressive
- Never default to "safe" choices
Anti-Patterns (AI Slop to Avoid)
| DON'T | DO INSTEAD |
|---|---|
| Center everything | Asymmetric, purposeful alignment |
| Purple gradients everywhere | Restrained color with sharp accents |
| Uniform rounded-lg on all | Mix radiuses intentionally |
| Inter font (default) | System fonts or distinctive choices |
| Blue-500 for everything | Custom accent that fits context |
| Generic card grids | Varied, hierarchical layouts |
| Over-animated everything | Strategic motion for key moments |
| Predictable "hero → features → CTA" | Unexpected flow that serves content |
Typography That Elevates
Font Pairings (Non-Default)
/* Option 1: Modern Professional */
--font-heading: 'Satoshi', system-ui;
--font-body: 'Inter', system-ui;
/* Option 2: Editorial */
--font-heading: 'Playfair Display', Georgia;
--font-body: 'Source Sans 3', system-ui;
/* Option 3: Technical */
--font-heading: 'Space Grotesk', system-ui;
--font-body: 'IBM Plex Sans', system-ui;
/* Option 4: System (fast, still good) */
--font-heading: system-ui;
--font-body: system-ui;
What ships with it
2 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.
- 8d ago First seen · 434 lines · 54 tokens per session scan A 7ced0d63d057
frontend-build is a skill published in the GitHub repository abdullah1854/MCPGateway (15 stars, last pushed 2mo ago), licensed MIT. It adds 54 tokens to every session and 3,327 once invoked, about $0.0003 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
claude-design
Design one-off HTML artifacts (landing, deck, prototype).
sketch
Throwaway HTML mockups: 2-3 design variants to compare.
popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
impeccable
Frontend design guidance, upstream-maintained (impeccable).
html-artifacts
Author the HTML for a plan artifact, dashboard iframe, or Slack attachment — structure, design plan, available runtime, theming, and craft. Read this before writing HTML for saveplan, outputiframe, or slackattachhtml.
web-design
Penguin visual language for generated web pages and app UIs — GitHub-style simplicity with a single blue accent, light and pure-black dark themes, design tokens, component and chat-interface recipes, plus an opt-in warm paper editorial theme.