| name | taste |
| description | Catch tasteless choices before they ship — visual noise, copy that sounds like a database, lazy stock-photo and emoji-as-icon, fake metrics. Invoke whenever you're about to push a UI change or write user-facing copy. |
Taste
Taste is the negative space of design — what you choose not to do.
This skill is a list of the failures that show up most often in fresh
output and the corrections that fix them. Run it as a sanity sweep.
What "tasteful" means in this codebase
- The product is calm. A teenager opens it on a phone after a long
school day. Loud UI feels like more homework.
- The product is honest. Numbers are real, names are anonymised
appropriately, "AI" is named only where it adds clarity (per the privacy
rule).
- The product is specifically South African. NSC, IEB, SBA, FET, NSFAS
by name. Not "Tier 1 universities" — we name UCT, Wits, Stellies.
- The product is for students, parents, teachers, schools. Not for
investors. No "synergy", no "AI-powered everything", no "platform".
Anti-patterns to catch
Visual
| Tasteless | Tasteful |
|---|
| Purple-to-pink gradient on a card | Solid neutral with a single accent border |
| Three different shadow elevations on one screen | One shadow style, applied sparingly |
border-radius: 24px on small buttons | 6–8px buttons, 12px cards, 16–20px sheets |
| Stock photo of "diverse students smiling at a laptop" | A real screenshot of the product, or no image |
| Decorative SVG blobs in the corner | Empty space |
| Emoji 🎉 standing in for a celebration icon | Lucide PartyPopper (or no icon — the colour does it) |
| Glow + gradient + shadow + tilt on a hero card | Pick one — usually none |
| Pure-black text on pure-white | #161616 on #FAFAFA |
| 5 different accent colours on one page | One accent, supporting neutrals |
| Animation on page load (every card fades in sequentially) | Static; animate only on interaction |
Copy
| Tasteless | Tasteful |
|---|
| "Welcome to your dashboard!" | "Hey [Name] — here's where you left off." |
| "Unlock your full potential with AI-powered tutoring" | "An AI tutor that knows the NSC syllabus by heart." |
| "Empower learners and parents with insights" | "See where your child needs help — before the term ends." |
| "Get started" (CTA on landing) | "See it on your matric subjects" |
| "Error 500: Something went wrong" | "Couldn't save. Check your connection and try again." |
| "0 results found" | "No goals yet — set your first one to start tracking." |
| "Loading..." | A skeleton that matches the real layout |
| "Click here" / "Learn more" link text | "See pricing" / "Read the SBA guide" |
"3.8/5" raw | "3.8 out of 5 — steady this week" |
| ALL-CAPS HEADLINE for emphasis | Sentence case + weight |
Data / numbers
- Never fabricate metrics on a real-user page. "12-day streak" must
come from a check-in count, not a hard-coded string. If the data isn't
there yet, show the empty state.
- Round honestly. "7h 12m" is fine. "7.2 hours of perfect rest"
is dishonest if the source is a self-reported nap log.
- Compare against meaningful baselines. "−3% vs last week" only
matters if last week is shown next to it.
Iconography
- One icon set per project. We use MUI
*Outlined icons consistently.
Don't sprinkle Lucide or FontAwesome on top.
- Outlined > filled — softer feel.
- No icon-emoji confusion: emoji are for content (the user's own data),
icons are for UI affordances.
Interactions
- Don't toast what the user already saw. The button changed state →
no "Saved!" toast required.
- Confirmation dialogs only for destructive actions. Don't ask "Are
you sure you want to add a goal?" — it's reversible.
- Don't trap the user with onboarding tours they can't dismiss.
Marketing
- No "trusted by" logo wall if you don't have logos to put there.
- No countdown timers for fake urgency.
- No "join 10,000 students" if there aren't 10,000 yet. "Built for
Grade 10–12" is honest framing without lying.
- No testimonials from "Sarah, parent" with a stock photo. Either
real users with consent, or no testimonials.
The taste pass
Before any UI change ships, sweep:
- Do a 5-second squint test. Step back, half-close your eyes — does
one thing draw attention? Is it the right thing?
- Read the copy aloud. Does it sound like a person talking to a
teenager, or like a CRUD form?
- Diff against the anti-patterns above. Anything matching the left
column? Fix it.
- Run it past the privacy rule. Are we revealing tech stack
(Claude, Anthropic, Paystack, etc.) on a user-visible surface? Strip it.
- Check the data is real. If a number is on the screen, can you
point to the API that produced it? If not, replace with an empty
state or skeleton.
Use this skill when
- Reviewing your own UI change before commit.
- Writing copy for any user-facing surface (button labels, headlines,
emails, error messages).
- Picking colour, spacing, or component variants — the anti-patterns
table is the cheat sheet.
- Deciding whether to add a thing. Default answer: no. The bar for new
visual elements is high.
