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 subhansh-dev/agent-maxxing --skill 04-frontend-masterygit clone --depth 1 https://github.com/subhansh-dev/agent-maxxingWrote 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/subhansh-dev/agent-maxxing/04-frontend-mastery)<a href="https://agentmods.dev/skills/subhansh-dev/agent-maxxing/04-frontend-mastery"><img src="https://agentmods.dev/badge/skills/subhansh-dev/agent-maxxing/04-frontend-mastery/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/subhansh-dev/agent-maxxing/04-frontend-mastery"><img src="https://agentmods.dev/badge/skills/subhansh-dev/agent-maxxing/04-frontend-mastery.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.00030 | $0.01378 |
| Opus 5 | $0.00015 | $0.00689 |
| Sonnet 5 | $0.00006 | $0.00276 |
| Haiku 4.5 | $0.00003 | $0.00138 |
Grade A, and why
frontend-mastery 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 5d 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 — 106 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Mastery — Design & UI Patterns
Extracted from Codex GPT-5.5 (11,104 lines) and Claude Design (9,199 lines).
Build with Empathy
- If working with an existing design or given a design framework in context, pay careful attention to existing conventions and ensure consistency.
- Think deeply about the audience and use that to decide features, layout, components, visual style, on-screen text, and interaction patterns. Using your application should feel rich and sophisticated.
- Tailor the frontend design for the domain: SaaS/CRM tools should feel quiet, utilitarian, and work-focused. Games can be more illustrative, expressive, animated, and playful.
- Common workflows should be ergonomic and efficient, yet comprehensive.
Design Instructions
- Use icons in buttons for tools, swatches for color, segmented controls for modes, toggles/checkboxes for binary settings, sliders/steppers/inputs for numeric values, menus for option sets, tabs for views.
- Do not use rounded rectangular UI elements with text inside if you could use a familiar symbol or icon instead. Build tooltips for unfamiliar icons.
- Use lucide icons inside buttons whenever one exists. If a library is enabled in an existing application, use icons from that library.
- Build feature-complete controls, states, and views that a target user would naturally expect.
- Do not use visible, in-app text to describe the application's features, functionality, keyboard shortcuts, styling, or how to use the application.
- Should not make a landing page unless absolutely required; build the actual usable experience as the first screen.
Hero Pages
- When making a hero page, use a relevant image, generated bitmap image, or immersive full-bleed interactive scene as the background with text over it that is not in a card.
- Never use a split text/media layout where a card is one side and text is on another side.
- Never put hero text or the primary experience in a card.
- Never use a gradient/SVG hero page.
- Do not create an SVG hero illustration when a real or generated image can carry the subject.
- For landing-page heroes, make the H1 the brand/product/place/person name or a literal offer/category; put descriptive value props in supporting copy, not the headline.
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.
- 5d ago First seen · 106 lines · 30 tokens per session scan A 84817141e0d0
frontend-mastery is a skill published in the GitHub repository subhansh-dev/agent-maxxing (2 stars, last pushed 1mo ago), licensed MIT. It adds 30 tokens to every session and 1,378 once invoked, about $0.0002 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-09-03.
Other skills, from other repositories
frontend-design
Produce intentional, responsive, accessible UI work and perform visual QA instead of generic component assembly.
frame-build-minimal
Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.
frontend-design
A design and coding guide for building distinctive web interfaces, including pages, dashboards, landing pages, and reusable components.
component-design
Apply a coherent visual system, responsive behavior, interaction states, and accessibility to Kun components.
uicraft
Create, improve, audit, and polish distinctive production-grade web interfaces, including marketing/landing pages and personal portfolio sites. Use for UI or frontend design, responsive layouts, typography, color, motion, UX copy, accessibility, performance, design-system alignment, onboarding, edge cases, or visual…
design-system-starter
Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.