diff --git a/README.md b/README.md index fb8e78d..ab5cd52 100644 --- a/README.md +++ b/README.md @@ -270,6 +270,151 @@ Watch my comprehensive tutorial on how to use this agentic coding boilerplate to 📺 YouTube Tutorial - Building with Agentic Coding Boilerplate +## 🤖 Claude Code Commands + +This project includes custom slash commands for [Claude Code](https://claude.ai/code) that streamline feature development with GitHub integration. + +### Available Commands + +| Command | Description | +|---------|-------------| +| `/create-feature` | Create a new feature specification with requirements and implementation plan | +| `/publish-to-github` | Publish a feature to GitHub Issues and Projects | +| `/continue-feature` | Continue implementing the next task for a GitHub-published feature | +| `/checkpoint` | Create a comprehensive checkpoint commit with all changes | + +### Prerequisites + +Before using the GitHub-integrated commands: + +1. **GitHub CLI**: Install and authenticate the GitHub CLI + ```bash + # Install (if needed) + brew install gh # macOS + # or see https://cli.github.com/ + + # Authenticate + gh auth login + + # Add project scopes (required for /publish-to-github) + gh auth refresh -s project,read:project + ``` + +2. **Claude Code**: Install Claude Code CLI from [claude.ai/code](https://claude.ai/code) + +### Typical Workflow + +#### 1. Plan Your Feature + +Start a conversation with Claude Code and describe the feature you want to build: + +``` +You: I want to add a user preferences page where users can update their display name, + email notifications, and theme preferences. +``` + +#### 2. Create Feature Specification + +Once you've discussed the requirements, run: + +``` +/create-feature +``` + +This creates a spec folder at `specs/{feature-name}/` containing: +- `requirements.md` - What the feature does and acceptance criteria +- `implementation-plan.md` - Phased tasks with checkboxes + +#### 3. Publish to GitHub + +Publish the feature to GitHub for tracking: + +``` +/publish-to-github +``` + +This creates: +- An **Epic issue** with full requirements +- **Task issues** for each implementation step +- A **GitHub Project** to track progress +- **Labels** for organization +- A `github.md` file with all references + +#### 4. Implement Tasks + +Start implementing tasks one at a time: + +``` +/continue-feature +``` + +This command: +1. Finds the next unblocked task (respecting dependencies) +2. Updates the GitHub Project status to "In Progress" +3. Implements the task following project conventions +4. Runs lint and typecheck +5. Commits with `closes #{issue-number}` +6. Updates the issue with implementation details +7. Moves the task to "Done" on the Project board + +Repeat `/continue-feature` for each task, or let Claude continue automatically. + +#### 5. Create Checkpoints + +At any point, create a detailed checkpoint commit: + +``` +/checkpoint +``` + +This stages all changes and creates a well-formatted commit with: +- Clear summary line +- Detailed description of changes +- Co-author attribution + +### Example Session + +```bash +# Start Claude Code in your project +claude + +# Discuss feature requirements +You: I need to add API rate limiting to protect our endpoints... + +# Claude helps plan, then you run: +/create-feature + +# Review the spec, then publish: +/publish-to-github + +# Implement task by task: +/continue-feature +# ... Claude implements, commits, updates GitHub ... + +/continue-feature +# ... next task ... + +# When done, push to GitHub: +git push +``` + +### Without GitHub Integration + +If you prefer not to use GitHub, you can still use `/create-feature` to create specs, then manually work through the `implementation-plan.md` checkboxes. The `/continue-feature` command also supports offline mode, tracking progress directly in the markdown file. + +### Command Files Location + +Commands are defined in `.claude/commands/`: +``` +.claude/commands/ +├── checkpoint.md +├── continue-feature.md +├── create-feature.md +└── publish-to-github.md +``` + +You can customize these commands or add new ones following the [Claude Code documentation](https://docs.anthropic.com/en/docs/claude-code). + ## 🤝 Contributing 1. Fork this repository diff --git a/create-agentic-app/package-lock.json b/create-agentic-app/package-lock.json index 4e7f36a..78071d0 100644 --- a/create-agentic-app/package-lock.json +++ b/create-agentic-app/package-lock.json @@ -1,12 +1,12 @@ { "name": "create-agentic-app", - "version": "1.1.25", + "version": "1.1.26", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "create-agentic-app", - "version": "1.1.25", + "version": "1.1.26", "license": "MIT", "dependencies": { "chalk": "^5.3.0", diff --git a/create-agentic-app/package.json b/create-agentic-app/package.json index 872cf0f..99f142d 100644 --- a/create-agentic-app/package.json +++ b/create-agentic-app/package.json @@ -1,6 +1,6 @@ { "name": "create-agentic-app", - "version": "1.1.25", + "version": "1.1.26", "description": "Scaffold a new agentic AI application with Next.js, Better Auth, and AI SDK", "type": "module", "bin": { diff --git a/create-agentic-app/template/README.md b/create-agentic-app/template/README.md index fb8e78d..ab5cd52 100644 --- a/create-agentic-app/template/README.md +++ b/create-agentic-app/template/README.md @@ -270,6 +270,151 @@ Watch my comprehensive tutorial on how to use this agentic coding boilerplate to 📺 YouTube Tutorial - Building with Agentic Coding Boilerplate +## 🤖 Claude Code Commands + +This project includes custom slash commands for [Claude Code](https://claude.ai/code) that streamline feature development with GitHub integration. + +### Available Commands + +| Command | Description | +|---------|-------------| +| `/create-feature` | Create a new feature specification with requirements and implementation plan | +| `/publish-to-github` | Publish a feature to GitHub Issues and Projects | +| `/continue-feature` | Continue implementing the next task for a GitHub-published feature | +| `/checkpoint` | Create a comprehensive checkpoint commit with all changes | + +### Prerequisites + +Before using the GitHub-integrated commands: + +1. **GitHub CLI**: Install and authenticate the GitHub CLI + ```bash + # Install (if needed) + brew install gh # macOS + # or see https://cli.github.com/ + + # Authenticate + gh auth login + + # Add project scopes (required for /publish-to-github) + gh auth refresh -s project,read:project + ``` + +2. **Claude Code**: Install Claude Code CLI from [claude.ai/code](https://claude.ai/code) + +### Typical Workflow + +#### 1. Plan Your Feature + +Start a conversation with Claude Code and describe the feature you want to build: + +``` +You: I want to add a user preferences page where users can update their display name, + email notifications, and theme preferences. +``` + +#### 2. Create Feature Specification + +Once you've discussed the requirements, run: + +``` +/create-feature +``` + +This creates a spec folder at `specs/{feature-name}/` containing: +- `requirements.md` - What the feature does and acceptance criteria +- `implementation-plan.md` - Phased tasks with checkboxes + +#### 3. Publish to GitHub + +Publish the feature to GitHub for tracking: + +``` +/publish-to-github +``` + +This creates: +- An **Epic issue** with full requirements +- **Task issues** for each implementation step +- A **GitHub Project** to track progress +- **Labels** for organization +- A `github.md` file with all references + +#### 4. Implement Tasks + +Start implementing tasks one at a time: + +``` +/continue-feature +``` + +This command: +1. Finds the next unblocked task (respecting dependencies) +2. Updates the GitHub Project status to "In Progress" +3. Implements the task following project conventions +4. Runs lint and typecheck +5. Commits with `closes #{issue-number}` +6. Updates the issue with implementation details +7. Moves the task to "Done" on the Project board + +Repeat `/continue-feature` for each task, or let Claude continue automatically. + +#### 5. Create Checkpoints + +At any point, create a detailed checkpoint commit: + +``` +/checkpoint +``` + +This stages all changes and creates a well-formatted commit with: +- Clear summary line +- Detailed description of changes +- Co-author attribution + +### Example Session + +```bash +# Start Claude Code in your project +claude + +# Discuss feature requirements +You: I need to add API rate limiting to protect our endpoints... + +# Claude helps plan, then you run: +/create-feature + +# Review the spec, then publish: +/publish-to-github + +# Implement task by task: +/continue-feature +# ... Claude implements, commits, updates GitHub ... + +/continue-feature +# ... next task ... + +# When done, push to GitHub: +git push +``` + +### Without GitHub Integration + +If you prefer not to use GitHub, you can still use `/create-feature` to create specs, then manually work through the `implementation-plan.md` checkboxes. The `/continue-feature` command also supports offline mode, tracking progress directly in the markdown file. + +### Command Files Location + +Commands are defined in `.claude/commands/`: +``` +.claude/commands/ +├── checkpoint.md +├── continue-feature.md +├── create-feature.md +└── publish-to-github.md +``` + +You can customize these commands or add new ones following the [Claude Code documentation](https://docs.anthropic.com/en/docs/claude-code). + ## 🤝 Contributing 1. Fork this repository