catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-12 02:37:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui-design): enhance component classification in import and reference page generation

Browse Source
This commit is contained in:
catlog22
2025-11-11 20:36:49 +08:00
parent 7184a3be66
commit 7ca1d06cfe
2 changed files with 15 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.claude/commands/workflow/ui-design/import-from-code.md
View File

@@ -297,6 +297,10 @@ Task(ui-design-agent): `
- JavaScript/TypeScript: Layout components (React/Vue), grid configs - JavaScript/TypeScript: Layout components (React/Vue), grid configs
- HTML: Semantic structure, component hierarchies - HTML: Semantic structure, component hierarchies
**Component Classification** (MUST annotate in extraction):
- **Universal Components**: Reusable multi-component templates (buttons, inputs, cards, modals, etc.)
- **Specialized Components**: Module-specific components from code (feature-specific layouts, custom widgets, domain components)
**Step 3: System identification** **Step 3: System identification**
- Detect naming convention (BEM | SMACSS | utility-first | css-modules) - Detect naming convention (BEM | SMACSS | utility-first | css-modules)
- Identify layout system (12-column | flexbox | css-grid | custom) - Identify layout system (12-column | flexbox | css-grid | custom)
@@ -319,8 +323,10 @@ Task(ui-design-agent): `
* code_snippets: Map of code snippets (same format as Style Agent) * code_snippets: Map of code snippets (same format as Style Agent)
- For each component in "layout_templates": - For each component in "layout_templates":
* Include "source" field (file:line) * Include "source" field (file:line)
* **Include "component_type" field: "universal" | "specialized"**
* dom_structure with semantic HTML5 * dom_structure with semantic HTML5
* css_layout_rules using var() placeholders * css_layout_rules using var() placeholders
* Add "description" field explaining component purpose and classification rationale
**Code Snippet Recording**: **Code Snippet Recording**:
- Record actual layout/component code in `extraction_metadata.code_snippets` - Record actual layout/component code in `extraction_metadata.code_snippets`
@@ -334,7 +340,11 @@ Task(ui-design-agent): `
- ✅ Detect and document naming conventions - ✅ Detect and document naming conventions
- ✅ Identify layout system with confidence level - ✅ Identify layout system with confidence level
- ✅ Extract component variants and states from usage patterns - ✅ Extract component variants and states from usage patterns
- ✅ **Classify each component as "universal" or "specialized"** based on:
* Universal: Reusable across multiple features (buttons, inputs, cards, modals)
* Specialized: Feature-specific or domain-specific (checkout form, dashboard widget)
- ✅ Record complete code snippets in extraction_metadata.code_snippets (complete components/structures) - ✅ Record complete code snippets in extraction_metadata.code_snippets (complete components/structures)
- ✅ **Document classification rationale** in component description
- ❌ NO external research or web searches (code-only extraction) - ❌ NO external research or web searches (code-only extraction)
` `
``` ```

5
.claude/commands/workflow/ui-design/reference-page-generator.md
View File

@@ -213,9 +213,12 @@ Task(ui-design-agent): `
### Section 3: Components ### Section 3: Components
- Render all components from layout-templates.json (use layout_templates field) - Render all components from layout-templates.json (use layout_templates field)
- **Universal Components**: Display reusable multi-component showcases (buttons, inputs, cards, etc.)
- **Specialized Components**: Display module-specific components from code (feature-specific layouts, custom widgets)
- Display all variants side-by-side - Display all variants side-by-side
- Show DOM structure with proper styling - Show DOM structure with proper styling
- Include usage code snippets in <details> tags - Include usage code snippets in <details> tags
- Clearly label component types (universal vs specialized)
### Section 4: Spacing & Layout ### Section 4: Spacing & Layout
- Visual spacing scale - Visual spacing scale
@@ -252,8 +255,10 @@ Task(ui-design-agent): `
- ✅ Generate complete, interactive showcase HTML - ✅ Generate complete, interactive showcase HTML
- ✅ All CSS uses var() references to design tokens - ✅ All CSS uses var() references to design tokens
- ✅ Display ALL components from layout-templates.json - ✅ Display ALL components from layout-templates.json
- ✅ **Separate universal components from specialized components** in the showcase
- ✅ Display component DOM structures with proper styling - ✅ Display component DOM structures with proper styling
- ✅ Include usage code snippets - ✅ Include usage code snippets
- ✅ Label each component type clearly (Universal / Specialized)
- ✅ Use Write() to save both files: - ✅ Use Write() to save both files:
- ${package_dir}/preview.html - ${package_dir}/preview.html
- ${package_dir}/preview.css - ${package_dir}/preview.css