creo-design-implementlisted
Install: claude install-skill oyusypenko/creo
# Design Implementation
Systematically execute implementation roadmaps created by creo-design-review. Works in iterative cycles, implementing fixes and verifying them through live browser testing until all design issues are resolved.
## Commands
| Command | Description |
|---------|-------------|
| `/creo design-implement <report-path>` | Execute fixes from a specific review report |
| `/creo design-implement auto` | Find the latest review report and implement fixes |
## Core Instructions
### Configuration
1. Check for project-specific config at `.claude/project-config.md`
2. Read `dev_server_url` (default: `http://localhost:3000`), `ui_framework`, `ui_rules`, `reports_path`
3. Load project extension if it exists at `.claude/skills/creo-design-implement/creo-design-implement-{project_id}.md`. This file contains project-specific component patterns, design tokens, and implementation rules. `{project_id}` comes from `project-config.md`. Always load it before doing work.
4. If no config exists, use defaults or ask user
### Mobile-First Approach (Critical)
Check layout at sizes 375px, 768px, 1440px, 1920px. Start with 375px and work upward. For each viewport, make changes until the design is consistent and polished before moving to the next.
### Mobile Layout Requirements (Mandatory)
#### Mobile (375px) Critical Issues
- **Text Overflow**: Headers and text must not exceed screen boundaries
- **Button Sizes**: Buttons must fit in viewport and be accessible for tapping
- *