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.5 | $0.00013 | $0.00756 |
| Sonnet 5.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 1mo 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.
- 1mo 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 (20 stars, last pushed 5mo ago), licensed MIT. It adds 32 tokens to every session and 1,890 once invoked, about $0.0001 per session on Opus 5.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
release-notes
Write release notes for a tagged release — a business-impact summary of what changed for the user, plus a thanks section naming every contributor whose commits are in the release. Short by construction.
review-this-branch
Run the nohuman review gate (fresh-session adversarial reviewer + tamper guard) over the current branch or a GitHub pull request, with no server, no database, and no onboarding, and relay the pass/fail checklist.
file-a-task
File work into nohuman (taskadd) and check on it (taskstatus) via the nohuman MCP bridge, instead of doing the work inline.
iot-ai-minimum-change
Evidence-bound Build Necessity / Minimum Necessary Change specialist for MC-GPT. Use before implementation, dependency selection, architecture expansion, refactoring, installer creation, database/entity creation, agent/RAG creation, or when reviewing complexity and duplication. Select the first sufficient no-change…
iot-ai
Natural-language, conversation-aware closed-loop engineering through Tasks, Meetings, Multi-Coder, tests, repair, audit and terminal reporting.
iot-ai-web-visual-quality
Bounded visual-quality guidance for websites, dashboards, frontend UI, design systems and graphic prompts.