← ClaudeAtlas

creo-design-implementlisted

Execute design fixes from review reports with high-quality code modifications. Implements responsive design corrections, accessibility improvements, component consistency fixes, and visual polish. Trigger keywords: design implement, fix design, implement review, responsive fix, accessibility fix.
oyusypenko/creo · ★ 4 · Web & Frontend · score 77
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 - *