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 namanmehta96/ultra-frontend-skill --skill ultra-frontendgit clone --depth 1 https://github.com/namanmehta96/ultra-frontend-skillWrote 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/namanmehta96/ultra-frontend-skill/ultra-frontend)<a href="https://agentmods.dev/skills/namanmehta96/ultra-frontend-skill/ultra-frontend"><img src="https://agentmods.dev/badge/skills/namanmehta96/ultra-frontend-skill/ultra-frontend/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/namanmehta96/ultra-frontend-skill/ultra-frontend"><img src="https://agentmods.dev/badge/skills/namanmehta96/ultra-frontend-skill/ultra-frontend.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.00136 | $0.04731 |
| Opus 5 | $0.00068 | $0.02365 |
| Sonnet 5 | $0.00027 | $0.00946 |
| Haiku 4.5 | $0.00014 | $0.00473 |
Grade A, and why
ultra-frontend 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 11d 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 — 377 lines — stays where its author put it; the contents beside it link to each section on GitHub.
ultra-frontend — Claude Code Edition
The definitive frontend skill. Synthesizes what would take 6 separate skills to cover:
- ultra-frontend — design system, animations, GSAP, Three.js
- uiuxpromax — 50+ styles, UX rules, accessibility, chart types, multi-stack
- superdesign.dev — aesthetic archetypes, design tokens, signature effects
- frontend-design — anti-slop philosophy, bold direction, typography
- framer-motion — full React animation cookbook
- 21st.dev patterns — shadcn/ui component library patterns
Reference files (Claude Code reads these on demand):
references/aesthetics.md— 10 archetypes, CSS tokens, font loading, superdesign.dev systemreferences/gsap.md— full GSAP plugin cookbook (SplitText, Flip, ScrollSmoother, DrawSVG, MorphSVG, Observer, ScrambleText, CustomEase, matchMedia)references/components.md— React/JSX boilerplate, framer-motion patterns, Three.js, 21st.dev componentsreferences/uiux-rules.md— uiuxpromax: 10-priority UX rules, accessibility, multi-stack guidelinesreferences/component-library.md— 21st.dev deep library: dock, command menu, spotlight, marquee, timeline, accordion
Scripts (executable — run via bash):
scripts/scaffold.sh <name> <stack>— scaffold a new project (html/react/next/vue)scripts/design-system.py <keywords>— generate a complete design system from keywordsscripts/audit.py <file>— audit HTML/JSX for UX, a11y, and performance issues
STEP 0 — Before writing any code
- Read context → choose aesthetic (table below, full tokens in
references/aesthetics.md) - Choose stack (html / react / next / vue / svelte)
- Run scaffold if starting a new project:
bash scripts/scaffold.sh <project-name> <stack> - Generate design system if complex:
python3 scripts/design-system.py "<keywords>" - Pick the signature moment (Section 5) — the one thing people will remember
1. Aesthetic → Context Mapping
| Context | Aesthetic |
|---|---|
| AI tool, fintech, dev tool, startup, "futuristic" | Futurist Dark |
| Agency, portfolio, "editorial", "bold", architecture | Brutalist Editorial |
| Luxury, invite-only, fashion, premium | Cinematic Luxury |
| B2B SaaS, infrastructure, "technical" | Technical Blueprint |
| AI startup, premium SaaS, "glassmorphism" | Glassmorphic SaaS |
| Wellness, lifestyle, "soft", journal | Soft Gen-Z |
| Developer tool, extension, "system" | DevTools Chrome |
| Creative agency, art, "wild" | Maximalist Chaos |
| Luxury brand, minimal portfolio | Refined Minimal |
| Music, gaming, "retro", 80s/90s | Retro-Futuristic |
What ships with it
8 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.
- 11d ago First seen · 377 lines · 136 tokens per session scan A 2b354fda667c
ultra-frontend is a skill published in the GitHub repository namanmehta96/ultra-frontend-skill (2 stars, last pushed 1mo ago), licensed MIT. It adds 136 tokens to every session and 4,731 once invoked, about $0.0007 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
cinematic-scroll
Design and build cinematic websites, 3D websites, interactive portfolios and product landing pages with scroll-driven storytelling, parallax, text animation and optional Three.js/WebGL scenes. Use for new experiences, motion improvements, scroll audits and storyboards in standalone HTML or an existing app. Includes…
cinematic-scroll
Design and build cinematic websites, 3D websites, interactive portfolios and product landing pages with scroll-driven storytelling, parallax, text animation and optional Three.js/WebGL scenes. Use for new experiences, motion improvements, scroll audits and storyboards in standalone HTML or an existing app. Includes…
motion
Build animation that feels alive — and watch it before shipping. Production recipes for interface motion (modals, drawers, toasts, tabs, lists, drag, tickers), view transitions (route changes, shared elements, scroll reveals), and procedural motion (particles, screen shake, hit-stop, springs, ambient fields), plus…
animation-system-architect
Design performant animation systems with Framer Motion, GSAP, View Transitions API, and spring physics. Activate on: page transitions, micro-interactions, scroll animations, layout animations, spring physics. NOT for: CSS-only hover effects (use css-in-js-architect), video/canvas rendering (use creative-coding-expert).
ui-styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns…
impeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states.…