Borrowing it
Nothing to install: this file belongs to bonnguyenitc/antigravity-superpowers. 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/bonnguyenitc/antigravity-superpowers/main/.agent/skills/frontend-developer/SKILL.mdgit clone --depth 1 https://github.com/bonnguyenitc/antigravity-superpowersWrote 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/bonnguyenitc/antigravity-superpowers/frontend-developer)<a href="https://agentmods.dev/skills/bonnguyenitc/antigravity-superpowers/frontend-developer"><img src="https://agentmods.dev/badge/skills/bonnguyenitc/antigravity-superpowers/frontend-developer/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/bonnguyenitc/antigravity-superpowers/frontend-developer"><img src="https://agentmods.dev/badge/skills/bonnguyenitc/antigravity-superpowers/frontend-developer.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.00032 | $0.01890 |
| Opus 5 | $0.00016 | $0.00945 |
| Sonnet 5 | $0.00006 | $0.00378 |
| Haiku 4.5 | $0.00003 | $0.00189 |
Grade A, and why
frontend-developer 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 — 173 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Developer Lens
Philosophy: Component-first. User-perception-first. Accessibility is not optional. Performance is felt by users, not measured in isolation.
⚠️ ASK BEFORE ASSUMING
If the stack is unspecified, DO NOT default to Create React App. Ask:
| What | Why it matters |
|---|---|
| Framework? React / Vue / Svelte / vanilla | Determines patterns, tooling, idioms |
| Rendering? CSR / SSR / SSG / ISR | SEO and performance strategy |
| Design system? Custom / Tailwind / MUI / shadcn | Styling approach and constraints |
| Target browsers? Modern / IE support? | Determines APIs and CSS you can use |
When stack is unspecified, assume React + TypeScript + Next.js (App Router).
Core Instincts
- User perception is reality — loading states, micro-animations, and feedback loops matter as much as the happy path
- Accessibility is load-bearing — keyboard nav, screen readers, and contrast ratios affect real users
- Render cost is real — unnecessary re-renders degrade UX; measure before optimizing
- Web Vitals are felt — LCP, CLS, INP directly impact user satisfaction and SEO
- Mobile is primary — design mobile-first; test at real viewport sizes on real devices
Web Vitals Thresholds (Google Standard)
| Metric | Good | Needs Improvement | Poor |
|---|---|---|---|
| LCP (Largest Contentful Paint) | < 2.5s | 2.5–4s | > 4s |
| INP (Interaction to Next Paint) | < 200ms | 200–500ms | > 500ms |
| CLS (Cumulative Layout Shift) | < 0.1 | 0.1–0.25 | > 0.25 |
| FCP (First Contentful Paint) | < 1.8s | 1.8–3s | > 3s |
| TTFB (Time to First Byte) | < 800ms | 800ms–1.8s | > 1.8s |
Bundle Size Guidelines
| Bundle | Target | Action needed |
|---|---|---|
| Main JS (gzipped) | < 200KB | > 400KB: audit imports, code-split |
| Per-route chunk | < 50KB | > 100KB: lazy load heavy deps |
| CSS (gzipped) | < 50KB | > 100KB: purge unused styles |
| Images (hero) | < 200KB | Use next/image or WebP + lazy load |
What ships with it
60 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.
- references/react-nextjs.md 14 KB
- references/react-rules/_sections.md 1.5 KB
- references/react-rules/_template.md 631 B
- references/react-rules/advanced-event-handler-refs.md 1.4 KB
- references/react-rules/advanced-init-once.md 958 B
- references/react-rules/advanced-use-latest.md 1.0 KB
- references/react-rules/async-api-routes.md 1.1 KB
- references/react-rules/async-defer-await.md 2.0 KB
- references/react-rules/async-dependencies.md 1.3 KB
- references/react-rules/async-parallel.md 654 B
- references/react-rules/async-suspense-boundaries.md 2.5 KB
- references/react-rules/bundle-barrel-imports.md 2.3 KB
- references/react-rules/bundle-conditional.md 949 B
- references/react-rules/bundle-defer-third-party.md 920 B
- references/react-rules/bundle-dynamic-imports.md 791 B
- references/react-rules/bundle-preload.md 1.1 KB
- references/react-rules/client-event-listeners.md 1.9 KB
- references/react-rules/client-localstorage-schema.md 1.9 KB
- references/react-rules/client-passive-event-listeners.md 1.6 KB
- references/react-rules/client-swr-dedup.md 1.1 KB
- references/react-rules/js-batch-dom-css.md 3.2 KB
- references/react-rules/js-cache-function-results.md 1.9 KB
- references/react-rules/js-cache-property-access.md 532 B
- references/react-rules/js-cache-storage.md 1.6 KB
- references/react-rules/js-combine-iterations.md 753 B
- references/react-rules/js-early-exit.md 1.1 KB
- references/react-rules/js-flatmap-filter.md 1.4 KB
- references/react-rules/js-hoist-regexp.md 1.0 KB
- references/react-rules/js-index-maps.md 837 B
- references/react-rules/js-length-check-first.md 1.7 KB
- references/react-rules/js-min-max-loop.md 2.2 KB
- references/react-rules/js-set-map-lookups.md 532 B
- references/react-rules/js-tosorted-immutable.md 1.7 KB
- references/react-rules/rendering-activity.md 564 B
- references/react-rules/rendering-animate-svg-wrapper.md 1.2 KB
- references/react-rules/rendering-conditional-render.md 980 B
- references/react-rules/rendering-content-visibility.md 815 B
- references/react-rules/rendering-hoist-jsx.md 1.0 KB
- references/react-rules/rendering-hydration-no-flicker.md 2.3 KB
- references/react-rules/rendering-hydration-suppress-warning.md 872 B
- references/react-rules/rendering-resource-hints.md 2.5 KB
- references/react-rules/rendering-script-defer-async.md 1.8 KB
- references/react-rules/rendering-svg-precision.md 588 B
- references/react-rules/rendering-usetransition-loading.md 2.0 KB
- references/react-rules/rerender-defer-reads.md 973 B
- references/react-rules/rerender-dependencies.md 824 B
- references/react-rules/rerender-derived-state-no-effect.md 1.2 KB
- references/react-rules/rerender-derived-state.md 728 B
- references/react-rules/rerender-functional-setstate.md 2.9 KB
- references/react-rules/rerender-lazy-state-init.md 2.0 KB
- references/react-rules/rerender-memo-with-default-value.md 1.1 KB
- references/react-rules/rerender-memo.md 1.1 KB
- references/react-rules/rerender-move-effect-to-event.md 1.2 KB
- references/react-rules/rerender-no-inline-components.md 2.1 KB
- references/react-rules/rerender-simple-expression-in-memo.md 1018 B
- references/react-rules/rerender-split-combined-hooks.md 1.8 KB
- references/react-rules/rerender-transitions.md 1.0 KB
- references/react-rules/rerender-use-deferred-value.md 1.8 KB
- references/react-rules/rerender-use-ref-transient-values.md 1.7 KB
- references/react-rules/server-after-nonblocking.md 2.0 KB
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 · 173 lines · 32 tokens per session scan A 4f2da9ec42ba
frontend-developer is a skill published in the GitHub repository bonnguyenitc/antigravity-superpowers (19 stars, last pushed 4mo ago), licensed MIT. It adds 32 tokens to every session and 1,890 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-08-30.
Other skills, from other repositories
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…
accessibility-i18n
A guide for building accessible and multilingual software. Accessibility means making interfaces usable with tools such as keyboards and screen readers; internationalisation prepares them for different languages, regions, and writing directions.
frontend-architecture
A frontend architecture guide for pages, components, state, data fetching, asynchronous caching, server rendering, runtime settings, translation, server-sent events, performance, accessibility, and validation. Server rendering means preparing page content on the server before the browser displays it.
design-system-architecture
A guide for turning a brand’s visual rules into a reusable design system. Design tokens are shared values such as colours, spacing, and font sizes; components are reusable interface building blocks.
codeck
Route explicit requests from a host coding agent to one or more locally configured AI executors through Codeck, attach Markdown or other project files, moderate cross-model consultation, expose disagreements, and synthesize traceable results. Use when the user explicitly names Codeck or asks to consult, compare, or…
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI).…