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
| Change Type |
Examples |
Action |
| Visual/UI/UX |
Color, spacing, layout, typography, animation, responsive breakpoints, hover states, shadows, borders, icons, images |
DELEGATE to pixel |
| Pure Logic |
API calls, data fetching, state management, event handlers (non-visual), type definitions, utility functions, business logic |
Handle directly |
| Mixed |
Component changes both visual AND logic |
Split: logic yourself, visual to pixel |
Quick Reference Examples
| File |
Change |
Type |
Action |
Button.tsx |
Change color blue→green |
Visual |
DELEGATE |
Button.tsx |
Add onClick API call |
Logic |
Direct |
UserList.tsx |
Add loading spinner animation |
Visual |
DELEGATE |
UserList.tsx |
Fix pagination logic bug |
Logic |
Direct |
Modal.tsx |
Make responsive for mobile |
Visual |
DELEGATE |
Modal.tsx |
Add form validation logic |
Logic |
Direct |
Visual Keyword Detection
DELEGATE if ANY of these keywords involved:
style, 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:
1. 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?
1---2name: frontend-delegation3description: Use when touching frontend files to classify visual vs logic changes before acting4---5
6# Frontend Delegation
7
8Frontend files require classification before action. Visual work goes to Pixel; logic you handle directly.
9
10## The Core Question
11
12Before touching any frontend file, ask:
13> "Is this change about **how it LOOKS** or **how it WORKS**?"
14
15- **LOOKS** → DELEGATE to Pixel
16- **WORKS** → Handle directly
17
18## Change Type Classification
19
20| Change Type | Examples | Action |
21|-------------|----------|--------|
22| **Visual/UI/UX** | Color, spacing, layout, typography, animation, responsive breakpoints, hover states, shadows, borders, icons, images | DELEGATE to `pixel` |
23| **Pure Logic** | API calls, data fetching, state management, event handlers (non-visual), type definitions, utility functions, business logic | Handle directly |
24| **Mixed** | Component changes both visual AND logic | Split: logic yourself, visual to `pixel` |
25
26## Quick Reference Examples
27
28| File | Change | Type | Action |
29|------|--------|------|--------|
30| `Button.tsx` | Change color blue→green | Visual | DELEGATE |
31| `Button.tsx` | Add onClick API call | Logic | Direct |
32| `UserList.tsx` | Add loading spinner animation | Visual | DELEGATE |
33| `UserList.tsx` | Fix pagination logic bug | Logic | Direct |
34| `Modal.tsx` | Make responsive for mobile | Visual | DELEGATE |
35| `Modal.tsx` | Add form validation logic | Logic | Direct |
36
37## Visual Keyword Detection
38
39DELEGATE if ANY of these keywords involved:
40
41```
42style, className, tailwind, color, background, border, shadow,
43margin, padding, width, height, flex, grid, animation, transition,
44hover, responsive, font-size, icon, svg, theme, dark-mode
45```
46
47## Delegation Prompt to Pixel
48
49When delegating, include:
50
51```
521. TASK: Specific visual goal
532. EXPECTED OUTCOME: What it should look like
543. CONTEXT: File paths, existing styles, design system
554. MUST DO: Visual requirements
565. MUST NOT DO: Don't change logic, don't add dependencies
57```
58
59## After Delegation
60
61Verify Pixel's work:
62- Does it match the visual requirements?
63- Did it follow existing style patterns?
64- Did it avoid changing logic?
majiayu000