Frontend Developer

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) | 4s | | INP (Interaction to Next Paint) | 500ms | | CLS (Cumulative Layout Shift) | 0.25 | | FCP (First Contentful Paint) | 3s | | TTFB (Time to First Byte) | 1.8s |

---

Bundle Size Guidelines

| Bundle | Target | Action needed | |--------|--------|---------------| | Main JS (gzipped) | 400KB: audit imports, code-split | | Per-route chunk | 100KB: lazy load heavy deps | | CSS (gzipped) | 100KB: purge unused styles | | Images (hero) | ; it's free keyboard support | | Index as list key in dynamic lists | Reorder causes state and animation bugs | Unique stable ID from data | | Images without alt or explicit dimensions | Screen reader fail + CLS score hit | alt always; width/height or aspect-ratio always | | for interactive elements | Not focusable, not semantic, no ARIA | Use , , or explicit role + tabIndex | | Sequential await for independent fetches | Each waits on the previous (waterfall) | Promise.all([fetchA(), fetchB()]) | | Barrel exports in app code (index.ts) | Defeats tree-shaking, slow cold start | Import directly from the source file | | Import entire library for one function | Bundle bloat (e.g., import _ from 'lodash') | Named import or specific entry (lodash/debounce`) | | Client fetch where SSR/SSG would work | Slower FCP, worse SEO | Server-render or static-generate whenever possible |

---

Accessibility Quick Rules

| Rule | Detail | |------|--------| | Color contrast (normal text) | ≥ 4.5:1 against background (WCAG AA) | | Color contrast (large text, ≥18pt) | ≥ 3:1 against background | | Touch / click target size | ≥ 44×44px (WCAG 2.5.5, Level AAA) | | Focus indicator | Must be visible; outline: none without replacement is a violation | | Form inputs | Must have ` (associated via for/id or wrapping) | | Images | Decorative → alt="", informative → descriptive alt` | | Interactive elements order | DOM order must match visual order for keyboard users |

---

Questions You Always Ask

When planning UI:

• What's the loading state? The error state? The empty state?
• Is this accessible to keyboard and screen reader users?
• What does this look like at 375px? At 1440px?
• Is this content crawlable by search engines (SSR or SSG)?

When reviewing components:

• Does this cause layout shift (CLS)? Are image dimensions declared?
• Can a user complete this entire flow using only the keyboard?
• Is every form input associated with a visible ``?
• What's the bundle size delta from this new dependency?

---

Red Flags in Code Review

Must fix:

• [ ] No loading/error/empty states for async data
• [ ] Interactive elements unreachable by keyboard
• [ ] Images without alt text or explicit dimensions (CLS risk)
• [ ] Form inputs without associated `` elements
• [ ] Color contrast below 4.5:1 for body text

Should fix:

• [ ] Missing unique identifiers for list items
• [ ] Large dependencies added without bundle size justification
• [ ] Client-side fetch where server-rendering would work
• [ ] outline: none without visible focus replacement

---

Performance Debugging Checklist

Slow initial load  → Check bundle size, server render, remove unused deps
Layout shift (CLS) → Set image dimensions, avoid injecting content above fold
Janky interaction  → Use CSS transforms, avoid forced layout (getBoundingClientRect in loops)
Too many re-renders → React DevTools Profiler → memo, useMemo, useCallback
Slow data fetch    → Parallel with Promise.all(), SWR/React Query for cache
Large images       → WebP format, srcset for responsive, lazy loading

---

Platform References

When this skill is invoked, detect the project's framework and read the matching reference file(s) from references/ before proceeding:

| Stack indicator | Reference file | |-----------------------------------------|---------------------------------| | next.config.js/ts or react in deps | references/react-nextjs.md | | nuxt.config.ts or vue in deps | references/vue-nuxt.md | | svelte.config.js or svelte in deps | references/svelte-sveltekit.md| | No framework deps / plain HTML | references/vanilla.md |

If the stack is unclear, ask the user which framework they're using.

Granular Rules (React)

For React/Next.js projects, references/react-rules/ contains 66 individual rule files from Vercel's agent-skills. Each rule covers one specific pattern with incorrect/correct code examples.

Read references/react-rules/_sections.md for the full index organized by priority (CRITICAL → LOW). Reference individual rules when working on specific areas (waterfalls, bundle size, re-renders, SSR, etc.).

Granular Rules (Vue)

For Vue/Nuxt projects, references/vue-rules/ contains 44 individual rule files from antfu/skills (sourced from vuejs-ai/skills), organized into three sub-directories:

• best-practices/ — Components, reactivity, composables, performance (22 files)
• router/ — Vue Router guards, navigation, lifecycle gotchas (8 files)
• testing/ — Vitest, composable testing, Pinia setup, async patterns (11 files)

Read the _index.md in each sub-directory for an overview.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: bonnguyenitc
• Source: bonnguyenitc/antigravity-superpowers
• License: MIT
• Homepage: https://www.npmjs.com/package/agy-superpowers

Install and usage instructions live in the source repository linked above.