## Success Criteria

### Aesthetic Decisions (20 points)
- Agent explicitly states an aesthetic direction before coding
- Aesthetic choice is justified and appropriate for the project context
- No generic purple gradient unless explicitly requested
- Color palette is intentional and limited (5-6 colors max)

### Visual Hierarchy (20 points)
- Clear primary, secondary, and tertiary visual levels
- One element clearly dominates the layout
- Supporting elements are visually quieter
- Information architecture is clear from visual treatment alone

### Typography (15 points)
- Type scale is defined before coding
- Maximum 2 font families used
- Font choice matches the aesthetic direction
- Line heights and sizes are consistent with the scale
- Code uses monospace font, always

### Color System (15 points)
- Palette is defined before coding
- Text colors pass WCAG AA contrast (4.5:1 minimum)
- No pure black (#000) for text
- Accent color is used consistently for interactive elements
- Semantic colors (success, error) are distinct from brand colors

### Spacing and Layout (15 points)
- Consistent spacing scale is used (4px or 8px grid)
- Layout uses a defined grid system
- Component spacing follows a pattern (tight within groups, loose between groups)
- Responsive breakpoints are defined
- Mobile layout is considered (not an afterthought)

### Implementation Quality (15 points)
- Semantic HTML is used (header, nav, main, section, footer)
- CSS custom properties are used for design tokens
- Components are reusable and well-structured
- Empty, loading, and error states are addressed
- Accessibility basics are covered (labels, keyboard nav, contrast)

## Evaluation Scenarios

### Scenario A: Agent Produces Generic UI
- No stated aesthetic direction
- Default purple gradient hero
- Inter font at 16px everywhere
- No visual hierarchy — all elements look the same importance
- Random spacing values (13px, 27px, 41px)
- **Result:** FAIL — does not meet aesthetic or hierarchy criteria

### Scenario B: Agent Follows Skill
- States "Editorial aesthetic" with justification
- Defines type scale, color palette, spacing scale
- Hero section clearly dominates
- Typography has 3 distinct levels (headline, subheadline, body)
- Consistent spacing from defined scale
- **Result:** PASS

### Scenario C: Agent Partially Follows Skill
- Mentions aesthetic but does not justify it
- Uses a type scale but deviates with random values
- Has some hierarchy but secondary elements are too prominent
- Color palette is reasonable but includes too many colors
- **Result:** CONDITIONAL — meets minimum criteria but could improve

## Red Flags (Automatic Deductions)
- Purple gradient used without being requested: -10 points
- Inter font used as the only font: -5 points
- No type scale defined: -10 points
- No color palette defined: -10 points
- Pure black (#000) used for body text: -5 points
- No responsive considerations: -10 points
- All elements same size/weight: -10 points