Gradient design
Skill Dragoon0x/everything-design-taste/skills/gradient-design
Gradient usage, mesh gradients, gradient mapping, and avoiding gradient cliches.From its SKILL.md
npx -y skills add Dragoon0x/everything-design-taste --skill gradient-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.3 KB, 253 tokens by cl100k_base, as published. Nobody here has run it
Gradient Design
Gradient Principles
When Gradients Work
- Background atmosphere (subtle, large area).
- Data visualization (heat maps, scales).
- Brand accents (signature gradient = brand recognition).
- Depth and dimension.
When They Don't
- Text backgrounds (readability issues).
- Small UI elements (gets muddy).
- "Because it looks cool" (needs purpose).
Gradient Types
- Linear: Two colors along a direction. Clean, simple.
- Radial: From center outward. Focal point effect.
- Conic: Around a center point. Clock-face effect.
- Mesh: Multiple color points blended. Organic, complex.
Building Good Gradients
- Use analogous colors (neighbors on the color wheel). They blend naturally.
- Avoid complementary gradients (red→green = brown muddy middle).
- Add a mid-point color to control the transition.
- Test on both light and dark backgrounds.
- Check contrast of any text over the gradient.
Cliches to Avoid
- Purple-to-pink (overused AI/tech default).
- Rainbow gradients (unless specifically on-brand).
- Gradient on every element (one gradient surface per view is usually enough).
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.