project-scaffolder

Analyze frontend project structure and generate a PROJECT_ARCHITECTURE.md document.

2|Updated Dec 19, 2025
One-click install
npx skills add https://github.com/rungchan2/frontend-skills --skill project-scaffolder-rungchan2
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: project-scaffolder
Source: https://github.com/rungchan2/frontend-skills/tree/main/skills/project-scaffolder
Command: npx skills add https://github.com/rungchan2/frontend-skills --skill project-scaffolder-rungchan2

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Many frontend projects lack a consistent folder structure, clear data-access boundaries, and a machine-usable architecture document, which makes onboarding, automated agent workflows, and long-term maintenance inefficient. This Skill analyzes existing repositories or new project setups and produces an organized architecture spec that AI agents and developers can use as actionable context.

Core Features & Use Cases

  • Repository analysis: Inspect folders and key files to infer stack, routes, services, and data layers for Next.js, React, Vue, Supabase, Firebase, and Prisma projects.
  • Architecture document generation: Produce spec/PROJECT_ARCHITECTURE.md describing the 3-layer Component/Hook/Service separation, folder roles, coding rules, and external integration patterns.
  • Agent context / scaffolding: Update or suggest CLAUDE.md or .cursorrules entries and provide folder templates and implementation patterns for consistent scaffolding and onboarding.
  • Team onboarding & standardization: Create a single-source reference that reduces cognitive load for new contributors and enforces import/DB client rules across the codebase.

Quick Start

Analyze the repository and generate spec/PROJECT_ARCHITECTURE.md with recommended folder structure, 3-layer rules, and CLAUDE.md updates for AI agent context.

Frequently Asked Questions about project-scaffolder

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

FAQPage Schema
How do I generate architecture documentation for a Next.js or Vue project?

To generate architecture documentation, this Skill analyzes your project structure and produces a spec/PROJECT_ARCHITECTURE.md file. It infers routes, services, and data layers for Next.js, React, and Vue stacks, creating a machine-readable reference for onboarding and automated agent workflows.

What is the 3-layer Component Hook Service pattern for frontend project structure?

The 3-layer Component/Hook/Service pattern separates UI components, data-fetching hooks, and service layers to enforce clear data-access boundaries. This Skill analyzes your repository to recommend folder and import rules that align with this architecture standard.

How do I create a machine-readable architecture document for AI agents?

Creating a machine-readable architecture document involves summarizing your stack and folder roles into a structured format. This Skill updates agent context files like CLAUDE.md or .cursorrules and generates an architecture spec for automated workflows.

Does this scaffolding tool support Supabase, Firebase, and Prisma projects?

Yes, this scaffolding tool supports Supabase, Firebase, and Prisma projects. It inspects your folders and key files to infer stack details, external integration patterns, and database client rules for the generated architecture document.

How do I standardize folder structure and import rules for team onboarding?

To standardize folder structure and import rules for team onboarding, this Skill creates a single-source architecture reference. It reduces cognitive load for new contributors by enforcing consistent Component, Hook, and Service separation across the codebase.