ui-implement

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:

1. A review document with identified issues
2. Component path(s) to modify
3. 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 review
parse_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 order
if [[ -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 mode
fi