Senior frontend engineering expertise for building high-quality web interfaces. Use this skill when writing, reviewing, or optimizing frontend code - HTML, CSS, JavaScript, TypeScript, components, layouts, forms, or interactive UI. Triggers on web performance optimization (Core Web Vitals, bundle size, lazy loading), accessibility audits (WCAG, ARIA, keyboard navigation, screen readers), code quality reviews, component architecture decisions, testing strategy, and modern CSS patterns. Covers the full frontend spectrum from semantic markup to production performance.
Senior frontend engineering expertise for building high-quality web interfaces. Use this skill when writing, reviewing, or optimizing frontend code - HTML, CSS, JavaScript, TypeScript, components, layouts, forms, or interactive UI. Triggers on web performance optimization (Core Web Vitals, bundle size, lazy loading), accessibility audits (WCAG, ARIA, keyboard navigation, screen readers), code quality reviews, component architecture decisions, testing strategy, and modern CSS patterns. Covers the full frontend spectrum from semantic markup to production performance.
When this skill is activated, always start your first response with the 🧢 emoji.
Frontend Developer
A senior frontend engineering skill that encodes 20+ years of web development expertise
into actionable guidance. It covers the full spectrum of frontend work - from semantic
HTML and modern CSS to component architecture, performance optimization, accessibility,
and testing strategy. Framework-agnostic by design: the principles here apply whether
you're working with React, Vue, Svelte, vanilla JS, or whatever comes next. The web
platform is the foundation.
When to use this skill
Trigger this skill when the user:
Asks to build, review, or optimize frontend UI code (HTML, CSS, JS/TS)
Wants to improve web performance or Core Web Vitals scores
Needs an accessibility audit or WCAG compliance guidance
Is designing component architecture or deciding on state management
Asks about testing strategy for frontend code
Wants a code review with senior-level frontend feedback
Is working with modern CSS (container queries, cascade layers, subgrid)
Needs to optimize images, fonts, or bundle size
Do NOT trigger this skill for:
Backend-only code with no frontend implications
DevOps, CI/CD, or infrastructure work unrelated to frontend delivery
Key principles
The platform is your framework - Use native HTML elements, CSS features, and Web APIs before reaching for libraries. A <dialog> beats a custom modal. CSS :has() beats a JS parent selector. The browser is remarkably capable - lean on it.
Accessibility is not a feature, it's a baseline - Every element must be keyboard navigable. Every image needs alt text. Every form input needs a label. Every color combination must meet contrast ratios. Build accessible from the start - retrofitting is 10x harder.
Measure before you optimize - Never guess at performance. Use Lighthouse, the Performance API, and real user metrics (CrUX data). Optimize the actual bottleneck, not what you assume is slow. An unmeasured optimization is just code complexity.
Test behavior, not implementation - If a refactor breaks your tests but not your app, you have bad tests. Query by role, assert visible text, simulate real user actions. Tests should prove the product works, not that the code has a certain shape.
Simplicity scales, cleverness doesn't - Prefer 3 clear lines over 1 clever line. Prefer explicit over implicit. Prefer boring patterns over novel ones. The next developer to read your code (including future you) will thank you.
Core concepts
Frontend development sits at the intersection of three disciplines: engineering (code quality, architecture, testing), design (layout, interaction, visual fidelity), and user experience (performance, accessibility, resilience).
The mental model for good frontend work is layered:
Layer 1 - Markup (HTML): The semantic foundation. Choose elements for their meaning, not their appearance. Good HTML is accessible by default, works without CSS or JS, and communicates document structure to browsers, screen readers, and search engines.
Layer 2 - Presentation (CSS): Visual design expressed declaratively. Modern CSS handles responsive layouts, theming, animation, and complex selectors without JavaScript. Push as much visual logic into CSS as possible - it's faster, more maintainable, and progressive by nature.
Layer 3 - Behavior (JavaScript/TypeScript): Interactivity, state management, data fetching, and dynamic UI. This is the most expensive layer for users (parse + compile + execute), so minimize what you ship and maximize what the platform handles natively.
Layer 4 - Quality (Testing + Tooling): Automated verification that the other three layers work correctly. Tests, linting, type checking, and performance monitoring form the safety net that lets you ship with confidence.
Common tasks
1. Performance audit
Evaluate a page or component for performance issues. Start with measurable data, not hunches.
Checklist:
Run Lighthouse and note LCP (< 2.5s), INP (< 200ms), CLS (< 0.1)
Check the network waterfall for render-blocking resources
Audit bundle size - look for unused code, large dependencies, missing code splitting
Verify images use modern formats (AVIF/WebP), responsive srcset, and lazy loading
Check font loading strategy (font-display: swap, preloading, subsetting)
Look for layout shifts caused by unsized images, dynamic content, or web fonts
Load references/web-performance.md for deep technical guidance on each metric.
2. Accessibility audit
Evaluate code for WCAG 2.2 AA compliance. Automated tools catch ~30% of issues - manual review is essential.
Checklist:
Run axe-core or Lighthouse a11y audit for automated checks
Verify semantic HTML - are <nav>, <main>, <button>, <label> used correctly?
Tab through the entire UI - is every interactive element reachable and operable?
Check color contrast ratios (4.5:1 for normal text, 3:1 for large text)
Verify all images have meaningful alt text (or empty alt="" for decorative images)
Test with a screen reader - do announcements make sense?
Check that aria-live regions announce dynamic content updates
Verify forms have visible labels, error messages, and required field indicators
Load references/accessibility.md for ARIA patterns and screen reader testing procedures.
3. Code review (frontend-focused)
Review frontend code with a senior engineer's eye. Prioritize in this order:
Correctness - Does it work? Edge cases handled? Error states covered?
Accessibility - Can everyone use it? Semantic HTML? Keyboard works?
Performance - Will it be fast? Bundle impact? Render-blocking?
Readability - Can the team maintain it? Clear naming? Reasonable complexity?
Security - Any XSS vectors? innerHTML? User input rendered unsafely?
Load references/code-quality.md for detailed review heuristics and refactoring signals.
4. Component architecture design
Design component structure for a feature or page. Apply these heuristics:
Split when a component has more than one reason to change
Don't split just because a component is long - cohesion matters more than size
Prefer composition - pass children/slots instead of configuring via props
State belongs where it's used - lift only when shared, push down when not
Decision tree for state: Form input -> local state. Filter/sort -> URL params. Server data -> server state/cache. Theme/auth -> context/global.
Load references/component-architecture.md for composition patterns and state management guidance.
5. Writing modern CSS
Use the platform's full power before reaching for JS-based solutions.
Decision guide:
Layout -> CSS Grid (2D) or Flexbox (1D)
Responsive -> Container queries for component-level, media queries for page-level
Typography -> clamp() for fluid sizing, no breakpoints needed
Animation -> CSS transitions/animations first, JS only for complex orchestration
Specificity management -> @layer for ordering, :where() for zero-specificity resets
Load references/modern-css.md for container queries, cascade layers, subgrid, and new selectors.
6. Testing strategy
Design a test suite that catches bugs without slowing down development.
The frontend testing trophy (most value in the middle):
Static analysis (base): TypeScript + ESLint catch type errors and common bugs
Unit tests (small): Pure functions, utilities, data transformations
Integration tests (large - most value): Render a component, interact like a user, assert the result
E2E tests (top): Critical user flows only - signup, checkout, core workflows
Rules:
Query by role and name, not by test ID or CSS class
Assert what users see, not internal state
Mock the network (use MSW), not the components
If a test breaks on refactor but the app still works, delete the test
Load references/testing-strategy.md for mocking strategy, visual regression, and a11y testing.
7. Bundle optimization
Reduce what ships to the client.
Audit with source-map-explorer or webpack-bundle-analyzer
Replace large libraries with smaller alternatives (e.g., date-fns -> native Intl)
Use dynamic import() for routes and heavy components
Check for duplicate dependencies in the bundle
Ensure tree shaking works - use ESM, avoid side effects in modules
Set performance budgets: < 200KB JS (compressed) for most pages
8. Progressive enhancement
Build resilient UIs that work across conditions.
Core content and navigation must work without JavaScript
Use <form> with proper action - it works without JS by default
Add loading states, error states, and empty states for every async operation
Respect prefers-reduced-motion, prefers-color-scheme, and prefers-contrast
Handle offline gracefully where possible (service worker, optimistic UI)
Never assume fast network, powerful device, or latest browser
Anti-patterns / common mistakes
Mistake
Why it's wrong
What to do instead
Div soup
Loses all semantic meaning, breaks a11y, hurts SEO
Use <nav>, <main>, <article>, <button>, <section>
ARIA abuse
Adding role="button" to a <div> when <button> exists
Use native HTML elements first - they have built-in semantics, focus, and keyboard support
Performance theater
Lazy loading everything without measuring impact
Measure with Lighthouse/CrUX first, optimize the actual bottleneck
Testing implementation
Tests break on refactor, coupled to internal state
Test behavior - what the user sees and does, not how the code works
Premature abstraction
Shared component after 2 occurrences
Wait for the third use case, then extract with the real pattern visible
CSS avoidance
Runtime JS for styling that CSS handles natively
Modern CSS covers layout, theming, responsive design, and most animations
Ignoring the network
No loading/error states, assumes instant responses
Every async operation needs loading, error, and empty states
Bundle blindness
Never checking what ships to users
Audit bundle regularly, set performance budgets, check before adding deps
A11y as afterthought
Bolting on accessibility at the end
Build accessible from the start - semantic HTML, keyboard nav, ARIA where needed
Overengineering state
Global state for everything
Use local state by default, URL params for shareable state, server cache for API data
Emojis as UI icons
Render inconsistently across OS/browsers, unstyled, break a11y and theming
Use SVG icon libraries: Lucide React, React Icons, Heroicons, Phosphor, or Font Awesome
Gotchas
CSS class-based queries in tests break on refactor - Using getByClassName or querying by CSS selectors couples tests to implementation. When you rename a class, tests fail even though the UI still works. Always query by role, label, or visible text.
Third-party bundle size is invisible until it's catastrophic - Adding a dependency like moment.js or a UI component library can triple your bundle silently. Run source-map-explorer or webpack-bundle-analyzer before merging any PR that adds a new npm install.
ARIA roles on wrong elements break screen readers worse than no ARIA - Adding role="button" to a <div> makes screen readers announce "button" but keyboard users still can't Tab to it or activate it with Enter/Space. Use <button> or add both tabindex="0" and a keydown handler. Incomplete ARIA is worse than none.
CSS container queries require a containment context on the parent - A container query will silently never fire if the parent element doesn't have container-type set. Adding container-type: inline-size to the wrong ancestor (e.g., body) changes layout behavior unexpectedly. Always set the containment on the direct parent of the component.
Lazy loading below-the-fold images is fine; lazy loading LCP images kills performance - Adding loading="lazy" to every image is cargo-cult optimization. The Largest Contentful Paint image must load eagerly (or use fetchpriority="high"). Lazy-loading the LCP image can drop your LCP score by seconds.
References
For detailed guidance on specific topics, load the relevant reference file:
Only load a reference file when the current task requires that depth - they are detailed and will consume context.
Companion check
On first activation of this skill in a conversation: check which companion skills are installed by running ls ~/.claude/skills/ ~/.agent/skills/ ~/.agents/skills/ .claude/skills/ .agent/skills/ .agents/skills/ 2>/dev/null. Compare the results against the recommended_skills field in this file's frontmatter. For any that are missing, mention them once and offer to install:
