Patterns for implementing UI improvements based on design analysis.
Works with review documents from dev:ui-analyse or /dev:ui command.
Includes Anti-AI design rules and visual verification.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
Patterns for implementing UI improvements based on design analysis.
Works with review documents from dev:ui-analyse or /dev:ui command.
Includes Anti-AI design rules and visual verification.
UI Implementation Skill
Overview
This skill provides patterns for implementing UI improvements based on design analysis. It transforms review findings into code changes following Anti-AI design principles.
Relationship to Other Skills
Skill
Purpose
Modifies Code?
dev:ui-analyse
Visual analysis, issue detection
No
dev:ui-implement
Apply improvements from analysis
Yes
dev:ui-style-format
Style file specification
No
dev:design-references
Reference image management
No
Prerequisite
This skill assumes analysis has been completed using:
dev:ui-analyse skill
/dev:ui command output
External design review
Before implementing, ensure you have:
A review document with identified issues
Component path(s) to modify
Understanding of the visual metaphor to apply
Implementation Workflow
Phase 1: Parse Review Document
Extract actionable items from the review document.
# Extract actionable items from reviewparse_review() {
local review_path="$1"# Extract CRITICAL and HIGH issues
grep -A 2 "^\[CRITICAL\]""$review_path"
grep -A 2 "^\[HIGH\]""$review_path"
}
What to Look For:
CRITICAL issues (fix immediately)
HIGH issues (fix before release)
Specific component locations
Recommended changes
Phase 2: Visual Context (Optional)
If Gemini available and screenshot provided, understand the current visual state.
# Understand current visual state
npx claudish --model "$GEMINI_MODEL" --image "$CURRENT_SCREENSHOT" --quiet --auto-approve <<< "
Describe the current UI implementation:
1. Layout structure
2. Color scheme
3. Typography
4. Animation presence
5. Areas needing improvement
Output as structured data for implementation."
Provider Detection:
# Check providers in priority orderif [[ -n "$GEMINI_API_KEY" ]]; then
GEMINI_MODEL="g/gemini-3-pro-preview"elif [[ -n "$OPENROUTER_API_KEY" ]]; then
GEMINI_MODEL="or/google/gemini-3-pro-preview"elif [[ -n "$GOOGLE_APPLICATION_CREDENTIALS" ]]; then
GEMINI_MODEL="vertex/gemini-3-pro-preview"else
GEMINI_MODEL=""# Text-only modefi
Phase 3: Apply Anti-AI Improvements
Apply the five core Anti-AI design rules to transform generic UI into distinctive design.
See Anti-AI Design Rules section below for detailed patterns.
Phase 4: Visual Verification (Optional)
If Gemini available after changes, verify improvements were applied correctly.
