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

frontend-engineer

Generate React and Next.js frontends from OpenAPI specifications and BRD requirements.

171|49|Updated Mar 4, 2026
Search Tags:#testing#web development#frontend#react#ui/ux#next.js#api client
One-click install
npx skills add https://github.com/nagisanzenin/claude-code-production-grade-plugin --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/claude-code-production-grade-plugin/tree/main/skills/frontend-engineer
Command: npx skills add https://github.com/nagisanzenin/claude-code-production-grade-plugin --skill frontend-engineer-nagisanzenin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation of complete, production-grade web frontends from user stories and API contracts, ensuring a high-quality, accessible, and performant user interface.

Core Features & Use Cases

  • Full-Stack Frontend Development: Generates UI primitives, layout components, feature components, pages, routing, state management, and API clients.
  • Production-Grade Standards: Enforces accessibility, performance budgets, visual consistency, and robust testing.
  • Use Case: Develop a new SaaS application's entire frontend, from login pages to complex dashboards, adhering to design system principles and best practices.

Quick Start

Use the frontend-engineer skill to build a new React frontend based on the provided BRD and OpenAPI specifications.

Frequently Asked Questions about frontend-engineer

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

FAQPage Schema
How do I build a production-ready React frontend from OpenAPI specifications?▼

Building a production-ready React frontend from OpenAPI specifications involves generating UI primitives, feature components, pages, routing, state management, and typed API clients using Next.js and adhering to strict accessibility and performance standards.

What is the best way to generate Next.js UI components from an API contract?▼

Generating Next.js UI components from an API contract is best handled by automating the creation of layout and feature components, pages, and typed API clients while enforcing visual consistency, accessibility, and robust testing standards.

Can I use this approach to develop a complete SaaS frontend with state management and routing?▼

Yes, you can develop a complete SaaS frontend with state management and routing by generating the full web frontend stack from login pages to complex dashboards, adhering to design system principles and best practices.

Does automated frontend development enforce accessibility and performance budgets?▼

Yes, automated frontend development enforces accessibility, performance budgets, visual consistency, and robust testing by integrating with OpenAPI specifications and BRD requirements to ensure a high-quality user interface.

What do I need to provide to automate web frontend development with React?▼

To automate web frontend development with React, you need to provide user stories, BRD requirements, and OpenAPI specifications to generate complete, production-grade UI primitives, pages, and typed API clients.

Related Skills

Explore More Software Engineering Skills→
Tai-ch0802Tai-ch0802
41

prd

Generates structured Product Requirement Documents with Markdown and Mermaid diagrams.

Community
Intermediate
calcosmiccalcosmic
9

frontend-design-contract

Generate a UI-SPEC.md contract defining visual tokens, breakpoints, and accessibility criteria.

Community
Intermediate
ketanswebsiteketanswebsite

ui-ux-design-advisor

Analyze project structure and design system to propose UI/UX design options.

Community
Advanced
webdevtodayjasonwebdevtodayjason
7

frontend-patterns

Design scalable React and Next.js frontend architectures with TypeScript patterns.

Community
Advanced