skills.rest
ouakar
ouakarCOMMUNITY
Explore all skills by this author →
GitHub

frontend-engineer

Scaffold React frontends with design tokens, routing, and Storybook documentation.

Updated Mar 25, 2026
Search Tags:#typescript#testing#frontend#react#next.js#design-system
One-click install
npx skills add https://github.com/ouakar/ubinarys-dental --skill frontend-engineer-ouakar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/ouakar/ubinarys-dental/tree/main/skills/forgewright/skills/frontend-engineer
Command: npx skills add https://github.com/ouakar/ubinarys-dental --skill frontend-engineer-ouakar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend engineers often struggle to deliver scalable, accessible, and production-grade frontends with consistent design systems, modern tooling, and robust API integration. This skill provides a complete blueprint and codebase scaffolding to automate and unify frontend development.

Core Features & Use Cases

  • End-to-end frontend codebase: design system tokens, theming, component library, routing, API clients, and testing.
  • Production-grade architecture: SSR/SSG decisions, server/client component strategy, and accessible components.
  • Real-world use: create a scalable SPA/SSG app with Next.js/React, integrated with typed API clients and Storybook docs.

Quick Start

Boot the frontend scaffold and start the dev server to begin building production-grade components.

Frequently Asked Questions about frontend-engineer

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

FAQPage Schema
How do I scaffold a production-grade React frontend with a design system?▼

Build a production-grade React frontend by generating a complete codebase featuring design tokens, theming, a component library, routing, typed API clients, and Storybook documentation.

What is included in an end-to-end Next.js frontend codebase?▼

An end-to-end Next.js frontend codebase includes design system tokens, theming, a primitives library, routing, data fetching hooks, typed API clients, tests, and Storybook docs.

Does this frontend skill support SSR and SSG strategies for SaaS applications?▼

Yes, this frontend skill supports SaaS applications by providing production-grade architecture that handles SSR and SSG decisions alongside server and client component strategies.

Can I generate accessible UI components and state management for TypeScript apps?▼

Yes, you can generate accessible UI components and state management for TypeScript apps, ensuring modern React stacks meet accessibility requirements across the component library.

What's the best way to automate design system creation for a React component library?▼

Automate design system creation for a React component library by using a skill that scaffolds design tokens, theming, primitives, and Storybook docs to unify frontend development.

Why do I need Storybook documentation and testing in a frontend codebase?▼

You need Storybook documentation and testing in a frontend codebase to ensure scalable, accessible components, verify typed API integration, and maintain production-grade quality across UI updates.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
djnsty23djnsty23
2

deploy

Deploy and configure CI/CD workflows for Vercel, Supabase, and GitHub Actions.

Community
Advanced
addisualemuaddisualemu

expo-api-agent

Create and edit API clients, endpoints, types, and data-fetching hooks in Expo applications.

Community
Intermediate
nazrulsoftwaredevnazrulsoftwaredev

ui-to-vue

Convert UI design screenshots into Vue 3 Composition API components.

Community
Intermediate