skills.rest
Exia-thd
Exia-thdCOMMUNITY
Explore all skills by this author →
GitHub

frontend-engineer

Generate Next.js frontends with design tokens, typed API clients, and tests.

Updated Apr 10, 2026
Search Tags:#accessibility#frontend#react#openapi#pwa#storybook#design-system
One-click install
npx skills add https://github.com/Exia-thd/Digital-Nervous --skill frontend-engineer-exia-thd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/Exia-thd/Digital-Nervous/tree/main/skills/frontend-engineer
Command: npx skills add https://github.com/Exia-thd/Digital-Nervous --skill frontend-engineer-exia-thd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Builds a complete, production-grade frontend from BRD user stories and API contracts so teams don't waste time stitching components, guessing API shapes, or retrofitting accessibility and performance after launch.

Core Features & Use Cases

  • Design system & tokens: Generates theme tokens, light/dark modes, and Tailwind integration to ensure consistent visuals.
  • Component library: Creates UI primitives, layout and feature components with accessibility, TypeScript types, and Storybook docs.
  • Typed API clients & pages: Generates typed clients from api/openapi/, React Query hooks, pages with React Server Components, routing, and auth guards.
  • Testing, a11y & performance: Adds component tests, Playwright E2E, axe-core audits, Lighthouse budgets, and visual regression to meet production quality.
  • PWA & edge strategies: Implements service worker, manifest, and edge rendering patterns when offline or low-latency requirements exist.

Quick Start

Ask the Frontend Engineer to build a Next.js frontend in frontend/ with a design system, typed API clients generated from api/openapi/, accessible component library, pages and tests.

Frequently Asked Questions about frontend-engineer

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

FAQPage Schema
How do I generate React pages and typed API clients from an OpenAPI contract?▼

Generate typed API clients from an OpenAPI contract by processing your api/openapi/ definitions to create React Query hooks and pages with React Server Components, routing, and auth guards automatically. This ensures your frontend types match your backend API shapes perfectly.

What is the best way to build an accessible React component library with a design system?▼

Build an accessible React component library by generating theme tokens, light/dark modes, and Tailwind integration alongside UI primitives. The process includes TypeScript types, Storybook documentation, and axe-core accessibility audits to ensure consistent, compliant visuals.

How do I set up Lighthouse performance budgets and Playwright E2E tests for a Next.js frontend?▼

Set up Lighthouse performance budgets and Playwright E2E tests by generating a complete test suite alongside your Next.js frontend. This includes component tests, Playwright E2E tests, axe-core accessibility audits, and visual regression to meet production quality standards.

Can I generate PWA support with service workers for a SaaS dashboard?▼

Yes, you can generate PWA support for SaaS dashboards by implementing service workers, web manifests, and edge rendering patterns. This provides offline capabilities and low-latency experiences when your application requirements demand progressive web app features.

Do I need BRD user stories to build a production-ready web frontend?▼

Yes, BRD user stories are required as input to build a production-ready web frontend. The process translates your business requirements and OpenAPI contracts into design tokens, component libraries, typed API clients, and pages with full accessibility and performance testing.

How do you build an admin console frontend with React Server Components and auth guards?▼

Build an admin console frontend by generating pages with React Server Components, routing, and auth guards directly from your OpenAPI contracts. This approach applies to admin consoles requiring design systems, typed API clients, and comprehensive accessibility support.

Related Skills

Explore More Software Engineering Skills→
Ankurjain1121Ankurjain1121

openapi-spec-generation

Convert API contracts into OpenAPI 3.1 specifications and SDK templates.

Community
Advanced
etewiahetewiah
635

e2e-testing

Automate Playwright E2E tests and Lighthouse audits in CI/CD.

Community
Intermediate
JCE-Joshhh77JCE-Joshhh77
16

design-systems

Design scalable design systems with W3C tokens, CSS theming, and CVA/Radix APIs.

Community
Advanced
7Lemaitre77Lemaitre7

tailwind-css-patterns

Generate responsive Tailwind CSS component patterns for React, Vue, and Svelte projects.

Community
Intermediate