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
Theming -> Custom properties +
```
light-dark()
```
+
```
color-mix()
```
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

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:

```
references/web-performance.md
```
- Core Web Vitals, rendering, bundle optimization, caching, images, fonts
```
references/accessibility.md
```
- WCAG 2.2, semantic HTML, ARIA patterns, keyboard navigation, screen reader testing
```
references/modern-css.md
```
- Container queries, cascade layers, subgrid, :has()/:is(), view transitions
```
references/component-architecture.md
```
- Composition patterns, state management, render optimization, design systems
```
references/testing-strategy.md
```
- Testing trophy, integration tests, visual regression, a11y testing, mocking
```
references/code-quality.md
```
- Code review heuristics, refactoring signals, TypeScript patterns, security, linting

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:
npx skills add AbsolutelySkilled/AbsolutelySkilled --skill <name>
Skip entirely if
recommended_skills
is empty or all companions are already installed.

frontend-developer

NPX Install

Tags

SKILL.md Content