skills.rest
apadern
apadernCOMMUNITY
Explore all skills by this author →
GitHub

frontend-code-generator

Generate TypeScript types, services, and Zustand stores from design specifications.

Updated Aug 23, 2026
Search Tags:#typescript#codegen#zustand#generate#data-model#design-specs#mock-services
One-click install
npx skills add https://github.com/apadern/.github_tailormade --skill frontend-code-generator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-code-generator
Source: https://github.com/apadern/.github_tailormade/tree/main/skills/frontend-code-generator
Command: npx skills add https://github.com/apadern/.github_tailormade --skill frontend-code-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates TypeScript code generation from design specifications, reducing boilerplate and accelerating frontend module delivery.

Core Features & Use Cases

  • Generate TypeScript types from data models described in design documents.
  • Create mock and API services from backlog and service specifications.
  • Auto-create Zustand stores and organize outputs under the conventional frontend/src/modules/[moduleSlug]/ structure.
  • Use across multiple modules to produce types, services, and stores in a single run.

Quick Start

Provide backlog/XX_[module].md and optional design files, then run the generator to produce types.ts, services, and stores.

Frequently Asked Questions about frontend-code-generator

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

FAQPage Schema
How do I generate TypeScript types from design specifications?▼

Generate TypeScript types from design specifications by providing backlog markdown files and optional design documents as input. The generator parses data models described in these design specs to automatically produce type definitions.

How do I automatically create Zustand stores for frontend modules?▼

Automatically create Zustand stores by running the generator on your backlog module specifications. The tool extracts state requirements from design specs and outputs stores organized under the conventional frontend/src/modules/[moduleSlug]/ directory structure.

Can I generate both mock services and API-backed services from design specs?▼

Generate both mock and API-backed services from backlog and service specifications. The output supports toggling between mock and API modes controlled by the SERVICE_MODE configuration setting.

What is the best way to scaffold multiple frontend modules with types, services, and stores?▼

Scaffold multiple frontend modules by running the generator across several backlog modules at once. The tool produces types.ts, services, and Zustand stores in a single run, organizing all code artifacts under frontend/src/modules/[moduleSlug]/.

Does the generated TypeScript code use enums or union types?▼

The generated TypeScript code uses const-based enums with union types instead of standard TypeScript enums. This approach is applied consistently across all type definitions produced from the design specifications.

Related Skills

Explore More Software Engineering Skills→
decoutkhanqindevdecoutkhanqindev
8

kta-design-spec

Generate per-screen design specifications from PRD documents.

Community
Advanced
nopkhunnopkhun

backend-engineer

Integrate frontend applications with Supabase for backend services.

Community
Advanced
tkorakastkorakas
11

react-template-data-access-endpoint

Integrate React+TypeScript backend endpoints with Zod schemas and synchronized Mockoon mocks.

Community
Intermediate
GodSpeedAIGodSpeedAI
1

sea-generator-builder

Scaffold custom Nx or Python generators with manifest-driven templates.

Official
Advanced