frontend-developer

Use when building React, Next.js, or Vue web applications, implementing component architectures, managing client-side state, optimizing Core Web Vitals, or ensuring WCAG 2.2 AA accessibility compliance. Handles SSR/SSG patterns, CSS architecture at scale, bundle optimization, and frontend testing from unit to E2E. Do NOT use for backend API development, DevOps infrastructure, mobile development, or database schema design.

インストールへ移動

リポジトリ: zeroes-ones/Skills
ソースの最終更新活動: 2026年8月30日 23:12
検出された SKILL.md の言語: 英語
スター: 1
フォーク: 0

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。

npx skills add https://github.com/zeroes-ones/Skills --skill frontend-developer

コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。

ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。

ソースファイルを確認

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

ファイルエクスプローラー

15 ファイル

SKILL.md

ソースの指示 · 読み取り専用プレビュー

検索に戻るインストールに戻る

using-agent-skills

Meta-router — an ASCII decision tree mapping user task types to specific skills. Use when you don't know which skill to invoke; when choosing between candidate skills; when designing multi-skill workflows; or when discovering what skills exist. Handles category-based routing (strategy, product, design, architecture, development, quality, devops, security, data, AI, maintenance, meta), skill chaining vs. single-skill decisions, and library discovery. Do NOT use for executing tasks — route to the identified skill immediately after discovery.

2026-08-30

writing-great-skills

Use when writing a new skill for an AI agent (Claude Code, Copilot CLI, Cursor, Codex, Gemini CLI); when editing or improving an existing skill; when a skill produces inconsistent results; when designing the invocation pattern for a skill; when setting token budgets and chain configurations; or when testing skill routing across consumer agents. Handles skill structure (YAML frontmatter, invocation, decision tree, body, routing), trigger design (unique phrases, avoiding false positives, Trigger vs context), decision tree construction (MECE, fail-safe fallback, 3-Option Rule), token budget calibration, and cross-agent testing (Claude Code, Copilot CLI, Cursor, Codex, Gemini CLI). Do NOT use for skill content authoring (use appropriate domain skill), agent runtime evaluation (use agent-eval-pipeline), cross-agent packaging (use cross-agent-skills-packaging), or agent config (use customize-cloud-agent).

2026-08-30

context-compaction-strategies

Manage token budgets, progressive disclosure, context window optimization, summarization strategies, dual-representation compilation (human-readable vs agent-optimized), structured context pruning, attention budget allocation, context retention policies across multi-turn conversations, state ledger design, and working memory vs long-term context separation. Use when maximizing agent performance under context window constraints, designing token-efficient skill instructions, implementing progressive disclosure pipelines, or optimizing multi-turn agent conversations. Handles token budget analysis, context pruning rules, summarization quality validation, and dual-representation compilation. Do NOT use for general text summarization, document compression for human readers, or optimizing non-AI text processing.

2026-08-30

このリポジトリのすべてを見る

Frontend Developer

Portability target: Spec-level (runs on Claude Code, Copilot, Gemini CLI, Codex, Cursor). No vendor-specific frontmatter fields.

RESEARCH_PREREQUISITE — Execute Before Any Output

This is a HARD GATE. Do not produce ANY output, code, strategy, design, or recommendation without completing this research.

Before you act, you MUST execute every applicable research step. Research-before-acting is the difference between professional work and amateur guessing:

Research Step

Why It Matters

Where to Look

RP1

Verify domain currency. Check for breaking changes, deprecations, new standards, or version shifts since the knowledge cutoff.

[STALE_RISK] Outdated advice breaks real systems. API deprecations, framework version bumps, and security advisory changes happen continuously. Outputting based on stale knowledge damages credibility and produces broken results.

Official docs, changelogs, GitHub releases, RFC tracker

RP2

Audit the system or codebase. Read relevant files. Understand existing patterns, constraints, and architecture before proposing changes.

[CONTEXT_VIOLATION] Solutions that ignore existing patterns create technical debt. A change that contradicts the established architecture is worse than no change — it introduces inconsistency that compounds over time.

Project files, configs, dependency manifests, existing tests

RP3

Cross-reference claims against authoritative sources. Every factual assertion needs a verifiable source. Mark each: [VERIFIED], [COMPUTED], or [ESTIMATED].

[HALLUCINATION_GUARD] Claims without sources are indistinguishable from hallucinations. The #1 cause of incorrect output is treating assumptions as facts. Source tagging prevents this.

Official documentation, peer-reviewed papers, RFCs, specifications

RP4

Identify known failure modes. Before recommending, list what commonly breaks. For each failure mode: trigger condition, detection signal, and mitigation.

[FAILURE_BLINDNESS] Every domain has known failure patterns. Output that doesn't address them is dangerously incomplete. If you cannot name 3+ failure modes for your recommendation, you don't understand it well enough to recommend it.

Domain post-mortems, incident reports, antipattern catalogs, error databases

Frontend Developer

Portability target: Spec-level (runs on Claude Code, Copilot, Gemini CLI, Codex, Cursor). No vendor-specific frontmatter fields.

RESEARCH_PREREQUISITE — Execute Before Any Output

This is a HARD GATE. Do not produce ANY output, code, strategy, design, or recommendation without completing this research.

Before you act, you MUST execute every applicable research step. Research-before-acting is the difference between professional work and amateur guessing:

Research Step

Why It Matters

Where to Look

RP1

Verify domain currency. Check for breaking changes, deprecations, new standards, or version shifts since the knowledge cutoff.

Official docs, changelogs, GitHub releases, RFC tracker

RP2

Audit the system or codebase. Read relevant files. Understand existing patterns, constraints, and architecture before proposing changes.

Project files, configs, dependency manifests, existing tests

RP3

Cross-reference claims against authoritative sources. Every factual assertion needs a verifiable source. Mark each: [VERIFIED], [COMPUTED], or [ESTIMATED].

[HALLUCINATION_GUARD] Claims without sources are indistinguishable from hallucinations. The #1 cause of incorrect output is treating assumptions as facts. Source tagging prevents this.

Official documentation, peer-reviewed papers, RFCs, specifications

RP4

Identify known failure modes. Before recommending, list what commonly breaks. For each failure mode: trigger condition, detection signal, and mitigation.

Domain post-mortems, incident reports, antipattern catalogs, error databases

Negative Constraint

Mechanical Trigger

Violation Response

REFUSE useState + useEffect for server data fetching

Trigger: User proposes or code uses useState paired with useEffect to fetch, cache, or synchronize server state

STOP. Respond: "This pattern causes stale data, race conditions on rapid re-renders, and unnecessary network requests. Use TanStack Query (React), SWR, or RTK Query — server state belongs in a dedicated cache with automatic invalidation, not in component-local useState/useEffect."

REFUSE building without design specs, API contract, or browser matrix

Trigger: User requests a component or feature without providing at least one of: design specifications, API response shape, or target browser/device matrix

STOP. Respond: "I need the design specifications, API contract (endpoints and response shapes), or target browser matrix before building. Building without these guarantees rework. Provide what you have — even a rough sketch — and I'll proceed."

DETECT missing WCAG 2.2 AA coverage in generated markup

Trigger: Generated HTML/JSX uses <div onClick> for buttons, omits aria-label on icon-only controls, lacks focus management in modals/dropdowns, or uses color-only indicators without text alternatives

STOP. Respond: "This component fails WCAG 2.2 AA: [specific violation]. Required: semantic HTML (<button> not <div>), keyboard reachability (Tab/Enter/Escape), focus trap in modals, aria-label on icon-only controls, and 4.5:1 color contrast. Fix these before proceeding — accessibility is not a separate task."

REFUSE performance optimization without measurement

Trigger: User proposes code splitting, virtualization, memoization, or caching optimizations without linking to a Lighthouse CI report or Core Web Vitals measurement (LCP/INP/CLS) showing the failing metric

STOP. Respond: "Optimize from measurements, not intuition. Run Lighthouse CI (target: LCP < 2.5s, INP < 200ms, CLS < 0.1) and identify the specific failing metric. Show me the bottleneck, and I'll address it surgically instead of guessing."

REFUSE shipping without real-device verification plan

Trigger: User asks to finalize or ship UI work citing only Chrome DevTools device emulation as testing evidence

STOP. Respond: "Chrome DevTools device mode is not a real device — it does not replicate touch event behavior, Safari rendering quirks, iOS viewport resizing, or low-memory constraints. Testing must cover: (1) physical low-end Android, (2) physical Safari iOS, (3) keyboard-only navigation, (4) screen reader pass (VoiceOver + NVDA). Confirm your testing plan before we ship."

DETECT security-sensitive logic placed client-side

Trigger: Generated code places authentication gate decisions, authorization role checks, input sanitization as sole defense, or secret keys/tokens in client-side JavaScript

STOP. Respond: "This logic is client-side but must execute server-side: [specific code location]. The client is attacker-controlled territory — any check there is a UX convenience, not a security boundary. Move auth decisions, validation authority, and secrets to the backend."

ANCHOR to runtime versions before generating framework-specific code. Never generate React/Next.js/Vue/Nuxt/Svelte API calls from training data alone — your training data may be stale and framework APIs change between major versions.

Trigger: skill receives code-generation task involving framework-specific APIs → run scripts/runtime-version-detect.sh [project-root] --skill-context to detect installed framework versions → if detection succeeds, anchor all API calls to detected versions → if detection fails, request version info from user

STOP. Respond: "Detected: {framework}@{version}. Anchoring all API calls to v{version}. I will add // VERIFY: comments on any API call where the detected version is newer than my training cutoff. See scripts/references/source-of-truth-anchoring.md for the full anti-hallucination pattern."

RUN the ROI Gate before any non-emergency code change. Every code change that is not (a) a security fix, (b) a compliance requirement, or (c) an active production incident must pass scripts/roi-gate.sh. If the gate returns negative, refuse to write the code.

Trigger: skill receives a code-generation or refactoring task that is NOT a security fix, compliance requirement, or production incident → estimate implementation cost in engineer-hours → compare against annual value of the change → if cost > value, gate fails

STOP. Respond: "ROI Gate analysis: This change costs approximately $[X] to implement but saves $[Y]/year. Payback period: [N] years. If payback > 2 years, I recommend declining this work. See scripts/roi-gate.sh for the full formula."

Symptom

First Action

If That Fails

Last Resort

Tool/command not found

Check installation: which [tool] or [tool] --version. Install via package manager (brew install, npm install -g, pip install)

Check PATH: echo $PATH. Verify the tool binary is in a PATH directory. Symlink or update PATH if installed but unreachable

Use a functionally equivalent alternative tool. If rg is unavailable, use grep -r. If gh is unavailable, use git directly or the GitHub API via curl

Permission denied

Check ownership: ls -la [path]. Fix with chmod or sudo if appropriate. For API errors (401/403), verify credentials haven't expired: echo $TOKEN or check ~/.netrc

Refresh credentials: re-authenticate with the service. For file permissions, check if the file is locked by another process: lsof [path]

Request elevated permissions or use a different authentication method (token vs password, SSH key vs HTTPS)

Command hangs or times out

Kill the process: Ctrl+C. Re-run with a timeout: timeout 30 [command] or gtimeout on macOS. Check system resources: top, df -h, netstat -an

Add verbose/debug flags: --verbose, --debug, -v. Check logs: tail -f [logfile]. Reduce scope: process fewer files, query a smaller time range, limit concurrency

Split the work into smaller batches. Implement a retry loop with exponential backoff (1s, 2s, 4s, 8s). If the issue is network-related, add --retry 3 or equivalent

Unexpected output or error message

Read the error message completely — the solution is often in the last 3 lines. Search the exact error: grep -r "[error text]" in the repo to find prior occurrences

Check GitHub issues for the tool: gh issue list --repo owner/repo --search "[error keyword]". Check Stack Overflow

Simplify the approach. If the complex one-liner fails, break it into 3 sequential commands. If the specialized tool fails, use a more basic tool with more steps

Data integrity concern (wrong output, silent failure)

Verify with a manual check: compare output against a known-correct baseline. Add assertions: `[command]

grep -q "[expected]" && echo "OK"

Trigger

Action

Why

Lighthouse Performance score drops below 90 on a PR that "just added a new library for date formatting"

Run bundle analyzer (@next/bundle-analyzer) on the PR: identify the new dependency's contribution. If >50KB gzipped, find a lighter tree-shakeable alternative or dynamically import. Flag the PR — bundle budgets must be enforced in CI

Unvetted dependencies accumulate silently. One "small utility library" at 80KB gzipped can push your LCP from green to red on mobile 3G. Each dependency is a permanent tax on every user's first load

User reports "blank white screen" after navigating between routes — no error visible in console

Check if error boundaries exist at the route AND feature level. If not, wrap every route segment in a React error boundary with a graceful fallback UI. Log the component stack to Sentry/Datadog. Test by intentionally throwing in a child component

A single unhandled error in one widget should never take down the entire page. Error boundaries contain blast radius; without them, any component crash = white screen of death for the whole SPA

Design review catches a hardcoded color (#3B82F6) in a component — the design system defines this as primary-500

Replace all hardcoded values with design tokens from tailwind.config.ts. Add a grep-based CI check (or ESLint rule) to reject hex/rgb/rgba values in component files. Run a one-time audit of the entire codebase for hardcoded values

Hardcoded values mean a brand color change requires find-and-replace across 200 files instead of one config edit. Design tokens are the single source of truth — diverging from them guarantees visual inconsistency

Bundle analysis reveals moment.js (72KB gzipped) in the main chunk — used for a single format() call

Replace with date-fns (import only the format function, ~3KB) or Intl.DateTimeFormat (native, zero bytes). Add a CI allowlist/blocklist for known-heavy dependencies. Audit all existing imports for bundle bloat

moment.js is a known bundle killer — it imports all locales and is not tree-shakeable. Tree-shakeable alternatives let you pay only for what you use. One moment import can double your route's JS budget

TypeScript component props defined as { data?: T, isLoading: boolean, error?: Error } — TypeScript allows { isLoading: false, error: null, data: undefined }

Refactor to a discriminated union: { status: 'loading' } | { status: 'success', data: T } | { status: 'error', error: E }. TypeScript's exhaustiveness checking then guarantees every render path handles all states

Impossible states make impossible bugs. A discriminated union guarantees exactly one valid state at compile time. The original type allows the "impossible" state where loading is done, there's no error, but there's also no data — and that's exactly where rendering crashes

useEffect with setInterval but no cleanup function — component mounts/unmounts on each navigation, accumulating duplicate intervals

Add a cleanup function: useEffect(() => { const id = setInterval(poll, 5000); return () => clearInterval(id); }, []). Use a useRef to track mounted state. Enable React strict mode in development to double-invoke effects

Every subscription (setInterval, addEventListener, WebSocket) in an effect needs cleanup. Memory leaks in SPAs are invisible until the app crashes after 20+ navigations. Strict mode surfaces missing cleanups in dev

Lighthouse Accessibility score drops below 95 — new component uses <div onClick={handler}> instead of a native interactive element

Replace with <button onClick={handler}> or <a href={url}>. Native elements handle keyboard focus, Enter/Space activation, screen reader announcements, and form submission out of the box. Add axe-core to CI with a zero-violation policy

<div onClick> is invisible to screen readers and impossible to reach via keyboard alone. Semantic HTML before ARIA — native elements provide behavior that ARIA roles only describe (you'd need 6+ additional handlers to replicate <button> behavior)

"Why is this product page loading 2.3MB?" — all product images are original-resolution 4000x3000 PNGs served at full size, scaled down via CSS

Implement next/image or Nuxt Image with: automatic WebP/AVIF conversion, responsive sizes attribute, lazy loading below the fold, and explicit width/height to prevent CLS. Preload the LCP (hero) image with fetchpriority="high". Audit all <img> tags

Unoptimized images are the #1 cause of poor LCP scores. A 2MB hero image displayed at 400px wide is 95% wasted bytes. Image optimization tooling is free in modern frameworks — not using it costs real users 2-5 seconds on every page load

Symptom

Root Cause

Fix

Lesson

React component re-renders infinitely — browser tab freezes within seconds

useEffect dependency array includes an object/array created inline on every render. Reference identity changes every render cycle: useEffect(() => {...}, [{ id: 1 }]) — each render creates a new object literal

Use primitive values in dependency arrays: useEffect(() => {...}, [obj.id, obj.name]) not useEffect(() => {...}, [obj]). Wrap stable objects in useMemo. Use useRef for values that shouldn't trigger re-renders

Objects in dependency arrays are compared by reference, not value. Every render creates a new reference → infinite loop. This is the #1 performance bug in every React codebase

useEffect captures stale state — callback references a variable that was current 3 renders ago

Closure captures the value at the time useEffect was scheduled, not when it executes. If the effect depends on state that changes between schedule and execution, it operates on phantom data

Use the functional updater form: setCount(prev => prev + 1) instead of setCount(count + 1). Use useRef for mutable values that effects need to read without depending on. Add exhaustive-deps lint rule

Closures capture values by reference for objects, by value for primitives. useEffect closures are frozen at creation time — the stale closure problem is a fundamental consequence of how JavaScript closures work

Server-rendered HTML doesn't match client render — React throws hydration mismatch error, page flashes and re-renders

Server renders different output than client. Common causes: Date.now() returns different values, typeof window !== 'undefined' branches differently, or data fetched during SSR differs from client-side data

Guard all browser-only code with useEffect (which only runs on client). Use suppressHydrationWarning only for intentional mismatches like timestamps. Fetch data via getServerSideProps and pass as props — don't fetch again on client

Hydration is a reconciliation, not a replacement. React expects the DOM to be identical. Any mismatch forces a full client re-render that defeats the purpose of SSR

Bundle contains entire library — importing lodash adds 72KB, but only _.get is used. Lighthouse flags excessive JavaScript

Default imports pull in the entire module. import _ from 'lodash' imports all 300+ functions. Tree-shaking can't eliminate because CommonJS modules have side effects

Use named imports: import get from 'lodash/get'. Configure moduleResolution: 'bundler' in tsconfig. Use bundle-analyzer to visualize what's in your bundle. Set bundle size budgets in CI

Tree-shaking is not magic — it can only eliminate dead code in ES modules without side effects. One default import from a CommonJS package adds 72KB to every page load

CSS specificity war — adding !important to fix one style breaks three other components. Nobody can predict which style wins

Component styles compete in a global namespace. A deeply nested selector in one component overrides a simple class in another. !important escalates the war — the next developer needs !important to override your !important

Use CSS Modules (*.module.css) or CSS-in-JS for component-scoped styles. Use design tokens for shared values. Never use !important except to override third-party styles. Set selector-max-specificity lint rule to "0,4,0"

Global CSS is shared mutable state. Every style rule you write can be overridden by any other file in the codebase. Component-scoped styles eliminate the specificity arms race

Async useEffect sets state after component unmounts — Warning: Can't perform a React state update on an unmounted component

useEffect fires an async fetch, user navigates away before it resolves, setData() is called on an unmounted component. Memory leak: the promise holds a reference to the component's closure

Use AbortController: const controller = new AbortController(); fetch(url, { signal: controller.signal }); return () => controller.abort(). Or use a mounted ref: if (!isMountedRef.current) return before setData(). Prefer React Query/TanStack Query which handles this automatically

Every async operation in a component is a potential memory leak. The component lifecycle and the promise lifecycle are independent — navigation can destroy the component while the promise is still in-flight

Loop	When It Fires	What Re-research Validates
Loop 0: Pre-Action	Before producing ANY output, code, strategy, or recommendation	Domain currency, codebase audit, source verification, failure modes, quantified impact, side effects, quality gates, limitations
Loop 1: Mid-Action	At every adjustment, phase transition, scale-out, or significant state change	Has the context changed? Are the original assumptions still valid? Has new information invalidated the Loop 0 conclusions?
Loop 2: Pre-Exit	Before closing, handing off, escalating, or declaring completion	Is the deliverable complete by the quality gates defined in RP7? Are all limitations declared (RP8)? Have failure modes been addressed (RP4)?
Loop 3: Post-Action	After completion: compare expected vs. actual outcome	What was the efficiency ratio (actual / theoretical max)? What learnings emerged? What should be fed back into the pattern database for future decisions?

Rationalization	Reality
"I'll add accessibility after we ship — it's just aria-labels, how hard can it be?"	Retrofitting WCAG 2.2 AA onto a finished UI costs 3-5× more than building accessibly from the start. Every `<div onClick>` you ship today is a lawsuit risk and a rebuild tomorrow. Accessibility is not a feature — it's the floor.
"It works fine on my MacBook Pro — users have fast internet too."	Your median user is on a 3-year-old Android phone with 4GB RAM on spotty 4G. Desktop Chrome DevTools lie. Your 100 Lighthouse score on desktop means nothing when mobile users get 12-second loads and bounce.
"useState + useEffect for data fetching is simpler — TanStack Query is overkill for this."	This pattern causes stale data, race conditions on rapid re-renders, and duplicate network requests. One `useEffect` fetching bug in production costs hours of debugging. Server state belongs in a dedicated cache — every time you skip it, you're writing bugs you'll fix later.
"I'll optimize performance after we launch — premature optimization is the root of all evil."	Performance is architecture, not polish. A page with 3-second LCP loses 32% of users before it even renders. You can't bolt Core Web Vitals onto a finished app — you'll be rewriting components, not tweaking CSS.
"Security checks on the client are fine — nobody's going to hack our little app."	The client is attacker-controlled territory. Every auth gate, role check, and input sanitizer you put in client-side JS can be deleted with devtools in 3 seconds. Client-side security is a UX convenience, never a boundary. Your "nobody would bother" threshold is wrong — bots scan indiscriminately.

#	Condition	Action
A1	`file_contains("package.json", "\"react\"\|\"vue\"\|\"next\"\|\"nuxt\"\|\"svelte\"")` OR `file_exists("src/components/")` OR `file_exists("pages/")`	This is your skill. Jump to Core Workflow — Phase 1.
A2	`file_contains("package.json", "\"express\"\|\"fastify\"\|\"@nestjs/core\"")` OR `file_exists("go.mod")` OR `file_contains("requirements.txt", "fastapi\|flask\|django")`	Invoke backend-developer instead. This is backend work, not frontend.
A3	`file_exists("openapi.yaml\|openapi.json\|swagger.json")` AND `file_contains("*.yaml", "paths:\|/api/")`	Invoke api-designer instead. This is API contract work.
A4	`file_contains("", "axe-core\|pa11y\|eslint-plugin-jsx-a11y")` AND `file_contains("", "aria-\|role=\|WCAG")`	Invoke accessibility-testing instead. This is a11y testing work.
A5	`file_exists("jest.config.\|vitest.config.\|playwright.config.")` AND `file_contains(".test.\|.spec.*", "describe\|it\|test(")`	Invoke qa-engineer instead. This is test strategy work.
A6	`file_contains("", "i18n\|i18next\|react-intl\|formatjs\|next-intl")` OR `file_contains("", "locale\|locales\|translations\|[\"']en[\"']")`	Invoke localization-engineer instead. This is i18n work.
A7	`file_contains(".tsx\|.jsx", "lazy\|Suspense\|dynamic(")` OR `file_contains("package.json", "\"@next/bundle-analyzer\"\|\"webpack-bundle-analyzer\"")`	Jump to Decision Trees — Performance & Bundle Splitting.
A8	`file_contains(".css\|.scss", "@media\|breakpoint\|responsive")` OR `file_exists("tailwind.config.*")`	Jump to Decision Trees — CSS & Styling Strategy.

Bias	How It Manifests	Antidote
Shiny framework syndrome	Rewriting in the newest framework before measuring if the current one is the bottleneck	Framework migrations cost 3-6 months. A new framework must be 2× better, not just newer.
Premature component splitting	Extracting every UI element into a reusable component before the pattern repeats 3 times	Don't abstract until you see the same pattern in 3 different places. One occurrence is an implementation; two is a coincidence; three is a pattern.
Lighthouse blindness	Shipping with 100 Lighthouse scores on desktop while mobile users experience 12-second loads	Test on emulated Moto G4 with 4G throttling. Desktop Lighthouse scores are vanity; mobile scores are reality.

Level	Frontend Output Characteristics
L1 — Apprentice	Step-by-step component implementation with explanations. Safe defaults, accessibility basics covered. "Here's the component, here's why we use flexbox here."
L2 — Practitioner	Production-ready component with all states (loading, empty, error, edge cases), tests, and accessibility. Independent delivery.
L3 — Senior	Component architecture design with trade-off analysis. State management strategy. Performance and bundle-size optimization. Decision rationale included.
L4 — Staff	Design system patterns, shared component library standards, SSR/SSG strategy for the org. "This is how all our apps should handle routing/data fetching/state."
L5 — Principal	Novel frontend patterns or tools adopted across the industry. Framework-level contributions. "Here's a new rendering strategy for this class of interaction."

name	frontend-developer
description	Use when building React, Next.js, or Vue web applications, implementing component architectures, managing client-side state, optimizing Core Web Vitals, or ensuring WCAG 2.2 AA accessibility compliance. Handles SSR/SSG patterns, CSS architecture at scale, bundle optimization, and frontend testing from unit to E2E. Do NOT use for backend API development, DevOps infrastructure, mobile development, or database schema design.
author	Sandeep Kumar Penchala
license	MIT
type	development
status	stable
version	1.1.0
updated	2026-07-23T00:00:00.000Z
tags	["react","nextjs","vue","typescript","tailwind","ssr","web-vitals","accessibility"]
token_budget	4000
chain	{"consumes_from":["accessibility-auditor","accessibility-testing","algorithmic-trader","api-designer","backend-developer","brand-guidelines","code-reviewer","feature-flag-architect","idea-to-spec","llm-engineer","localization-engineer","monorepo-manager","platform-engineer","qa-engineer","staff-engineer","tdd-guide","ui-ux-designer","ux-researcher","ux-writer"],"feeds_into":["accessibility-auditor","code-reviewer","devrel-advocate","fullstack-developer","growth-engineer","localization-engineer","qa-engineer","react-native-developer","seo-specialist","tdd-guide","translation-manager"]}

Criterion	Next.js App Router	Remix/React Router v7	Astro	Vite SPA	Nuxt (Vue)
Initial JS (KB, gzipped)	85-120 (RSC)	70-100	5-30 (islands)	150-250	70-110
LCP potential (static)	< 1.0s	< 1.0s	< 0.5s	1.5-3.0s	< 1.0s
Build speed (100 pages)	45-90s	30-60s	15-30s	5-15s	30-60s
Learning curve	Steep (RSC model)	Moderate	Gentle	Gentle

Upstream Skill	What You Receive	When to Involve
`api-designer`	OpenAPI 3.1 spec, type-safe SDK, error response formats, pagination conventions	Before building any API-consuming component; ensures contract alignment
`ui-ux-designer`	Design system, wireframes, mockups, interaction patterns, responsive breakpoints	Before implementing any UI component; design-to-code handoff
`backend-developer`	API implementation, type definitions, validation schemas, auth token patterns	Before integrating with backend APIs; ensures data shapes match
`ux-researcher`	User personas, accessibility requirements, behavior flows, usability test results	Before making UX decisions that impact diverse user groups

Downstream Skill	What You Provide	Impact of Delay
`fullstack-developer`	Component APIs, server action signatures, shared type packages, middleware behavior	Fullstack can't wire frontend to backend without component contracts
`qa-engineer`	Test IDs (data-testid), critical user paths, edge case states (loading/error/empty), accessibility test cases	QA can't author E2E tests without UI implementation
`accessibility-auditor`	WCAG 2.2 AA implementation, semantic HTML, ARIA labels, keyboard navigation, focus management	Auditor can only report issues without source to verify fixes
`seo-specialist`	SSR/SSG strategy, meta tags, structured data, hreflang implementation, Core Web Vitals	SEO recommendations can't be implemented without frontend capability

Trigger	Notify	Why
API contract breaking change needed	Backend, Fullstack, Mobile	Coordinate deprecation timeline; version API or migrate consumers
Design system token change	UI/UX Designer, Mobile	Consistent visual language across platforms
Core Web Vitals regression detected	Observability, Backend (if API latency is cause)	Joint investigation — is it frontend bundle, API response, or rendering?
Bundle size spike (>20%)	All developers	Identify cause — unoptimized dependency, duplicate import, missing tree shaking
New third-party script/service added	Security Reviewer, Observability	CSP update, performance impact assessment, PII exposure review

Step	Skill	What it produces
Before	ui-ux-designer	Design system, wireframes, mockups, interaction patterns
This	frontend-developer	React/Next.js/Vue implementation, state management, performance optimization, a11y compliance
After	code-reviewer	Reviews component architecture, state management choices, performance, accessibility

Skill Level	Practice	Frequency	Expected Result
Novice → Competent	Rebuild a UI from Dribbble/UIFry using only HTML/CSS — no JS, no framework. Must work at 320px and 1920px	Weekly	Internalizes layout algorithms, responsive patterns, and CSS capabilities without framework crutches
Competent → Expert	Audit a popular website's accessibility: navigate it with keyboard only, then with VoiceOver. Document every failure	Monthly	Develops a11y intuition — can spot focus trap, missing label, color-only indicator from a screenshot
Expert → Master	Contribute a bug fix to React, Next.js, or a major component library. Read the source of a framework you use daily	Quarterly	Understands the framework's internals — makes better design decisions because they know what happens under the hood

Gotcha	Cost	Fix
Default-importing `lodash` — one `import _ from 'lodash'` adds 72KB to every page, LCP degrades by 500ms	$15K-$40K in Core Web Vitals regressions and conversion drops	Named imports: `import get from 'lodash/get'`. Use `bundle-analyzer` in CI. Set bundle size budgets. Tree-shaking can't eliminate CommonJS side effects.
`useEffect` async fetch without cleanup — memory leak warning, component unmounts before promise resolves	$10K-$25K in debugging memory leaks and flaky tests	Use `AbortController`: `fetch(url, { signal: controller.signal }); return () => controller.abort()`. Or use TanStack Query which handles cleanup automatically.
CSS specificity war — one `!important` cascades into 20 more `!important` declarations across the codebase	$10K-$30K in CSS maintenance debt and visual regression bugs	Use CSS Modules or CSS-in-JS for component-scoped styles. Use design tokens for shared values. Set `selector-max-specificity` lint rule. Ban `!important` except for third-party style overrides.
Skipping `<ErrorBoundary>` at route level — one uncaught exception crashes the entire React tree to a white screen	$20K-$50K in production incidents and user churn	Wrap every route in `<ErrorBoundary fallback={...}>`. Log boundary errors to observability. Test by deliberately throwing in child components. The fallback UI must render, not the error overlay.
Using `<div onclick>` instead of `<button>` — keyboard navigation broken, screen readers skip the element, form behavior fails	$8K-$20K in accessibility remediation and potential ADA lawsuits	Use semantic HTML first: `<button>` for actions, `<nav>` for navigation, `<main>` for content. WCAG 2.2 AA compliance starts with correct element choice, not ARIA patching bad markup.

frontend-developer

ソース情報

インストール方法

ソースファイルを確認

このリポジトリの他の Skills