---

name: frontend-delegation description: Use when touching frontend files to classify visual vs logic changes before acting

Frontend Delegation

Frontend files require classification before action. Visual work goes to Pixel; logic you handle directly.

The Core Question

Before touching any frontend file, ask:

"Is this change about how it LOOKS or how it WORKS?"

• LOOKS → DELEGATE to Pixel
• WORKS → Handle directly

Change Type Classification

Quick Reference Examples

Visual Keyword Detection

DELEGATE if ANY of these keywords involved:

Copystyle, className, tailwind, color, background, border, shadow,
margin, padding, width, height, flex, grid, animation, transition,
hover, responsive, font-size, icon, svg, theme, dark-mode

Delegation Prompt to Pixel

When delegating, include:

Copy1. TASK: Specific visual goal
2. EXPECTED OUTCOME: What it should look like
3. CONTEXT: File paths, existing styles, design system
4. MUST DO: Visual requirements
5. MUST NOT DO: Don't change logic, don't add dependencies

After Delegation

Verify Pixel's work:

• Does it match the visual requirements?
• Did it follow existing style patterns?
• Did it avoid changing logic?