Performance as design
Skill Dragoon0x/everything-design-taste/skills/performance-as-design
Web performance as a design decision, Core Web Vitals, perceived performance, and performance budgets.From its SKILL.md
npx -y skills add Dragoon0x/everything-design-taste --skill performance-as-designAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.5 KB, 320 tokens by cl100k_base, as published. Nobody here has run it
Performance as Design
Slow is a design failure. A beautiful page that takes 5 seconds to load is worse than a plain page that loads in 1 second.
Core Web Vitals
| Metric | Target | What It Measures |
|---|---|---|
| LCP | < 2.5s | Largest content rendered |
| INP | < 200ms | Interaction responsiveness |
| CLS | < 0.1 | Visual stability (no layout shifts) |
Performance Budget
Set limits before you start designing:
- Total page weight: < 1MB (ideally < 500KB)
- Fonts: max 2 families, 3-4 weights total
- Images: WebP/AVIF, appropriately sized
- JavaScript: < 200KB gzipped
- First contentful paint: < 1.5s
Design Decisions That Affect Performance
| Decision | Performance Cost |
|---|---|
| Custom fonts | 20-100KB per font file |
| Hero video | 2-10MB+ |
| Animation library | 20-80KB JS |
| Image carousel | Multiple large images loaded |
| Infinite scroll | Growing DOM, memory usage |
| Real-time features | WebSocket connection, state updates |
Perceived Performance
- Skeleton screens feel faster than spinners
- Optimistic updates feel faster than waiting for confirmation
- Progressive image loading (blur-up) feels faster than empty space
- Instant navigation (prefetch on hover) feels faster than waiting
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.