catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-05 01:50:27 +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
- 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**
- Detect naming convention (BEM | SMACSS | utility-first | css-modules)
- 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)
- For each component in "layout_templates":
* Include "source" field (file:line)
* **Include "component_type" field: "universal" | "specialized"**
* dom_structure with semantic HTML5
* css_layout_rules using var() placeholders
* Add "description" field explaining component purpose and classification rationale
**Code Snippet Recording**:
- Record actual layout/component code in `extraction_metadata.code_snippets`
@@ -334,7 +340,11 @@ Task(ui-design-agent): `
- ✅ Detect and document naming conventions
- ✅ Identify layout system with confidence level
- ✅ 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)
- ✅ **Document classification rationale** in component description
- ❌ 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
- 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
- Show DOM structure with proper styling
- Include usage code snippets in <details> tags
- Clearly label component types (universal vs specialized)
### Section 4: Spacing & Layout
- Visual spacing scale
@@ -252,8 +255,10 @@ Task(ui-design-agent): `
- ✅ Generate complete, interactive showcase HTML
- ✅ All CSS uses var() references to design tokens
- ✅ Display ALL components from layout-templates.json
- ✅ **Separate universal components from specialized components** in the showcase
- ✅ Display component DOM structures with proper styling
- ✅ Include usage code snippets
- ✅ Label each component type clearly (Universal / Specialized)
- ✅ Use Write() to save both files:
- ${package_dir}/preview.html
- ${package_dir}/preview.css