skills.rest
wade56754
wade56754COMMUNITY
Explore all skills by this author →
GitHub

ai-ad-fe-gen

Generate type-safe Next.js/React frontend modules from API contracts.

Updated Nov 8, 2025
Search Tags:#frontend#react#code generation#next.js#ui design system
One-click install
npx skills add https://github.com/wade56754/AI_ad_spend02 --skill ai-ad-fe-gen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ai-ad-fe-gen
Source: https://github.com/wade56754/AI_ad_spend02/tree/main/.claude/skills/ai-ad-fe-gen
Command: npx skills add https://github.com/wade56754/AI_ad_spend02 --skill ai-ad-fe-gen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill generates front-end modules (pages, hooks, components) for Next.js/React projects, while enforcing SoT constraints on architecture, boundaries, and API contracts.

Core Features & Use Cases

  • UI-first code generation: Produces module shells with PageShell, hooks, components, and TS types.
  • SoT-aligned boundaries: Ensures target files live inside writable frontend paths and respect API contracts.
  • Use Case: Given a task like "build recharge list page," it outputs a module scaffold with routing, data hooks, and UI components.

Quick Start

Provide a task and target frontend files, e.g., "Create recharge list page" with target_files ["frontend/src/modules/topups/TopupsPage.tsx"].

Frequently Asked Questions about ai-ad-fe-gen

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

FAQPage Schema
How do I generate Next.js React components from API contracts automatically?▼

This Skill generates type-safe Next.js/React frontend modules—pages, hooks, and components—directly from API contracts. It produces a complete module scaffold with routing, data fetching hooks, and UI components following your design system, ensuring all code adheres to your API specification and architecture boundaries.

Can I automate frontend scaffolding while enforcing source of truth constraints?▼

Yes. The Skill generates frontend modules while strictly enforcing source-of-truth boundaries, ensuring generated files respect writable paths, API contracts, and architectural rules. It outputs a changes map and SoT citations so you can verify all references align with your canonical sources.

What does the generated code include for a Next.js module?▼

Generated modules include PageShell with Next.js 14+ App Router structure, custom data hooks using TanStack Query, form components with React Hook Form and Zod validation, shadcn/ui components styled with Tailwind CSS, and full TypeScript types. Each output includes a self-check notes document and SoT citations.

Does this work with shadcn/ui and Tailwind CSS?▼

Yes. The Skill is built to output shadcn/ui components styled with Tailwind CSS, integrated with TanStack Query for data fetching and React Hook Form with Zod for form validation, all configured for Next.js 14+ App Router applications.

What are the limitations when generating frontend modules?▼

Generated files must target writable frontend paths you specify; the Skill enforces strict API contract compliance and cannot generate outside defined boundaries. It requires a valid API contract and UI design system reference to produce compliant output.

Related Skills

Explore More Software Engineering Skills→
bovinphangbovinphang
21

fec-typescript-project-standard

Align and enforce TypeScript project configurations across frontend apps, libraries, and monorepos.

Community
Advanced
HomericIntelligenceHomericIntelligence
6

verification

Run pytest, mypy, ruff, and pre-commit checks before declaring completion.

Official
Intermediate
benshapyrobenshapyro
9

react-patterns

Generate TypeScript React components and hooks with standardized patterns for state management and composition.

Community
Advanced
NUbivekNUbivek

sb

Run argument-based commands to manage Searchbar3 reliability and development tasks.

Community
Advanced