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:

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)

Bundle Size Guidelines

❌ Anti-Patterns to Avoid

Accessibility Quick Rules

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 <label>?
• 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 <label> 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:

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.