skills.rest
nagisanzenin
nagisanzeninCOMMUNITY
Explore all skills by this author →
GitHub

frontend-engineer

Builds React/Next.js frontends with design systems, typed API clients, and accessibility testing.

176|49|Updated Mar 4, 2026
Search Tags:#accessibility#frontend#react#openapi#design system#next.js#playwright
One-click install
npx skills add https://github.com/nagisanzenin/production-grade --skill frontend-engineer-nagisanzenin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/nagisanzenin/production-grade/tree/main/skills/frontend-engineer
Command: npx skills add https://github.com/nagisanzenin/production-grade --skill frontend-engineer-nagisanzenin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a production web frontend from requirements involves dozens of coordinated decisions — framework selection, design tokens, component architecture, API integration, accessibility, and testing — that are easy to get wrong or leave incomplete, resulting in dead buttons, broken navigation, and untested pages. ## Core Features & Use Cases - Phased frontend construction: Six sequential phases covering UI/UX analysis, design system foundations, component library (primitives, layout, features), pages with routing and auth guards, design polish with domain research, and testing with accessibility audits. - Typed API client generation: Generates TypeScript types, Zod schemas, and React Query hooks directly from OpenAPI specs so frontend types never drift from the backend contract. - Functional verification loop: Enforces a dead-element scan, navigation graph check, and click-by-click interaction traces so every button, link, and form actually works before design polish begins. - Use Case: Given a BRD with user stories and OpenAPI specs, produce a complete Next.js app with a Tailwind design system, dark mode, role-based routing, Storybook docs, Playwright e2e tests, and a WCAG 2.1 AA accessibility audit. ## Quick Start Ask the agent to build the frontend for your product from the BRD user stories and the OpenAPI specs in the project, choosing a visual style when prompted.

Frequently Asked Questions about frontend-engineer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a typed API client from OpenAPI specs for React?▼

The skill reads OpenAPI 3.1 YAML specs and generates TypeScript request/response types, Zod validation schemas, endpoint constants, and React Query hooks per resource. This keeps frontend types synchronized with the backend contract instead of hand-written interfaces that drift.

What state management should I use with Next.js and React Query?▼

The recommended stack is React Query for all server state (caching, refetching, optimistic updates) plus Zustand for client-only state like UI toggles, theme, and form drafts. This separation avoids putting server data into client stores.

Does this frontend workflow support Vue or Svelte instead of React?▼

Yes. Framework selection happens in Phase 1 and supports Next.js, Nuxt 3/Vue 3, and SvelteKit, with matching state management options like Pinia for Vue. In Express mode it auto-selects Next.js; in brownfield mode it matches the existing stack.

How are dead buttons and broken links detected in generated frontends?▼

A functional verification pass traces every interactive element: buttons must have working onClick handlers, links must resolve to real routes, and forms must submit to APIs. It also verifies the navigation graph and walks the top five user flows click-by-click before design polish begins.

What accessibility standards does the component testing enforce?▼

Testing targets WCAG 2.1 AA with zero critical violations, using jest-axe in every component test, @axe-core/playwright full-page audits, and eslint-plugin-jsx-a11y at error level in CI. Manual checks cover keyboard navigation, focus trapping, and screen reader labels.

When should auth tokens use httpOnly cookies instead of localStorage?▼

SSR applications should store tokens in httpOnly cookies because localStorage is vulnerable to XSS attacks, while cookies gain CSRF protection via SameSite attributes. The skill's auth implementation follows this pattern with automatic token refresh and middleware-based route guards.

Related Skills

Explore More Software Engineering Skills→
bacocobacoco
67

bmad-story-planning

Generate developer-ready user stories with acceptance criteria from epics and architecture decisions.

Community
Advanced
mf-dynatracemf-dynatrace

dt-obs-frontends

Monitor and analyze web and mobile frontend performance using DQL.

Community
Advanced
mirzadhammirzadham

contract-first

Coordinate API and event schema changes through one authoritative machine-checkable contract artifact.

Community
Intermediate
webinywebiny
8.0k

webiny-website-builder

Builds Website Builder editor components, themes, and CMS-integrated pages with Next.js.

Official
Intermediate