frontend-master

Frontend Master Skill

Frontend UI/UX implementation workflow using Gemini CLI in --yolo mode. For image-based tasks, Gemini analyzes the image first, then implements based on that analysis.

Routing Rules

USE this skill

• Visual properties: colors, backgrounds, borders, shadows
• Layout: flexbox, grid, margins, padding, positioning
• Typography: font sizes, weights, line heights
• Animation: transitions, keyframes, hover states
• Responsive design: breakpoints, media queries
• Component styling: Tailwind, CSS-in-JS, styled-components
• Image-based frontend: generate/modify components from screenshots, mockups, design exports

DO NOT use this skill

• Pure logic: API calls, state management, event handlers
• Type definitions, utility functions, business logic
• Logic optimization or non-frontend image tasks → use logic-master

---

Workflow

Task received
     │
     ▼
┌──────────┐     ┌─────────────────┐     ┌──────────────┐     ┌────────────┐
│  Image   │ Yes │ Phase 1:        │     │ Phase 2:     │     │  Verify    │
│  input   ├────►│ Gemini image    ├────►│ Gemini       ├────►│  lsp_diag  │
│  exists? │     │ analysis (@ref) │     │ --yolo impl  │     │  nostics   │
└────┬─────┘     └─────────────────┘     └──────┬───────┘     └────────────┘
     │ No                                       ▲
     └──────────────────────────────────────────┘

Step 1: Detect image input

Check if the task includes image files (.png, .jpg, .jpeg, .webp, .gif, .svg, .pdf).

Step 2: Branch execution

Image exists → 2-phase pipeline (Phase 1 → Phase 2) No image → Direct execution (Phase 2 only)

Step 3: Verify results

Run lsp_diagnostics to check for type/build errors and fix them.

---

Phase 1: Gemini Image Analysis

Reference image paths with @ to extract UI structure. Save results to a temp file.

ANALYSIS_PROMPT=$(cat <<'PROMPT'
@<image-path>
Analyze this UI image and organize in the following format:
1. LAYOUT: Overall layout structure (flex/grid, direction, alignment)
2. COMPONENTS: UI component list and hierarchy
3. COLORS: Color palette (hex codes)
4. TYPOGRAPHY: Font sizes, weights, line heights
5. SPACING: Margins, padding, gap values (px/rem estimates)
6. INTERACTIONS: Buttons, links, hover states and interactive elements
7. RESPONSIVE: Responsive design considerations
PROMPT
)

gemini --yolo -p "$ANALYSIS_PROMPT" > /tmp/ui-analysis.md

Analysis Prompt Variants

Scenario	Prompt focus
Simple component	@<img> + map to Tailwind classes
Complex layout	@<img> + detailed hierarchy, grid system, spacing
Before/After comparison	@<before> @<after> + diff changes in CSS/Tailwind
Responsive comparison	@<desktop> @<mobile> + breakpoint differences
Design system extraction	@<img> + map to color/typo/spacing tokens
Error screenshot	@<img> + identify rendering issues and CSS fixes

Single Component Analysis

ANALYSIS_PROMPT=$(cat <<'PROMPT'
@<image-path>
Focus only on the [component-name] section. Analyze and map to Tailwind CSS classes.
PROMPT
)
gemini --yolo -p "$ANALYSIS_PROMPT" > /tmp/ui-analysis.md

Multi-Image Analysis

ANALYSIS_PROMPT=$(cat <<'PROMPT'
@<desktop.png> @<mobile.png>
Compare and analyze both images:
1. Desktop layout structure
2. Mobile layout structure
3. Responsive transition points
4. Common and differing elements
5. Tailwind breakpoint mapping
PROMPT
)
gemini --yolo -p "$ANALYSIS_PROMPT" > /tmp/ui-analysis.md

---

Phase 2: Gemini --yolo Implementation

With image analysis results

Inject analysis into the implementation prompt.

ANALYSIS=$(cat /tmp/ui-analysis.md)

gemini --yolo -p "Implement based on the following UI analysis:

--- UI ANALYSIS ---
${ANALYSIS}
--- END ANALYSIS ---

Implementation requirements:
- Follow existing CSS framework/patterns in the project
- Use semantic HTML structure
- Include responsive design
- Consider accessibility (a11y)

Target file: <target-file-path>" \
  --include-directories <relevant-dirs>

Direct execution (no image)

# With file context
cat <frontend-file> | gemini --yolo -p "<instruction>"

# With directory context
gemini --yolo -p "<instruction>" --include-directories <dirs>

# With full project context
gemini --yolo -p "<instruction>" --all-files

Required Flags

Flag	Purpose
--yolo	MANDATORY - Auto-approve all changes
--prompt / -p	Specify the task
--include-directories	Add specific folder context
--all-files / -a	Include full project context

---

Examples

Component Styling

# Update button styles
cat src/components/Button.tsx | gemini --yolo -p "Change button color to blue-500, add hover:scale-105 transition"

# Responsive navbar
gemini --yolo -p "Make the navbar responsive with hamburger menu on mobile" --include-directories src/components

Layout Changes

# Convert to grid layout
cat src/pages/Dashboard.tsx | gemini --yolo -p "Convert this layout to CSS Grid with 3 columns"

Animation

# Modal fade-in
cat src/components/Modal.tsx | gemini --yolo -p "Add fade-in animation when modal opens"

Full Project Changes

# Dark mode
gemini --yolo -p "Update all components to use dark mode color palette" --all-files

Image-Based Full Pipeline

# Phase 1: Analyze mockup
ANALYSIS_PROMPT=$(cat <<'PROMPT'
@designs/card-component.png
Analyze this card component:
1. Layout structure (flex/grid)
2. Size, color, spacing of each element
3. Tailwind CSS class mapping
4. Estimated hover/interaction states
PROMPT
)
gemini --yolo -p "$ANALYSIS_PROMPT" > /tmp/ui-analysis.md

# Phase 2: Implement
ANALYSIS=$(cat /tmp/ui-analysis.md)
gemini --yolo -p "Implement a React component based on the following analysis:

--- UI ANALYSIS ---
${ANALYSIS}
--- END ANALYSIS ---

- Create at src/components/Card.tsx
- Use Tailwind CSS
- Include TypeScript props interface
- Follow existing component patterns" \
  --include-directories src/components

---

Subagent Delegation Templates

Standard Frontend Task

1. TASK: Update component styling via Gemini CLI
2. EXPECTED OUTCOME: Visually updated component
3. REQUIRED TOOLS: Bash (gemini CLI), Read, lsp_diagnostics
4. MUST DO:
   - Use --yolo flag
   - Verify with lsp_diagnostics after execution
   - Follow existing CSS framework patterns
5. MUST NOT DO:
   - Modify logic or event handlers
   - Remove existing functionality
6. CONTEXT: [file paths, design requirements, existing patterns]

Image-Based Frontend Task

1. TASK: Generate/modify component from image reference
2. EXPECTED OUTCOME: Component matching the visual reference
3. REQUIRED TOOLS: Bash (gemini CLI), Read, Edit, lsp_diagnostics
4. MUST DO:
   - Phase 1: Run Gemini with @-image prompt → save to /tmp/ui-analysis.md
   - Phase 2: Inject analysis into gemini --yolo prompt
   - Verify with lsp_diagnostics
   - Clean up temp files after completion
5. MUST NOT DO:
   - Skip image analysis phase
   - Modify business logic
6. CONTEXT: [image path, target file, existing patterns]

---

Troubleshooting

Issue	Solution
Command hangs	Ensure --yolo flag is present
No changes made	Check file context with --include-directories
Unexpected changes	Add more specific constraints in prompt
Build errors	Run lsp_diagnostics and fix type issues
Image not recognized	Use absolute path, verify file exists
Analysis too vague	Add specific extraction targets in prompt
Gemini ignores analysis	Wrap in --- UI ANALYSIS --- delimiters
Temp file conflict	Use unique names: /tmp/ui-analysis-{component}.md

Security

• --yolo auto-approves ALL changes. Use only in version-controlled directories.
• Image files referenced by @ paths are processed in Gemini CLI context. Verify path access policy before running.