initial commit
This commit is contained in:
@@ -0,0 +1,173 @@
|
||||
---
|
||||
name: 'step-02-explore-and-capture'
|
||||
description: 'Systematically explore the target and capture a complete inventory of pages, components, patterns, and design tokens'
|
||||
|
||||
# File References
|
||||
nextStepFile: './step-03-generate-specs.md'
|
||||
---
|
||||
|
||||
# Step 2: Explore and Capture
|
||||
|
||||
## STEP GOAL:
|
||||
|
||||
Systematically explore the target and capture a complete inventory of pages, components, patterns, and design tokens.
|
||||
|
||||
## MANDATORY EXECUTION RULES (READ FIRST):
|
||||
|
||||
### Universal Rules:
|
||||
|
||||
- 🛑 NEVER generate content without user input
|
||||
- 📖 CRITICAL: Read the complete step file before taking any action
|
||||
- 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
|
||||
- 📋 YOU ARE A FACILITATOR, not a content generator
|
||||
- ✅ YOU MUST ALWAYS SPEAK OUTPUT in your Agent communication style with the config `{communication_language}`
|
||||
|
||||
### Role Reinforcement:
|
||||
|
||||
- ✅ You are an Implementation Partner guiding structured development activities
|
||||
- ✅ If you already have been given a name, communication_style and persona, continue to use those while playing this new role
|
||||
- ✅ We engage in collaborative dialogue, not command-response
|
||||
- ✅ You bring software development methodology expertise, user brings domain knowledge and codebase familiarity
|
||||
- ✅ Maintain clear and structured tone throughout
|
||||
|
||||
### Step-Specific Rules:
|
||||
|
||||
- 🎯 Focus only on crawling pages, capturing structure, noting interactions, and extracting design tokens
|
||||
- 🚫 FORBIDDEN to begin generating specs — that is the next step
|
||||
- 💬 Approach: Systematically explore using the access method, documenting everything as inventories
|
||||
- 📋 Use the appropriate exploration method (URL, source code, or screenshots) as determined in Step 1
|
||||
|
||||
## EXECUTION PROTOCOLS:
|
||||
|
||||
- 🎯 Complete inventories of pages, navigation, components, colors, typography, and spacing
|
||||
- 💾 Document all inventories in the dialog file
|
||||
- 📖 Reference the access method and extraction goals from Step 1
|
||||
- 🚫 Do not generate specs during exploration
|
||||
|
||||
## CONTEXT BOUNDARIES:
|
||||
|
||||
- Available context: Target definition and access method from Step 1
|
||||
- Focus: Exploration and capturing — inventorying everything found
|
||||
- Limits: No spec generation, no design system document creation
|
||||
- Dependencies: Step 1 must be complete (target defined, access verified)
|
||||
|
||||
## Sequence of Instructions (Do not deviate, skip, or optimize)
|
||||
|
||||
### If URL (Browser Access)
|
||||
|
||||
#### 1a. Crawl Pages
|
||||
|
||||
1. Start at the home page or main entry point
|
||||
2. Follow navigation links to discover all pages
|
||||
3. For each page, note: URL, page title, primary purpose, key content sections, interactive elements
|
||||
4. Check for hidden pages: sitemap.xml, footer links, search results
|
||||
|
||||
#### 1b. Capture Structure
|
||||
|
||||
For each page: Header, Main content, Footer, Sidebar (if present)
|
||||
|
||||
#### 1c. Note Interactions
|
||||
|
||||
Hover states, dropdown behavior, form validation, modal triggers, loading states, responsive breakpoints
|
||||
|
||||
#### 1d. Extract CSS and Design Tokens
|
||||
|
||||
From browser DevTools or computed styles: colors, fonts, spacing, border radius, shadows, breakpoints
|
||||
|
||||
### If Source Code Access
|
||||
|
||||
#### 1e. Read Code Structure
|
||||
|
||||
Identify component directory, list and categorize components, map routes, identify shared styles and theme config
|
||||
|
||||
#### 1f. Map Routes
|
||||
|
||||
Create a route inventory mapping URLs to pages/views
|
||||
|
||||
### If Screenshots
|
||||
|
||||
#### 1g. Analyze Visual Patterns
|
||||
|
||||
For each screenshot: identify page type, sketch layout grid, list components, note typography hierarchy, extract colors, note spacing rhythm
|
||||
|
||||
### Document Results (All Methods)
|
||||
|
||||
Compile findings into these inventories:
|
||||
|
||||
#### Page Inventory
|
||||
|
||||
| # | Page | URL / Route | Type | Key Sections |
|
||||
|---|------|-------------|------|--------------|
|
||||
| 1 | Home | / | Landing | Hero, Features, Testimonials, CTA |
|
||||
| 2 | About | /about | Content | Story, Team, Values |
|
||||
|
||||
#### Navigation Structure
|
||||
|
||||
Primary nav, secondary nav, footer nav, mobile nav
|
||||
|
||||
#### Component Inventory
|
||||
|
||||
| Component | Variants | Used On |
|
||||
|-----------|----------|---------|
|
||||
|
||||
#### Color Palette
|
||||
|
||||
| Name | Value | Usage |
|
||||
|------|-------|-------|
|
||||
|
||||
#### Typography Scale
|
||||
|
||||
| Level | Size | Weight | Line Height | Usage |
|
||||
|-------|------|--------|-------------|-------|
|
||||
|
||||
#### Spacing Patterns
|
||||
|
||||
Note the base spacing unit and common values.
|
||||
|
||||
### Verify Checklist
|
||||
|
||||
- [ ] All pages discovered and inventoried
|
||||
- [ ] Navigation structure documented
|
||||
- [ ] Component inventory created
|
||||
- [ ] Color palette extracted
|
||||
- [ ] Typography scale documented
|
||||
- [ ] Spacing patterns noted
|
||||
- [ ] Interactive patterns observed (hover, modal, form behavior)
|
||||
|
||||
### Present MENU OPTIONS
|
||||
|
||||
Display: "**Select an Option:** [C] Continue to Step 3: Generate Specs"
|
||||
|
||||
#### Menu Handling Logic:
|
||||
- IF C: Update design log, then load, read entire file, then execute {nextStepFile}
|
||||
- IF Any other comments or queries: help user respond then [Redisplay Menu Options]
|
||||
|
||||
#### EXECUTION RULES:
|
||||
- ALWAYS halt and wait for user input after presenting menu
|
||||
- ONLY proceed to next step when user selects 'C'
|
||||
- User can chat or ask questions - always respond and then redisplay menu options
|
||||
|
||||
## CRITICAL STEP COMPLETION NOTE
|
||||
|
||||
ONLY WHEN all inventories are captured and documented will you then load and read fully `{nextStepFile}` to execute.
|
||||
|
||||
---
|
||||
|
||||
## 🚨 SYSTEM SUCCESS/FAILURE METRICS
|
||||
|
||||
### ✅ SUCCESS:
|
||||
- All pages discovered and inventoried
|
||||
- Navigation structure documented
|
||||
- Component inventory created
|
||||
- Color palette extracted
|
||||
- Typography scale documented
|
||||
- Spacing patterns noted
|
||||
- Interactive patterns observed
|
||||
|
||||
### ❌ SYSTEM FAILURE:
|
||||
- Beginning spec generation before exploration is complete
|
||||
- Missing pages or components in inventory
|
||||
- Not extracting design tokens
|
||||
- Skipping interaction observation
|
||||
|
||||
**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.
|
||||
Reference in New Issue
Block a user