ui-implement

What this skill does

# 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.

```bash
# 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.

```bash
# 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**:

```bash
# 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
```

### 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.

```bash
# Verify improvements
npx claudish --model "$GEMINI_MODEL" --image "$NEW_SCREENSHOT" --quiet --auto-approve <<< "
Verify these improvements were applied:
1. Asymmetric layout: {expected}
2. Texture/depth: {expected}
3. Typography drama: {expected}
4. Micro-interactions: {expected}
5. Bespoke colors: {expected}

Score 1-10 and note any remaining issues."
```

## Anti-AI Design Rules

These rules transform generic, AI-generated looking UI into distinctive, human-crafted designs.

### Rule 1: Break Symmetry

Rigid symmetric grids look AI-generated. Break them with asymmetric bento layouts.

```tsx
// BEFORE: Symmetric grid
<div className="grid grid-cols-3 gap-4">

// AFTER: Asymmetric bento
<div className="grid grid-cols-12 gap-6">
  <div className="col-span-7 row-span-2" />
  <div className="col-span-5" />
  <div className="col-span-3" />
  <div className="col-span-2 -mt-8" />
</div>
```

**Key Techniques**:
- Use 12-column grids for flexibility
- Vary column spans (7+5, not 6+6)
- Use negative margins for overlap
- Vary row heights
- Break alignment intentionally

### Rule 2: Add Texture

Flat solid colors look AI-generated. Add gradients, glass effects, and depth.

```tsx
// BEFORE: Flat
<div className="bg-white rounded-lg">

// AFTER: Textured
<div className="
  bg-gradient-to-br from-white/80 to-white/40
  backdrop-blur-xl
  border border-white/20
  shadow-[0_8px_32px_rgba(0,0,0,0.08),inset_0_1px_0_rgba(255,255,255,0.6)]
">
```

**Key Techniques**:
- Gradient backgrounds (subtle, directional)
- Glassmorphism (backdrop-blur + semi-transparent)
- Complex shadows with inset highlights
- Border with alpha for subtle edges
- Noise texture overlays

### Rule 3: Dramatic Typography

Generic typography looks AI-generated. Create dramatic visual hierarchy.

```tsx
// BEFORE: Generic
<h1 className="text-2xl font-bold">Welcome</h1>

// AFTER: Dramatic
<h1 className="
  text-[clamp(4rem,15vw,12rem)]
  font-serif font-thin tracking-[-0.04em]
  leading-[0.85]
  bg-gradient-to-r from-zinc-900 via-zinc-600 to-zinc-900
  bg-clip-text text-transparent
">
  Welcome
</h1>
```

**Key Techniques**:
- Fluid typography with clamp()
- Extreme size contrasts (body 16px, hero 120px+)
- Tight line-height for headlines (0.85-0.95)
- Negative letter-spacing for large text
- Gradient text with bg-clip-text
- Mix serif/sans-serif for contrast

### Rule 4: Micro-Interactions

Static elements look AI-generated. Add motion and feedback.

```tsx
// BEFORE: Static
<button className="bg-blue-500 hover:bg-blue-600">

// AFTER: Reactive
<motion.button
  whileHover={{ scale: 1.02, y: -2 }}
  whileTap={{ scale: 0.98 }}
  transition={{ type: "spring", stiffness: 400, damping: 17 }}
  className="
    bg-gradient-to-r from-violet-600 to-indigo-600
    hover:shadow-[0_0_40px_rgba(139,92,246,0.4)]
    transition-shadow duration-300
  "
>
```

**Key Techniques**:
- Spring physics for natural feel
- Subtle scale on hover (1.02-1.05)
- Y-axis lift effect
- Shadow glow expansion
- Staggered animations for lists
- Exit animations (not just enter)

### Rule 5: Bespoke Colors

Default Tailwind colors look AI-generated. Create custom palettes.

```tsx
// BEFORE: Default palette
<div className="bg-blue-500 text-white">

// AFTER: Bespoke palette
<div className="
  bg-[#0D0D0D]
  text-[#E8E4DD]
  bg-gradient-to-br
  from-[#1a1a2e] via-[#16213e] to-[#0f3460]
">
```

**Key Techniques**:
- Custom hex colors (not Tailwind defaults)
- Off-whites instead of pure white (#E8E4DD, #FAF9F6)
- Rich blacks instead of pure black (#0D0D0D, #1a1a2e)
- Color gradients across multiple stops
- Consistent palette derived from style guide

## Visual Metaphor Library

When implementing, select an appropriate visual metaphor to guide decisions.

| Metaphor | Use Case | Key Characteristics |
|----------|----------|---------------------|
| Cyberpunk Glass | Dashboards, tech | Neon accents + glassmorphism + dark backgrounds |
| Swiss Minimalist | Professional, B2B | Strict grid + high contrast + precise spacing |
| Neo-Brutalism | Creative, bold | Thick borders + clashing colors + raw shapes |
| Organic Luxury | Premium, fashion | Warm neutrals + serif typography + slow motion |
| Editorial Magazine | Marketing, content | Large display type + asymmetric images + whitespace |

**Applying a Metaphor**:
1. Choose based on brand/context
2. Apply consistent characteristics across all changes
3. Document choice in implementation log
4. Verify consistency in visual check

## Required Dependencies

Ensure these are installed before implementing micro-interactions:

```bash
npm install framer-motion lucide-react
# or
bun add framer-motion lucide-react
```

**Dependency Usage**:
- `framer-motion`: All animation and gesture handling
- `lucide-react`: Icon library (consistent, customizable)

## Implementation Log Format

When completing implementation, create a log documenting all changes.

```markdown
## Implementation Log

**Component**: {component_path}
**Session**: {session_id}
**Date**: {timestamp}

### Changes Applied

1. **{Issue from Review}**
   - Before: {description}
   - After: {description}
   - Code: {file:line}

2. **{Issue from Review}**
   - Before: {description}
   - After: {description}
   - Code: {file:line}

### Visual Metaphor

{metaphor_name}: {brief explanation of why chosen and how applied}

### Anti-AI Rules Applied

- [x] Rule 1: Break Symmetry - {how applied}
- [x] Rule 2: Add Texture - {how applied}
- [x] Rule 3: Dramatic Typography - {ho