Chapter 1: Environment Setup and CLAUDE.md Configuration
What You Will Learn
- Installing gstack and superpowers skillsets.
- Generating
CLAUDE.mdusing the/initcommand. - Understanding the structure of
CLAUDE.mdand how it helps Claude "know" your project.
1.1 Understanding GStack and Superpowers
Before we dive in, let's clarify what these two toolsets are and what they handle.
GStack is a design-oriented skillset. It excels at:
- Reviewing requirements from multiple personas (CEO, Designer, Engineer).
- Generating and comparing UI design options.
- Reviewing visual design and page quality.
Superpowers is a development-oriented skillset. It excels at:
- Breaking requirements into detailed coding plans.
- Automatically dispatching subagents for coding, testing, and reviews.
- Managing the full development loop from planning to shipping.
Analogy: GStack is the Product Manager and Designer; Superpowers is the Development Team.
flowchart TB
subgraph gstack["gstack (Product + Design)"]
A1[Req Storming] --> A2[Visual Design] --> A3[Design Review]
end
subgraph superpowers["superpowers (Dev Team)"]
B1[Implementation Plan] --> B2[Code + Test] --> B3[Code Review] --> B4[Shipping]
end
gstack --> superpowers
style gstack fill:#eef2ff,stroke:#4f46e5
style superpowers fill:#ecfdf5,stroke:#0596691.2 Installation
To get started, ensure you have these skillsets installed in your Claude Code environment:
/skill install gstack
/skill install superpowers
1.3 Project Initialization with /init
In your project root directory, run:
/init
This command generates a CLAUDE.md file (or similar configuration guide). In this file, you can define your project rules, coding standards, and directory structure in natural language.
Why CLAUDE.md Matters
CLAUDE.md serves as the project's DNA. It tells Claude:
- The Architecture: What technologies are we using? (e.g., Vite, React, Tailwind).
- Coding Standards: How should we name variables? (e.g., camelCase).
- Workflow: How do we run tests? (e.g.,
npm test).
Without a well-defined CLAUDE.md, Claude might make generic assumptions that don't fit your specific tech stack.
Summary
In this chapter, we laid the foundation by installing the necessary skillsets and initializing our project. In the next chapter, we'll put gstack to work by conducting a professional requirement review for our NodeFlow app.