All skills
14 of 113 — copy any prompt into Lovable, or read the guide.
Accessibility baseline
Contrast ≥ 4.5:1 for text; interactive elements need a visible focus ring.
Custom shadcn variants
Add a "premium" button variant using tokens and a gradient.
Dark mode toggle
Add a theme toggle that stores the choice and respects the OS preference.
Design tokens in styles.css
Never hardcode colors — declare tokens and let Tailwind utilities read them.
Empty, loading and error states
The three screens that decide whether an app feels finished — and the copy that belongs on each.
Generate marketing imagery
Use imagegen for hero art, avoiding stock-photo defaults.
Glassmorphism, sparingly
Glass cards work over rich backdrops; on flat surfaces they look like a bug.
Gradient utilities
Add reusable gradient-text and gradient-hero utilities.
Hero patterns that don't look AI-generated
Skip the purple-gradient-on-white, two-CTA, three-feature-grid trap.
Icons: Lucide only
Ship one icon set. Mixing icon libraries makes the UI look pasted-together.
Motion for React basics
Use Motion for enter/exit animations; keep durations short (150–250ms).
Motion tokens and reduced motion
A small, consistent set of durations and easings — that switches off cleanly for users who ask it to.
Responsive breakpoints
Design mobile-first; add breakpoints only where the layout actually changes.
Typography pairing
One display face + one text face is almost always enough.