mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-05 01:50:27 +08:00
refactor(file-discovery): implement script for discovering design-related files and outputting JSON
This commit is contained in:
catlog22
@@ -99,6 +99,12 @@ echo "[Phase 0] File Discovery Started"
|
||||
echo " Design ID: $design_id"
|
||||
echo " Source: $source"
|
||||
echo " Output: $base_path"
|
||||
|
||||
# 3. Discover files using script
|
||||
discovery_file="${intermediates_dir}/discovered-files.json"
|
||||
~/.claude/scripts/discover-design-files.sh "$source" "$discovery_file"
|
||||
|
||||
echo " Output: $discovery_file"
|
||||
```
|
||||
|
||||
<!-- TodoWrite: Initialize todo list -->
|
||||
@@ -117,10 +123,9 @@ echo " Output: $base_path"
|
||||
- **Supported file types**: CSS, SCSS, JavaScript, TypeScript, HTML
|
||||
- **Smart filtering**: Finds theme-related JS/TS files (e.g., tailwind.config.js, theme.js, styled-components)
|
||||
- **Exclusions**: Automatically excludes `node_modules/`, `dist/`, `.git/`, and build directories
|
||||
- **Output**: Categorized file lists saved to `.intermediates/import-analysis/`
|
||||
- `css-files.txt` - CSS and SCSS files
|
||||
- `js-files.txt` - JavaScript and TypeScript files with theme/style content
|
||||
- `html-files.txt` - HTML files
|
||||
- **Output**: Single JSON file `discovered-files.json` in `.intermediates/import-analysis/`
|
||||
- Structure: `{ "css": [...], "js": [...], "html": [...], "counts": {...}, "discovery_time": "..." }`
|
||||
- Generated via bash commands using `find` + JSON formatting
|
||||
|
||||
<!-- TodoWrite: Mark Phase 0 complete, start Phase 1 -->
|
||||
|
||||
@@ -159,193 +164,54 @@ echo "[Phase 1] Starting parallel agent analysis (3 agents)"
|
||||
```javascript
|
||||
Task(ui-design-agent): `
|
||||
[STYLE_TOKENS_EXTRACTION]
|
||||
Extract visual design tokens (colors, typography, spacing, shadows, borders) from ALL file types
|
||||
Extract visual design tokens from code files using code import extraction pattern.
|
||||
|
||||
MODE: style-extraction | SOURCE: ${source} | BASE_PATH: ${base_path}
|
||||
|
||||
## Input Files (Can reference ANY file type)
|
||||
## Input Files
|
||||
|
||||
**CSS/SCSS files (${css_count})**:
|
||||
$(cat "${intermediates_dir}/css-files.txt" 2>/dev/null | head -20)
|
||||
**Discovered Files**: ${intermediates_dir}/discovered-files.json
|
||||
$(cat "${intermediates_dir}/discovered-files.json" 2>/dev/null | grep -E '(count|files)' | head -30)
|
||||
|
||||
**JavaScript/TypeScript files (${js_count})**:
|
||||
$(cat "${intermediates_dir}/js-files.txt" 2>/dev/null | head -20)
|
||||
## Code Import Extraction Strategy
|
||||
|
||||
**HTML files (${html_count})**:
|
||||
$(cat "${intermediates_dir}/html-files.txt" 2>/dev/null | head -20)
|
||||
**Step 1: Load file list**
|
||||
- Read(${intermediates_dir}/discovered-files.json)
|
||||
- Extract: file_types.css.files, file_types.js.files, file_types.html.files
|
||||
|
||||
## Extraction Strategy
|
||||
**Step 2: Cross-source token extraction**
|
||||
- CSS/SCSS: Colors, typography, spacing, shadows, borders
|
||||
- JavaScript/TypeScript: Theme configs (Tailwind, styled-components, CSS-in-JS)
|
||||
- HTML: Inline styles, usage patterns
|
||||
|
||||
**You can read ALL file types** - Cross-reference for better extraction:
|
||||
1. **CSS/SCSS**: Primary source for colors, typography, spacing, shadows, borders
|
||||
2. **JavaScript/TypeScript**: Theme objects (styled-components, Tailwind config, CSS-in-JS tokens)
|
||||
3. **HTML**: Inline styles, class usage patterns, component examples
|
||||
**Step 3: Smart inference for gaps**
|
||||
- Infer missing tokens from existing patterns
|
||||
- Normalize inconsistent values into systematic scales
|
||||
- Fill missing categories from cross-file references
|
||||
|
||||
**Smart inference** - Fill gaps using cross-source data:
|
||||
- Missing CSS colors? Check JS theme objects
|
||||
- Missing spacing scale? Infer from existing values in any file type
|
||||
- Missing typography? Check font-family usage in CSS + HTML + JS configs
|
||||
## Output Files
|
||||
|
||||
## Output Requirements
|
||||
**Target Directory**: ${base_path}/style-extraction/style-1/
|
||||
|
||||
Generate 2 files in ${base_path}/style-extraction/style-1/:
|
||||
1. design-tokens.json (production-ready design tokens)
|
||||
2. style-guide.md (design philosophy and usage guide)
|
||||
**Files to Generate**:
|
||||
1. **design-tokens.json**
|
||||
- Follow [DESIGN_SYSTEM_GENERATION_TASK] standard token structure
|
||||
- Add "_metadata.extraction_source": "code_import"
|
||||
- Add "_metadata.files_analyzed": {css, js, html file lists}
|
||||
- Add "_metadata.completeness": {status, missing_categories, recommendations}
|
||||
- Include "source" field for each token (e.g., "file.css:23")
|
||||
|
||||
### design-tokens.json Structure:
|
||||
{
|
||||
"colors": {
|
||||
"brand": {
|
||||
"primary": {"value": "#0066cc", "source": "file.css:23"},
|
||||
"secondary": {"value": "#6c757d", "source": "file.css:24"}
|
||||
},
|
||||
"surface": {
|
||||
"background": {"value": "#ffffff", "source": "file.css:10"},
|
||||
"card": {"value": "#f8f9fa", "source": "file.css:11"}
|
||||
},
|
||||
"semantic": {
|
||||
"success": {"value": "#28a745", "source": "file.css:30"},
|
||||
"warning": {"value": "#ffc107", "source": "file.css:31"},
|
||||
"error": {"value": "#dc3545", "source": "file.css:32"}
|
||||
},
|
||||
"text": {
|
||||
"primary": {"value": "#212529", "source": "file.css:15"},
|
||||
"secondary": {"value": "#6c757d", "source": "file.css:16"}
|
||||
},
|
||||
"border": {
|
||||
"default": {"value": "#dee2e6", "source": "file.css:20"}
|
||||
}
|
||||
},
|
||||
"typography": {
|
||||
"font_family": {
|
||||
"base": {"value": "system-ui, sans-serif", "source": "theme.js:12"},
|
||||
"heading": {"value": "Georgia, serif", "source": "theme.js:13"}
|
||||
},
|
||||
"font_size": {
|
||||
"xs": {"value": "0.75rem", "source": "styles.css:5"},
|
||||
"sm": {"value": "0.875rem", "source": "styles.css:6"},
|
||||
"base": {"value": "1rem", "source": "styles.css:7"},
|
||||
"lg": {"value": "1.125rem", "source": "styles.css:8"},
|
||||
"xl": {"value": "1.25rem", "source": "styles.css:9"}
|
||||
},
|
||||
"font_weight": {
|
||||
"normal": {"value": "400", "source": "styles.css:12"},
|
||||
"medium": {"value": "500", "source": "styles.css:13"},
|
||||
"bold": {"value": "700", "source": "styles.css:14"}
|
||||
},
|
||||
"line_height": {
|
||||
"tight": {"value": "1.25", "source": "styles.css:18"},
|
||||
"normal": {"value": "1.5", "source": "styles.css:19"},
|
||||
"relaxed": {"value": "1.75", "source": "styles.css:20"}
|
||||
},
|
||||
"letter_spacing": {
|
||||
"tight": {"value": "-0.025em", "source": "styles.css:24"},
|
||||
"normal": {"value": "0", "source": "styles.css:25"},
|
||||
"wide": {"value": "0.025em", "source": "styles.css:26"}
|
||||
}
|
||||
},
|
||||
"spacing": {
|
||||
"0": {"value": "0", "source": "styles.css:30"},
|
||||
"1": {"value": "0.25rem", "source": "styles.css:31"},
|
||||
"2": {"value": "0.5rem", "source": "styles.css:32"},
|
||||
"3": {"value": "0.75rem", "source": "styles.css:33"},
|
||||
"4": {"value": "1rem", "source": "styles.css:34"},
|
||||
"6": {"value": "1.5rem", "source": "styles.css:35"},
|
||||
"8": {"value": "2rem", "source": "styles.css:36"},
|
||||
"12": {"value": "3rem", "source": "styles.css:37"}
|
||||
},
|
||||
"opacity": {
|
||||
"0": {"value": "0", "source": "styles.css:40"},
|
||||
"50": {"value": "0.5", "source": "styles.css:41"},
|
||||
"100": {"value": "1", "source": "styles.css:42"}
|
||||
},
|
||||
"border_radius": {
|
||||
"none": {"value": "0", "source": "styles.css:45"},
|
||||
"sm": {"value": "0.125rem", "source": "styles.css:46"},
|
||||
"base": {"value": "0.25rem", "source": "styles.css:47"},
|
||||
"lg": {"value": "0.5rem", "source": "styles.css:48"},
|
||||
"full": {"value": "9999px", "source": "styles.css:49"}
|
||||
},
|
||||
"shadows": {
|
||||
"sm": {"value": "0 1px 2px rgba(0,0,0,0.05)", "source": "theme.css:45"},
|
||||
"base": {"value": "0 1px 3px rgba(0,0,0,0.1)", "source": "theme.css:46"},
|
||||
"md": {"value": "0 4px 6px rgba(0,0,0,0.1)", "source": "theme.css:47"},
|
||||
"lg": {"value": "0 10px 15px rgba(0,0,0,0.1)", "source": "theme.css:48"}
|
||||
},
|
||||
"breakpoints": {
|
||||
"sm": {"value": "640px", "source": "media.scss:3"},
|
||||
"md": {"value": "768px", "source": "media.scss:4"},
|
||||
"lg": {"value": "1024px", "source": "media.scss:5"},
|
||||
"xl": {"value": "1280px", "source": "media.scss:6"}
|
||||
},
|
||||
"_metadata": {
|
||||
"extraction_source": "code_import",
|
||||
"files_analyzed": {
|
||||
"css": ["list of CSS/SCSS files read"],
|
||||
"js": ["list of JS/TS files read"],
|
||||
"html": ["list of HTML files read"]
|
||||
},
|
||||
"completeness": {
|
||||
"colors": "complete | partial | minimal",
|
||||
"typography": "complete | partial | minimal",
|
||||
"spacing": "complete | partial | minimal",
|
||||
"missing_categories": ["accent", "warning"],
|
||||
"recommendations": [
|
||||
"Define accent color for interactive elements",
|
||||
"Add semantic colors (warning, error, success)"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
2. **style-guide.md**
|
||||
- Design philosophy and usage guide
|
||||
- List extracted tokens by category
|
||||
- Document missing elements and recommendations
|
||||
|
||||
### style-guide.md Structure:
|
||||
|
||||
# Design System Style Guide
|
||||
|
||||
## Overview
|
||||
Extracted from code files: [list of source files]
|
||||
|
||||
## Colors
|
||||
- **Brand**: Primary, Secondary
|
||||
- **Surface**: Background, Card
|
||||
- **Semantic**: Success, Warning, Error
|
||||
- **Text**: Primary, Secondary
|
||||
- **Border**: Default
|
||||
|
||||
## Typography
|
||||
- **Font Families**: Base (system-ui), Heading (Georgia)
|
||||
- **Font Sizes**: xs to xl (0.75rem - 1.25rem)
|
||||
- **Font Weights**: Normal (400), Medium (500), Bold (700)
|
||||
|
||||
## Spacing
|
||||
System: 8px-grid (0, 0.25rem, 0.5rem, ..., 3rem)
|
||||
|
||||
## Missing Elements
|
||||
- Accent colors for interactive elements
|
||||
- Extended shadow scale
|
||||
|
||||
## Usage
|
||||
All tokens are production-ready and can be used with CSS variables.
|
||||
|
||||
|
||||
## Completeness Criteria
|
||||
- **colors**: ≥5 categories (brand, semantic, surface, text, border), ≥10 tokens
|
||||
- **typography**: ≥3 font families, ≥8 sizes, ≥5 weights
|
||||
- **spacing**: ≥8 values in consistent system
|
||||
- **shadows**: ≥3 elevation levels
|
||||
- **borders**: ≥3 radius values, ≥2 widths
|
||||
|
||||
## Critical Requirements
|
||||
- ✅ Can read ANY file type (CSS/SCSS/JS/TS/HTML) - not restricted to CSS only
|
||||
- ✅ Use Read() tool for each file you want to analyze (files are in SOURCE: ${source})
|
||||
- ✅ Cross-reference between file types for better extraction
|
||||
- ✅ Extract all visual token types systematically
|
||||
- ✅ Create style-extraction/style-1/ directory first: Bash(mkdir -p "${base_path}/style-extraction/style-1")
|
||||
- ✅ Use Write() to save both files:
|
||||
- ${base_path}/style-extraction/style-1/design-tokens.json
|
||||
- ${base_path}/style-extraction/style-1/style-guide.md
|
||||
- ✅ Include _metadata.completeness field to track missing content
|
||||
- ❌ NO external research or MCP calls
|
||||
## Code Import Specific Requirements
|
||||
- ✅ Read discovered-files.json FIRST to get file paths
|
||||
- ✅ Track extraction source for each token (file:line)
|
||||
- ✅ Include completeness assessment in _metadata
|
||||
- ✅ Normalize inconsistent values into systematic scales
|
||||
- ❌ NO external research or MCP calls (code-only extraction)
|
||||
`
|
||||
```
|
||||
|
||||
@@ -355,170 +221,54 @@ Task(ui-design-agent): `
|
||||
|
||||
```javascript
|
||||
Task(ui-design-agent): `
|
||||
[ANIMATION_TOKENS_EXTRACTION]
|
||||
Extract animation/transition tokens from ALL file types
|
||||
[ANIMATION_TOKEN_GENERATION_TASK]
|
||||
Extract animation tokens from code files using code import extraction pattern.
|
||||
|
||||
MODE: animation-extraction | SOURCE: ${source} | BASE_PATH: ${base_path}
|
||||
|
||||
## Input Files (Can reference ANY file type)
|
||||
## Input Files
|
||||
|
||||
**CSS/SCSS files (${css_count})**:
|
||||
$(cat "${intermediates_dir}/css-files.txt" 2>/dev/null | head -20)
|
||||
**Discovered Files**: ${intermediates_dir}/discovered-files.json
|
||||
$(cat "${intermediates_dir}/discovered-files.json" 2>/dev/null | grep -E '(count|files)' | head -30)
|
||||
|
||||
**JavaScript/TypeScript files (${js_count})**:
|
||||
$(cat "${intermediates_dir}/js-files.txt" 2>/dev/null | head -20)
|
||||
## Code Import Extraction Strategy
|
||||
|
||||
**HTML files (${html_count})**:
|
||||
$(cat "${intermediates_dir}/html-files.txt" 2>/dev/null | head -20)
|
||||
**Step 1: Load file list**
|
||||
- Read(${intermediates_dir}/discovered-files.json)
|
||||
- Extract: file_types.css.files, file_types.js.files, file_types.html.files
|
||||
|
||||
## Extraction Strategy
|
||||
**Step 2: Cross-source animation extraction**
|
||||
- CSS/SCSS: @keyframes, transitions, animation properties
|
||||
- JavaScript/TypeScript: Animation frameworks (Framer Motion, GSAP), CSS-in-JS
|
||||
- HTML: Inline styles, data-animation attributes
|
||||
|
||||
**You can read ALL file types** - Find animations anywhere:
|
||||
1. **CSS/SCSS**: @keyframes, transition properties, animation properties
|
||||
2. **JavaScript/TypeScript**: Animation configs (Framer Motion, GSAP, CSS-in-JS animations)
|
||||
3. **HTML**: Inline animation styles, data-animation attributes
|
||||
**Step 3: Framework detection & normalization**
|
||||
- Detect animation frameworks used (css-animations | framer-motion | gsap | none)
|
||||
- Normalize into semantic token system
|
||||
- Cross-reference CSS animations with JS configs
|
||||
|
||||
**Cross-reference**:
|
||||
- CSS animations referenced in JS configs
|
||||
- JS animation libraries with CSS class triggers
|
||||
- HTML elements with animation classes/attributes
|
||||
## Output Files
|
||||
|
||||
## Output Requirements
|
||||
**Target Directory**: ${base_path}/animation-extraction/
|
||||
|
||||
Generate 2 files in ${base_path}/animation-extraction/:
|
||||
1. animation-tokens.json (production-ready animation tokens)
|
||||
2. animation-guide.md (animation usage guide)
|
||||
**Files to Generate**:
|
||||
1. **animation-tokens.json**
|
||||
- Follow [ANIMATION_TOKEN_GENERATION_TASK] standard structure
|
||||
- Add "_metadata.framework_detected"
|
||||
- Add "_metadata.files_analyzed"
|
||||
- Add "_metadata.completeness"
|
||||
- Include "source" field for each token
|
||||
|
||||
### animation-tokens.json Structure:
|
||||
{
|
||||
"duration": {
|
||||
"instant": {"value": "0ms", "source": "animations.css:10"},
|
||||
"fast": {"value": "150ms", "source": "animations.css:12"},
|
||||
"base": {"value": "250ms", "source": "animations.css:13"},
|
||||
"slow": {"value": "500ms", "source": "animations.css:14"}
|
||||
},
|
||||
"easing": {
|
||||
"linear": {"value": "linear", "source": "animations.css:20"},
|
||||
"ease-in": {"value": "cubic-bezier(0.4, 0, 1, 1)", "source": "theme.js:45"},
|
||||
"ease-out": {"value": "cubic-bezier(0, 0, 0.2, 1)", "source": "theme.js:46"},
|
||||
"ease-in-out": {"value": "cubic-bezier(0.4, 0, 0.2, 1)", "source": "theme.js:47"}
|
||||
},
|
||||
"transitions": {
|
||||
"color": {
|
||||
"property": "color",
|
||||
"duration": "var(--duration-fast)",
|
||||
"easing": "var(--ease-out)",
|
||||
"source": "transitions.css:30"
|
||||
},
|
||||
"transform": {
|
||||
"property": "transform",
|
||||
"duration": "var(--duration-base)",
|
||||
"easing": "var(--ease-in-out)",
|
||||
"source": "transitions.css:35"
|
||||
},
|
||||
"opacity": {
|
||||
"property": "opacity",
|
||||
"duration": "var(--duration-fast)",
|
||||
"easing": "var(--ease-out)",
|
||||
"source": "transitions.css:40"
|
||||
}
|
||||
},
|
||||
"keyframes": {
|
||||
"fadeIn": {
|
||||
"name": "fadeIn",
|
||||
"keyframes": {
|
||||
"0%": {"opacity": "0"},
|
||||
"100%": {"opacity": "1"}
|
||||
},
|
||||
"source": "styles.css:67"
|
||||
},
|
||||
"slideInUp": {
|
||||
"name": "slideInUp",
|
||||
"keyframes": {
|
||||
"0%": {"transform": "translateY(20px)", "opacity": "0"},
|
||||
"100%": {"transform": "translateY(0)", "opacity": "1"}
|
||||
},
|
||||
"source": "styles.css:75"
|
||||
}
|
||||
},
|
||||
"interactions": {
|
||||
"button-hover": {
|
||||
"trigger": "hover",
|
||||
"properties": ["background-color", "transform"],
|
||||
"duration": "var(--duration-fast)",
|
||||
"easing": "var(--ease-out)",
|
||||
"source": "button.css:45"
|
||||
}
|
||||
},
|
||||
"_metadata": {
|
||||
"extraction_source": "code_import",
|
||||
"framework_detected": "css-animations | framer-motion | gsap | none",
|
||||
"files_analyzed": {
|
||||
"css": ["list of CSS/SCSS files read"],
|
||||
"js": ["list of JS/TS files read"],
|
||||
"html": ["list of HTML files read"]
|
||||
},
|
||||
"completeness": {
|
||||
"durations": "complete | partial | minimal",
|
||||
"easing": "complete | partial | minimal",
|
||||
"keyframes": "complete | partial | minimal",
|
||||
"missing_items": ["bounce easing", "slide animations"],
|
||||
"recommendations": [
|
||||
"Add slow duration for complex animations",
|
||||
"Define spring/bounce easing for interactive feedback"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
2. **animation-guide.md**
|
||||
- Animation system overview
|
||||
- Framework-specific usage guidelines
|
||||
|
||||
### animation-guide.md Structure:
|
||||
|
||||
# Animation System Guide
|
||||
|
||||
## Overview
|
||||
Extracted from code files: [list of source files]
|
||||
Framework detected: [css-animations | framer-motion | gsap | none]
|
||||
|
||||
## Durations
|
||||
- **Instant**: 0ms
|
||||
- **Fast**: 150ms (UI feedback)
|
||||
- **Base**: 250ms (standard transitions)
|
||||
- **Slow**: 500ms (complex animations)
|
||||
|
||||
## Easing Functions
|
||||
- **Linear**: Constant speed
|
||||
- **Ease-out**: Fast start, slow end (entering elements)
|
||||
- **Ease-in-out**: Smooth acceleration and deceleration
|
||||
|
||||
## Keyframe Animations
|
||||
- **fadeIn**: Opacity 0 → 1
|
||||
- **slideInUp**: Slide from bottom with fade
|
||||
|
||||
## Missing Elements
|
||||
- Bounce/spring easing for playful interactions
|
||||
- Slide-out animations
|
||||
|
||||
## Usage
|
||||
All animation tokens use CSS variables and can be referenced in transitions.
|
||||
|
||||
|
||||
## Completeness Criteria
|
||||
- **durations**: ≥3 (fast, medium, slow)
|
||||
- **easing**: ≥3 functions (ease-in, ease-out, ease-in-out)
|
||||
- **keyframes**: ≥3 animation types (fade, scale, slide)
|
||||
- **transitions**: ≥5 properties defined
|
||||
|
||||
## Critical Requirements
|
||||
- ✅ Can read ANY file type (CSS/SCSS/JS/TS/HTML)
|
||||
- ✅ Use Read() tool for each file you want to analyze (files are in SOURCE: ${source})
|
||||
- ✅ Detect animation framework if used
|
||||
- ✅ Extract all animation-related tokens
|
||||
- ✅ Create animation-extraction/ directory first: Bash(mkdir -p "${base_path}/animation-extraction")
|
||||
- ✅ Use Write() to save both files:
|
||||
- ${base_path}/animation-extraction/animation-tokens.json
|
||||
- ${base_path}/animation-extraction/animation-guide.md
|
||||
- ✅ Include _metadata.completeness field to track missing content
|
||||
- ❌ NO external research or MCP calls
|
||||
## Code Import Specific Requirements
|
||||
- ✅ Read discovered-files.json FIRST to get file paths
|
||||
- ✅ Detect animation framework if present
|
||||
- ✅ Track extraction source for each token (file:line)
|
||||
- ✅ Normalize framework-specific syntax into standard tokens
|
||||
- ❌ NO external research or MCP calls (code-only extraction)
|
||||
`
|
||||
```
|
||||
|
||||
@@ -528,140 +278,56 @@ Task(ui-design-agent): `
|
||||
|
||||
```javascript
|
||||
Task(ui-design-agent): `
|
||||
[LAYOUT_PATTERNS_EXTRACTION]
|
||||
Extract layout patterns and component structures from ALL file types
|
||||
[LAYOUT_TEMPLATE_GENERATION_TASK]
|
||||
Extract layout patterns from code files using code import extraction pattern.
|
||||
|
||||
MODE: layout-extraction | SOURCE: ${source} | BASE_PATH: ${base_path}
|
||||
|
||||
## Input Files (Can reference ANY file type)
|
||||
## Input Files
|
||||
|
||||
**CSS/SCSS files (${css_count})**:
|
||||
$(cat "${intermediates_dir}/css-files.txt" 2>/dev/null | head -20)
|
||||
**Discovered Files**: ${intermediates_dir}/discovered-files.json
|
||||
$(cat "${intermediates_dir}/discovered-files.json" 2>/dev/null | grep -E '(count|files)' | head -30)
|
||||
|
||||
**JavaScript/TypeScript files (${js_count})**:
|
||||
$(cat "${intermediates_dir}/js-files.txt" 2>/dev/null | head -20)
|
||||
## Code Import Extraction Strategy
|
||||
|
||||
**HTML files (${html_count})**:
|
||||
$(cat "${intermediates_dir}/html-files.txt" 2>/dev/null | head -20)
|
||||
**Step 1: Load file list**
|
||||
- Read(${intermediates_dir}/discovered-files.json)
|
||||
- Extract: file_types.css.files, file_types.js.files, file_types.html.files
|
||||
|
||||
## Extraction Strategy
|
||||
**Step 2: Cross-source layout extraction**
|
||||
- CSS/SCSS: Grid systems, flexbox utilities, layout classes, media queries
|
||||
- JavaScript/TypeScript: Layout components (React/Vue), grid configs
|
||||
- HTML: Semantic structure, component hierarchies
|
||||
|
||||
**You can read ALL file types** - Find layout patterns anywhere:
|
||||
1. **CSS/SCSS**: Grid systems, flexbox utilities, layout classes, media queries
|
||||
2. **JavaScript/TypeScript**: Layout components (React/Vue), grid configurations, responsive logic
|
||||
3. **HTML**: Layout structures, semantic patterns, component hierarchies
|
||||
**Step 3: System identification**
|
||||
- Detect naming convention (BEM | SMACSS | utility-first | css-modules)
|
||||
- Identify layout system (12-column | flexbox | css-grid | custom)
|
||||
- Extract responsive strategy and breakpoints
|
||||
|
||||
**Cross-reference**:
|
||||
- HTML structure + CSS classes → layout system
|
||||
- JS components + CSS styles → component patterns
|
||||
- Responsive classes across all file types
|
||||
## Output Files
|
||||
|
||||
## Output Requirements
|
||||
**Target Directory**: ${base_path}/layout-extraction/
|
||||
|
||||
Generate 1 file: ${base_path}/layout-extraction/layout-templates.json
|
||||
**File to Generate**:
|
||||
**layout-templates.json**
|
||||
- Follow [LAYOUT_TEMPLATE_GENERATION_TASK] standard structure
|
||||
- Add "extraction_metadata" section:
|
||||
* extraction_source: "code_import"
|
||||
* naming_convention: detected convention
|
||||
* layout_system: {type, confidence, source_files}
|
||||
* responsive: {breakpoints, mobile_first, source}
|
||||
* completeness: {status, missing_items, recommendations}
|
||||
- For each component in "layout_templates":
|
||||
* Include "source" field (file:line)
|
||||
* dom_structure with semantic HTML5
|
||||
* css_layout_rules using var() placeholders
|
||||
|
||||
### layout-templates.json Structure:
|
||||
{
|
||||
"extraction_metadata": {
|
||||
"extraction_source": "code_import",
|
||||
"analysis_time": "ISO8601 timestamp",
|
||||
"files_analyzed": {
|
||||
"css": ["list of CSS/SCSS files read"],
|
||||
"js": ["list of JS/TS files read"],
|
||||
"html": ["list of HTML files read"]
|
||||
},
|
||||
"naming_convention": "BEM | SMACSS | utility-first | css-modules | custom",
|
||||
"layout_system": {
|
||||
"type": "12-column | flexbox | css-grid | custom",
|
||||
"confidence": "high | medium | low",
|
||||
"container_classes": ["container", "wrapper"],
|
||||
"row_classes": ["row"],
|
||||
"column_classes": ["col-1", "col-md-6"],
|
||||
"source_files": ["grid.css", "Layout.jsx"]
|
||||
},
|
||||
"responsive": {
|
||||
"breakpoint_prefixes": ["sm:", "md:", "lg:", "xl:"],
|
||||
"mobile_first": true,
|
||||
"breakpoints": {
|
||||
"sm": "640px",
|
||||
"md": "768px",
|
||||
"lg": "1024px",
|
||||
"xl": "1280px"
|
||||
},
|
||||
"source": "responsive.scss:5"
|
||||
},
|
||||
"completeness": {
|
||||
"layout_system": "complete | partial | minimal",
|
||||
"components": "complete | partial | minimal",
|
||||
"responsive": "complete | partial | minimal",
|
||||
"missing_items": ["gap utilities", "modal", "dropdown"],
|
||||
"recommendations": [
|
||||
"Add gap utilities for consistent spacing in grid layouts",
|
||||
"Define modal/dropdown/tabs component patterns"
|
||||
]
|
||||
}
|
||||
},
|
||||
"layout_templates": [
|
||||
{
|
||||
"target": "button",
|
||||
"variant_id": "layout-1",
|
||||
"device_type": "responsive",
|
||||
"component_type": "component",
|
||||
"dom_structure": {
|
||||
"tag": "button",
|
||||
"classes": ["btn", "btn-primary"],
|
||||
"children": [
|
||||
{"tag": "span", "classes": ["btn-text"], "content": "{{text}}"}
|
||||
],
|
||||
"variants": {
|
||||
"primary": {"classes": ["btn", "btn-primary"]},
|
||||
"secondary": {"classes": ["btn", "btn-secondary"]}
|
||||
},
|
||||
"sizes": {
|
||||
"sm": {"classes": ["btn-sm"]},
|
||||
"base": {"classes": []},
|
||||
"lg": {"classes": ["btn-lg"]}
|
||||
},
|
||||
"states": ["hover", "active", "disabled"]
|
||||
},
|
||||
"css_layout_rules": "display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-2) var(--spacing-4); border-radius: var(--radius-base);",
|
||||
"source": "button.css:12"
|
||||
},
|
||||
{
|
||||
"target": "card",
|
||||
"variant_id": "layout-1",
|
||||
"device_type": "responsive",
|
||||
"component_type": "component",
|
||||
"dom_structure": {
|
||||
"tag": "div",
|
||||
"classes": ["card"],
|
||||
"children": [
|
||||
{"tag": "div", "classes": ["card-header"], "content": "{{title}}"},
|
||||
{"tag": "div", "classes": ["card-body"], "content": "{{content}}"},
|
||||
{"tag": "div", "classes": ["card-footer"], "content": "{{footer}}"}
|
||||
]
|
||||
},
|
||||
"css_layout_rules": "display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-4); background: var(--color-surface-card);",
|
||||
"source": "card.css:25"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
## Completeness Criteria
|
||||
- **layout_system**: Clear grid/flexbox system identified
|
||||
- **components**: ≥5 component patterns (button, card, input, modal, dropdown)
|
||||
- **responsive**: ≥3 breakpoints, clear mobile-first strategy
|
||||
- **naming_convention**: Consistent pattern identified
|
||||
|
||||
## Critical Requirements
|
||||
- ✅ Can read ANY file type (CSS/SCSS/JS/TS/HTML)
|
||||
- ✅ Use Read() tool for each file you want to analyze (files are in SOURCE: ${source})
|
||||
- ✅ Identify naming conventions and layout systems
|
||||
- ✅ Extract component patterns with variants and states
|
||||
- ✅ Create layout-extraction/ directory first: Bash(mkdir -p "${base_path}/layout-extraction")
|
||||
- ✅ Use Write() to save: ${base_path}/layout-extraction/layout-templates.json
|
||||
- ✅ Include extraction_metadata.completeness field to track missing content
|
||||
- ❌ NO external research or MCP calls
|
||||
## Code Import Specific Requirements
|
||||
- ✅ Read discovered-files.json FIRST to get file paths
|
||||
- ✅ Detect and document naming conventions
|
||||
- ✅ Identify layout system with confidence level
|
||||
- ✅ Extract component variants and states from usage patterns
|
||||
- ❌ NO external research or MCP calls (code-only extraction)
|
||||
`
|
||||
```
|
||||
|
||||
@@ -706,9 +372,7 @@ ${base_path}/
|
||||
│ └── layout-templates.json # Layout patterns and component structures
|
||||
└── .intermediates/
|
||||
└── import-analysis/
|
||||
├── css-files.txt # Discovered CSS/SCSS files
|
||||
├── js-files.txt # Discovered JS/TS files
|
||||
└── html-files.txt # Discovered HTML files
|
||||
└── discovered-files.json # All discovered files (JSON format)
|
||||
```
|
||||
|
||||
**Files**:
|
||||
@@ -737,9 +401,7 @@ ${base_path}/
|
||||
- Component patterns with DOM structure and CSS rules
|
||||
|
||||
**Intermediate Files**: `.intermediates/import-analysis/`
|
||||
- `css-files.txt` - Discovered CSS/SCSS files
|
||||
- `js-files.txt` - Discovered JS/TS files
|
||||
- `html-files.txt` - Discovered HTML files
|
||||
- `discovered-files.json` - All discovered files in JSON format with counts and metadata
|
||||
|
||||
---
|
||||
|
||||
@@ -763,4 +425,4 @@ ${base_path}/
|
||||
3. **Specify target design run**: Use `--design-id` for existing design run or `--session` to use session's latest design run (one of these is required)
|
||||
4. **Cross-reference agent reports**: Compare all three completeness reports (style, animation, layout) to identify gaps
|
||||
5. **Review missing content**: Check `_metadata.completeness` field in reports for actionable improvements
|
||||
6. **Verify file discovery**: Check `${base_path}/.intermediates/import-analysis/*-files.txt` if agents report no data
|
||||
6. **Verify file discovery**: Check `${base_path}/.intermediates/import-analysis/discovered-files.json` if agents report no data
|
||||
|
||||
73
.claude/scripts/discover-design-files.sh
Normal file
73
.claude/scripts/discover-design-files.sh
Normal file
@@ -0,0 +1,73 @@
|
||||
#!/usr/bin/env bash
|
||||
# discover-design-files.sh - Discover design-related files and output JSON
|
||||
# Usage: discover-design-files.sh <source_dir> <output_json>
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
source_dir="${1:-.}"
|
||||
output_json="${2:-discovered-files.json}"
|
||||
|
||||
# Function to find and format files as JSON array
|
||||
find_files() {
|
||||
local pattern="$1"
|
||||
local files
|
||||
files=$(find "$source_dir" -type f $pattern \
|
||||
! -path "*/node_modules/*" \
|
||||
! -path "*/dist/*" \
|
||||
! -path "*/.git/*" \
|
||||
! -path "*/build/*" \
|
||||
! -path "*/coverage/*" \
|
||||
2>/dev/null | sort || true)
|
||||
|
||||
local count=$(echo "$files" | grep -c . || echo 0)
|
||||
local json_files=""
|
||||
|
||||
if [ $count -gt 0 ]; then
|
||||
json_files=$(echo "$files" | awk '{printf "\"%s\"%s\n", $0, (NR<'$count'?",":"")}' | tr '\n' ' ')
|
||||
fi
|
||||
|
||||
echo "$count|$json_files"
|
||||
}
|
||||
|
||||
# Discover CSS/SCSS files
|
||||
css_result=$(find_files '\( -name "*.css" -o -name "*.scss" \)')
|
||||
css_count=${css_result%%|*}
|
||||
css_files=${css_result#*|}
|
||||
|
||||
# Discover JS/TS theme files
|
||||
js_result=$(find_files '\( -name "*.js" -o -name "*.ts" -o -name "*.jsx" -o -name "*.tsx" \) -a \( -name "*theme*" -o -name "*config*" -o -name "*style*" -o -name "*color*" \)')
|
||||
js_count=${js_result%%|*}
|
||||
js_files=${js_result#*|}
|
||||
|
||||
# Discover HTML files
|
||||
html_result=$(find_files '-name "*.html"')
|
||||
html_count=${html_result%%|*}
|
||||
html_files=${html_result#*|}
|
||||
|
||||
# Calculate total
|
||||
total_count=$((css_count + js_count + html_count))
|
||||
|
||||
# Generate JSON
|
||||
cat > "$output_json" << EOF
|
||||
{
|
||||
"discovery_time": "$(date -u +%Y-%m-%dT%H:%M:%SZ)",
|
||||
"source_directory": "$(cd "$source_dir" && pwd)",
|
||||
"file_types": {
|
||||
"css": {
|
||||
"count": $css_count,
|
||||
"files": [${css_files}]
|
||||
},
|
||||
"js": {
|
||||
"count": $js_count,
|
||||
"files": [${js_files}]
|
||||
},
|
||||
"html": {
|
||||
"count": $html_count,
|
||||
"files": [${html_files}]
|
||||
}
|
||||
},
|
||||
"total_files": $total_count
|
||||
}
|
||||
EOF
|
||||
|
||||
echo "Discovered: CSS=$css_count, JS=$js_count, HTML=$html_count (Total: $total_count)" >&2
|
||||
Reference in New Issue
Block a user