Skills
.Work. You
Rest

ai-ad-fe-gen

Community

Automate frontend module generation within SoT rules.

Software Engineering#frontend#react#code generation#next.js#ui design system
Authorwade56754
Version1.0.0
Installs0

System Documentation

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"].

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ai-ad-fe-gen
Download link: https://github.com/wade56754/AI_ad_spend02/archive/main.zip#ai-ad-fe-gen

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.