init

.opencode/skills/frontend-design/references/workflow-immersive.md

@@ -0,0 +1,87 @@
+# Immersive Design Workflow
+
+Create award-quality designs with storytelling, 3D experiences, and micro-interactions.
+
+## Prerequisites
+- Activate `ck:ui-ux-pro-max` skill first
+
+## Initial Research
+Run `ck:ui-ux-pro-max` searches:
+```bash
+python3 .opencode/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product
+python3 .opencode/skills/ui-ux-pro-max/scripts/search.py "<style-keywords>" --domain style
+python3 .opencode/skills/ui-ux-pro-max/scripts/search.py "<mood>" --domain typography
+python3 .opencode/skills/ui-ux-pro-max/scripts/search.py "<industry>" --domain color
+```
+
+## Workflow Steps
+
+### 1. Research Phase
+Use `researcher` subagent to investigate:
+- Design style and current trends
+- Font combinations and typography
+- Color theory for the context
+- Border and spacing patterns
+- Element positioning principles
+- Animation and interaction patterns
+
+### 2. Design Implementation
+Use `ui-ux-designer` subagent:
+- Build step by step from research
+- Create plan with `## Naming` pattern
+- Default to HTML/CSS/JS if unspecified
+
+### 3. Storytelling Elements
+Incorporate:
+- Narrative flow through scroll
+- Emotional pacing
+- Visual hierarchy for story beats
+- Progressive disclosure of content
+
+### 4. 3D Experiences
+If applicable, integrate:
+- Three.js scenes
+- Interactive 3D elements
+- Parallax depth effects
+- WebGL enhancements
+
+### 5. Micro-interactions
+Add polish:
+- Button feedback
+- Form interactions
+- Loading states
+- Hover effects
+- Scroll responses
+
+### 6. Asset Generation
+Use `ck:ai-multimodal` skill:
+- Generate high-quality visuals
+- Create unique imagery
+- Verify asset quality
+- Remove backgrounds as needed
+
+### 7. Verify & Report
+- Review against inspiration
+- Report to user
+- Request approval
+- Update `./docs/design-guidelines.md`
+
+## Quality Standards
+Match award-winning sites:
+- Dribbble top shots
+- Behance featured
+- Awwwards winners
+- Mobbin patterns
+- TheFWA selections
+
+## Design Principles
+- **Bold aesthetic choices**: Commit fully to direction
+- **Attention to detail**: Every pixel matters
+- **Cohesive experience**: All elements work together
+- **Memorable moments**: Create surprise and delight
+- **Technical excellence**: Performance + polish
+
+## Related
+- `workflow-3d.md` - 3D implementation details
+- `animejs.md` - Animation patterns
+- `technical-best-practices.md` - Quality guidelines