frontend-implement

Frontend 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?
designer:ui-analyse	Visual analysis, issue detection (requires designer plugin)	No
dev:frontend-implement	Apply improvements from analysis	Yes
designer:ui-style-format	Style file specification (requires designer plugin)	No
designer:design-references	Reference image management (requires designer plugin)	No

Prerequisite

This skill assumes analysis has been completed using:

• designer:ui-analyse skill (requires designer plugin)
• /designer: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."

Model Resolution:

Pick a vision-capable model from list_models (claudish MCP) and assign to GEMINI_MODEL. If the key is absent or the file does not exist, set GEMINI_MODEL="" to fall back to text-only mode.