frontend-engineer

Name: frontend-engineer
Availability: InStock
Author: buiphucminhtam

Automate React/Next.js frontend workflows from design systems to tests.

47|11|Updated Mar 6, 2026

Search Tags:#frontend #react #nextjs #storybook #design-system #ui-components #frontend-engineering

Ready to run

npx skills add https://github.com/buiphucminhtam/forgewright --skill frontend-engineer-buiphucminhtam

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/buiphucminhtam/forgewright/tree/main/skills/frontend-engineer
Command: npx skills add https://github.com/buiphucminhtam/forgewright --skill frontend-engineer-buiphucminhtam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to deliver scalable, accessible, and high-performance UIs with consistent design systems, tokens, and robust data fetching. This skill automates the end-to-end frontend engineering workflow from design system to components, pages, tests, and documentation.

Core Features & Use Cases

Build React/Next.js components, pages, and design systems with a centralized token-led approach, typed API clients, and SSR/CSR strategies.
Include a production-grade orchestrator for routing, state management, accessibility, and performance budgets across the full UI lifecycle.
Use across projects to accelerate UI development, maintain design-system parity, and support Storybook, tests, and CI integration.

Quick Start

Kick off by scaffolding a complete frontend codebase with design tokens, a reusable component library, typed API clients, and skeleton pages ready for data fetching and testing.

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 React Next.js design system with consistent UI components?▼

Build a React Next.js design system by scaffolding a centralized token-led architecture, reusable components, and typed API clients to maintain design-system parity. This automated workflow orchestrates routing, state management, and accessibility across the UI lifecycle.

What is the best way to generate production-ready frontend UI code?▼

Generate production-ready frontend UI code by automating the end-to-end engineering workflow from design system tokens to components, pages, and tests. This pipeline integrates accessibility checks, performance budgets, and typed API client layers to maintain quality.

How do I set up Storybook and testing for a Next.js component library?▼

Set up Storybook and testing for a Next.js component library by integrating them into a production-grade frontend pipeline. The workflow supports Storybook, automated tests, and CI integration to validate reusable UI components and skeleton pages.

Does this frontend engineering workflow support SSR and CSR data fetching strategies?▼

Yes, this frontend engineering workflow supports SSR and CSR data fetching strategies. It requires a typed API client layer and skeleton pages ready for data fetching, applying server-side and client-side rendering strategies across the full UI lifecycle.

Why do I need design tokens and a typed API client layer for frontend engineering?▼

Design tokens and a typed API client layer are required to maintain quality throughout the UI lifecycle. Tokens ensure design-system parity across components, while typed clients enforce robust data fetching and state management for scalable web apps.

Can I use this workflow to scaffold a complete frontend codebase from scratch?▼

Yes, you can use this workflow to scaffold a complete frontend codebase from scratch. Quick start generates design tokens, a reusable component library, typed API clients, and skeleton pages ready for routing, testing, and data fetching.