Cursor rule

1> This file extends [common/patterns.md](../common/patterns.md) with web-specific design-quality guidance.
2 
3# Web Design Quality Standards
4 
5## Anti-Template Policy
6 
7Do not ship generic template-looking UI. Frontend output should look intentional, opinionated, and specific to the product.
8 
9### Banned Patterns
10 
11- Default card grids with uniform spacing and no hierarchy
12- Stock hero section with centered headline, gradient blob, and generic CTA
13- Unmodified library defaults passed off as finished design
14- Flat layouts with no layering, depth, or motion
15- Uniform radius, spacing, and shadows across every component
16- Safe gray-on-white styling with one decorative accent color
17- Dashboard-by-numbers layouts with sidebar + cards + charts and no point of view
18- Default font stacks used without a deliberate reason
19 
20### Required Qualities
21 
22Every meaningful frontend surface should demonstrate at least four of these:
23 
241. Clear hierarchy through scale contrast
252. Intentional rhythm in spacing, not uniform padding everywhere
263. Depth or layering through overlap, shadows, surfaces, or motion
274. Typography with character and a real pairing strategy
285. Color used semantically, not just decoratively
296. Hover, focus, and active states that feel designed
307. Grid-breaking editorial or bento composition where appropriate
318. Texture, grain, or atmosphere when it fits the visual direction
329. Motion that clarifies flow instead of distracting from it
3310. Data visualization treated as part of the design system, not an afterthought
34 
35## Before Writing Frontend Code
36 
371. Pick a specific style direction. Avoid vague defaults like "clean minimal".
382. Define a palette intentionally.
393. Choose typography deliberately.
404. Gather at least a small set of real references.
415. Use ECC design/frontend skills where relevant.
42 
43## Worthwhile Style Directions
44 
45- Editorial / magazine
46- Neo-brutalism
47- Glassmorphism with real depth
48- Dark luxury or light luxury with disciplined contrast
49- Bento layouts
50- Scrollytelling
51- 3D integration
52- Swiss / International
53- Retro-futurism
54 
55Do not default to dark mode automatically. Choose the visual direction the product actually wants.
56 
57## Component Checklist
58 
59- [ ] Does it avoid looking like a default Tailwind or shadcn template?
60- [ ] Does it have intentional hover/focus/active states?
61- [ ] Does it use hierarchy rather than uniform emphasis?
62- [ ] Would this look believable in a real product screenshot?
63- [ ] If it supports both themes, do both light and dark feel intentional?
64