Back to Details

project-scaffold

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Project Scaffold

项目脚手架

Unified project scaffolder for creating new projects or adding components to existing ones.
用于创建新项目或向现有项目添加组件的统一项目脚手架工具。

Purpose

用途

This skill provides a unified way to scaffold:
  • .agents/
    folder structure for AI-first development
  • Backend (NestJS) with MongoDB, Swagger, and best practices
  • Frontend (NextJS) with Tailwind and @agenticindiedev/ui
  • Mobile (Expo) with React Native and Expo Router
  • Browser Extension (Plasmo) with React and Tailwind
此技能提供统一的方式来搭建：
  • 面向AI优先开发的
    .agents/
    文件夹结构
  • 集成MongoDB、Swagger及最佳实践的后端（NestJS）
  • 集成Tailwind和@agenticindiedev/ui的前端（NextJS）
  • 集成React Native和Expo Router的移动端（Expo）
  • 集成React和Tailwind的浏览器扩展（Plasmo）

When to Use

适用场景

Use this skill when:
  • Starting a new project from scratch
  • Adding components to an existing project
  • Setting up a monorepo or separate repositories
  • Need a unified scaffolding experience across Claude, Codex, and Cursor
在以下场景中使用此技能：
  • 从零开始创建新项目
  • 向现有项目添加组件
  • 配置单仓库（monorepo）或独立仓库
  • 需要在Claude、Codex和Cursor中获得统一的脚手架体验

Usage

使用方法

Interactive Mode (Recommended)

交互式模式（推荐）

bash
python3 ~/.claude/skills/project-scaffold/scripts/scaffold.py
The script will ask you:
  1. Project name
  2. Project root path
  3. Repository structure (monorepo vs separate)
  4. Components to scaffold (all optional):
    • .agent folder
    • Backend (NestJS)
    • Frontend (NextJS)
    • Mobile (Expo)
    • Extension (Plasmo)
  5. Organization name (for monorepo packages)
bash
python3 ~/.claude/skills/project-scaffold/scripts/scaffold.py
脚本会询问以下信息：
  1. 项目名称
  2. 项目根路径
  3. 仓库结构（单仓库/独立仓库）
  4. 要搭建的组件（均为可选）：
    • .agent文件夹
    • 后端（NestJS）
    • 前端（NextJS）
    • 移动端（Expo）
    • 扩展（Plasmo）
  5. 组织名称（用于单仓库包）

From Claude

通过Claude使用

When user requests scaffolding, activate this skill and run:
bash
python3 ~/.claude/skills/project-scaffold/scripts/scaffold.py
The script handles all interactive prompts.
当用户请求搭建项目时，激活此技能并运行：
bash
python3 ~/.claude/skills/project-scaffold/scripts/scaffold.py
脚本会处理所有交互式提示。

Features

功能特性

Flexible Structure

灵活的结构

  • Monorepo: All components in one repository with workspace configuration
  • Separate repos: Each component in its own directory/repository
  • Existing projects: Can add components to existing projects
  • 单仓库（Monorepo）: 所有组件位于同一仓库，包含工作区配置
  • 独立仓库: 每个组件位于单独的目录/仓库中
  • 现有项目: 可向现有项目添加组件

Component Options

组件选项

All components are optional - scaffold only what you need:
  • .agents/
    folder with full AI documentation structure
  • Backend with NestJS, MongoDB, Swagger
  • Frontend with NextJS 15, Tailwind, @agenticindiedev/ui
  • Mobile with Expo Router, React Native
  • Extension with Plasmo, React, Tailwind
所有组件均为可选 - 仅搭建你需要的部分：
  • 包含完整AI文档结构的
    .agents/
    文件夹
  • 基于NestJS、MongoDB、Swagger的后端
  • 基于NextJS 15、Tailwind、@agenticindiedev/ui的前端
  • 基于Expo Router、React Native的移动端
  • 基于Plasmo、React、Tailwind的扩展

Cross-Platform

跨平台支持

Works from:
  • Claude Code
  • Codex
  • Cursor
可在以下环境中使用：
  • Claude Code
  • Codex
  • Cursor

Generated Structure

生成的结构

Monorepo Example

单仓库示例

myproject/
├── .agents/                  # AI documentation
├── package.json             # Workspace root
├── api/                     # NestJS backend
│   ├── .agents/
│   ├── apps/api/src/
│   └── package.json
├── frontend/                # NextJS apps
│   ├── .agents/
│   ├── apps/dashboard/
│   └── package.json
├── mobile/                  # Expo app
│   ├── .agents/
│   ├── app/
│   └── package.json
└── extension/               # Plasmo extension
    ├── .agents/
    ├── src/
    └── package.json
myproject/
├── .agents/                  # AI documentation
├── package.json             # Workspace root
├── api/                     # NestJS backend
│   ├── .agents/
│   ├── apps/api/src/
│   └── package.json
├── frontend/                # NextJS apps
│   ├── .agents/
│   ├── apps/dashboard/
│   └── package.json
├── mobile/                  # Expo app
│   ├── .agents/
│   ├── app/
│   └── package.json
└── extension/               # Plasmo extension
    ├── .agents/
    ├── src/
    └── package.json

Separate Repos Example

独立仓库示例

myproject-api/               # Backend only
├── .agents/
├── apps/api/src/
└── package.json

myproject-frontend/          # Frontend only
├── .agents/
├── apps/dashboard/
└── package.json
myproject-api/               # Backend only
├── .agents/
├── apps/api/src/
└── package.json

myproject-frontend/          # Frontend only
├── .agents/
├── apps/dashboard/
└── package.json

Key Patterns Included

包含的核心模式

Backend (NestJS)

后端（NestJS）

  • Soft deletes: 
    isDeleted: boolean
  • Multi-tenancy: Always filter by 
    organization
  • Collection pattern: controllers → services → schemas
  • Swagger documentation
  • Dockerfile included
  • 软删除：
    isDeleted: boolean
  • 多租户：始终按
    organization
    过滤
  • 集合模式：控制器→服务→数据模型
  • Swagger文档
  • 包含Dockerfile

Frontend (NextJS)

前端（NextJS）

  • Path aliases: 
    @components/
    , 
    @services/
    , 
    @hooks/
  • Tailwind CSS with @agenticindiedev/ui
  • TypeScript strict mode
  • App Router structure
  • 路径别名：
    @components/
    、
    @services/
    、
    @hooks/
  • 集成@agenticindiedev/ui的Tailwind CSS
  • TypeScript严格模式
  • App Router结构

Mobile (Expo)

移动端（Expo）

  • Expo Router for navigation
  • TypeScript configuration
  • Platform-specific configurations
  • 使用Expo Router进行导航
  • TypeScript配置
  • 平台专属配置

Extension (Plasmo)

浏览器扩展（Plasmo）

  • React + TypeScript
  • Tailwind CSS with @agenticindiedev/ui
  • Manifest configuration
  • Popup component
  • React + TypeScript
  • 集成@agenticindiedev/ui的Tailwind CSS
  • 清单配置
  • 弹窗组件

Next Steps After Scaffolding

搭建后的后续步骤

  1. Install dependencies:
    bash
    cd [project-root]
bun install
  2. Start development:
    bash
    # Monorepo
bun run dev:api
bun run dev:frontend

# Separate repos
cd api && bun run start:dev
cd frontend && bun run dev
  3. Customize:
    • Update 
      .agents/SYSTEM/RULES.md
      with your coding standards
    • Configure environment variables
    • Add your first features
  1. 安装依赖：
    bash
    cd [project-root]
bun install
  2. 启动开发环境：
    bash
    # Monorepo
bun run dev:api
bun run dev:frontend

# Separate repos
cd api && bun run start:dev
cd frontend && bun run dev
  3. 自定义配置：
    • 在
      .agents/SYSTEM/RULES.md
      中更新你的编码规范
    • 配置环境变量
    • 添加你的首个功能

Integration with Existing Skills

与现有技能的集成

This skill integrates with:
  • agent-folder-init
    : Uses its script for .agent folder scaffolding
  • fullstack-workspace-init
    : Reuses component templates and patterns
此技能可与以下技能集成：
  • agent-folder-init
    ：使用其脚本搭建.agent文件夹
  • fullstack-workspace-init
    ：复用组件模板和模式

Troubleshooting

故障排除

Script not found: Ensure the skill is installed in 
~/.claude/skills/project-scaffold/
Permission denied: Make script executable: 
chmod +x ~/.claude/skills/project-scaffold/scripts/scaffold.py
Python not found: Ensure Python 3 is installed and in PATH
Agent folder not created: The script tries to use 
agent-folder-init
skill. If not found, it will skip .agent folder creation.
脚本未找到：确保技能已安装在
~/.claude/skills/project-scaffold/
目录中
权限不足：将脚本设置为可执行：
chmod +x ~/.claude/skills/project-scaffold/scripts/scaffold.py
未找到Python：确保已安装Python 3并添加到系统PATH中
未创建Agent文件夹：脚本会尝试使用
agent-folder-init
技能。若未找到该技能，将跳过.agent文件夹的创建。