Shea

Inspiration

Most skin apps were tuned on lighter skin, and it shows. Dark marks get treated as a footnote. Every "best sunscreen" leaves a grey cast. And in Accra, the shop shelf next to the good stuff still sells creams with hydroquinone and mercury. Ghana banned those in cosmetics years ago, but they keep turning up. I wanted one honest tool for people like me. It should look properly at deep skin, tell you what matters first, refuse what's unsafe and explain why, and then help with the fun part: what to wear.

What it does

You take a selfie. Shea sends it to YouCam Skin Analysis (8 concerns: dark marks/PIH, under-eye darkness, oil, breakouts, texture, pores, hydration, radiance) and to YouCam Skin Tone Analysis, which measures your actual skin colour.

Then a small, visible agent works through Observe → Reason → Guard → Act:

• Reason. It re-weights the scores for melanin-rich skin, so PIH and uneven tone come first. It also accounts for Accra's humidity and UV.
• Guard. It refuses unsafe or unsuitable products and gives the reason for each: hydroquinone 4%, mercury and potent steroids (not permitted in Ghana cosmetics), and mineral SPF that turns grey on deep skin.
• Act. It builds an AM/PM routine that always includes SPF, priced in cedis. You can "start with three" for GH₵490 or buy the full routine for GH₵1,240.

Finally, Shea ranks garments by how they contrast with your measured skin colour. It then uses YouCam Clothes VTO to put the top pick on a full-length photo: the sample model, or you.

You can see everything the agent decided and why. Nothing is a black box.

How we built it

• Front end: React 19 + TypeScript on Vite, styled with Tailwind 4. Framer Motion and Lenis handle the scroll story. The first paint is prerendered so it loads fast on mobile data.
• Back end: one Vercel serverless function proxies the YouCam API, so the key never reaches the browser. Uploads are cached by hash, so a photo is only sent once.
• The agent (shared/agent.ts) is plain, deterministic TypeScript. It takes the YouCam readings and turns them into ranked concerns, guarded product choices and a GH₵ basket. Garment ranking uses WCAG contrast against the skin colour YouCam returns.
• Budget guardrails: a credit check runs before every paid call, and there are daily and per-device unit caps. A real recorded YouCam result is shown for the sample photo, so visitors never burn credits just by opening the page.
• Tests: Vitest covers the agent, the colour maths and the API routes against a mocked YouCam.

Challenges we ran into

• Credits. 1,000 units is not a lot once strangers can hit your site. I had to design the whole live path around a budget: caching, caps, a credit precheck, and an honest, labelled fallback instead of a dead end.
• The async task flow. Skin analysis and try-on are upload → task → poll. Making that feel quick on a phone took careful loading states.
• Not overclaiming. It's easy to make a skin app sound like a doctor. I worked to keep every line framed as guidance, with a clear "see a dermatologist" line.

Accomplishments that we're proud of

• The guard step. Seeing the app refuse hydroquinone and say why, in plain words, is the moment that matters most to me.
• Colour matching based on the skin colour YouCam actually measured, not on a "skin type" picked from a dropdown.
• It's a complete product. It works end to end on a phone, it's honest about live versus sample results, and it costs nothing just to look around.

What we learned

• Skin AI is most useful when it's paired with a decision about what to do next, not just a score.
• Showing the reasoning builds more trust than polishing the score.
• Small, predictable agents that you can test beat clever ones you can't.

What's next for Shea

• Real local retailer stock and prices, so "start with three" becomes a one-tap basket from Accra shops.
• Progress tracking: a re-scan every few weeks to show dark marks fading.
• Twi and Ga, then other West African cities with their own climate and product rules.
• More try-on categories (makeup shades, headwraps) matched to measured skin colour.

Built With

• framer-motion
• lenis
• node.js
• react
• tailwindcss
• typescript
• vercel
• vite
• vitest
• youcam-api
• youcam-clothes-vto
• youcam-skin-analysis
• youcam-skin-tone-analysis