SkinShelf

One YouCam selfie plus the products you already own. SkinShelf flags stacked actives and irritants only where your scores say they matter, plans your week, and usually says: buy less.

Comment

Inspiration

Most skincare advice starts in the store: "what should I buy?" But the moment that actually matters is in front of the bathroom shelf, with six or seven products you already own, wondering whether they're working, or whether they're the reason your skin is red.

The usual answer to irritated skin is another product. Often the honest answer is fewer: two exfoliants used every night, plus a retinoid every night, is more than reactive skin can take. Nobody checks the shelf against the face. So I built the tool that does.

What it does

SkinShelf: your shelf, checked against your skin. One selfie plus the bottles you already own, and an honest answer. Most of the time it's buy less.

  1. Your skin. The selfie goes to YouCam AI Skin Analysis for seven concerns: wrinkle, pore, texture, acne, redness, moisture and oiliness (the ones products actually change). You see each score, a level (priority under 60, watch under 80, fine), and YouCam's own detection masks as tap-to-toggle overlays.
  2. Your shelf. Add a product by pasting the ingredient list from the bottle, exactly as printed. SkinShelf reads it against an explicit knowledge base (111 INCI names, plus patterns for ceramides and plant essential oils). A name it doesn't know stays "not in the list". It never guesses.
  3. The audit. Plain, written-down rules, each finding naming the ingredient as printed and the score behind it:
    • Actives that stack. How many exfoliant and retinoid nights your redness and hydration can take, against how often your shelf puts them on your face. ("2 exfoliants add up to 14 applications a week, and a retinoid 7 nights a week. With redness 77 and hydration 72, start from 2 exfoliant nights and 3 retinoid nights.")
    • Irritants, only where your scores say they matter. Fragrance in a leave-on night cream is flagged at redness 77. The same fragrance in a cleanser that washes off in a minute is "fine". And on calmer skin (redness 81) the same night cream isn't flagged at all.
    • Same job, twice. Two products doing one job: rotate them, and don't rebuy both.
    • The gap. What your scores call for that nothing on your shelf does, like a morning sunscreen when your shelf has an acid and a retinoid.
    • Myth checks. For example, vitamin C and niacinamide are fine together.
  4. Your week. A seven-night plan that uses only what you own: exfoliant nights, retinoid nights and recovery nights, and actives never share a night. Copy it as text.
  5. The verdict. "Buy one thing." "Space out your actives." "Swap one product when it runs out." And, as soon as it's true: "Buy nothing."

Try it: https://skinshelf.sites.tab.bot (Sample B shows the full audit in one tap, or analyze your own selfie).

How I built it

YouCam API (server-side, in a single Cloudflare Worker that holds the key so it never reaches the browser):

  1. POST /s2s/v2.0/file registers the photo and returns a pre-signed upload URL; the worker uploads the bytes once.
  2. POST /s2s/v2.0/task/skin-analysis with dst_actions: [wrinkle, pore, texture, acne, redness, moisture, oiliness].
  3. It polls GET /s2s/v2.0/task/skin-analysis/{id} and returns each concern's ui_score, the overall score, skin age and the mask_urls. A KV counter caps live analyses per day so a public demo can't drain the free units. Photos aren't stored by SkinShelf; the shelf lives in the browser's local storage.

The audit engine is plain JavaScript modules, no framework and no build step: src/inci.js reads a printed ingredient list (position-aware: a drying alcohol only counts in the first five ingredients; rinse-off products are detected), src/kb.js maps INCI names to classes and classes to the YouCam concerns they help, src/audit.js holds the rules (tolerance tiers from redness and hydration, stacking, same-night pairs, duplicates, score-gated irritants, gaps, the verdict), and src/week.js builds the seven nights. No AI runs at audit time, so every flag can be explained and the same input always gives the same answer.

Design: a calm apothecary look: cream and ink, one deep green and one blush accent, DM Serif Display with Manrope (both self-hosted, SIL OFL), the shelf as a row of "bottles" coloured by what each one is, and the week as a seven-column strip. Phone-first.

Quality: 10 unit tests (node --test) covering the INCI reader, every audit rule and the week planner across all tolerance tiers; 20 end-to-end checks in a real browser, run against both the local build and the live site (including a real photo analyzed by YouCam through the deployed worker); an axe-core accessibility pass with 0 violations; phone layout checked at 390 px.

The samples are two AI-generated faces (not real people). Their scores and masks are real YouCam results. The sample shelf is seven generic products with realistic ingredient lists and no brands.

Challenges I ran into

  • Not over-flagging. A naive checker flags every "alcohol" and every acid. Cetearyl alcohol is a waxy moisturizer; ethylhexyl salicylate is a sunscreen filter, not an exfoliant; a drying alcohol at position 9 is a trace solvent. Exact INCI lookups plus list position fixed most of it, and the unit tests pin those cases down.
  • Making the scores matter. The same bottle should get a different answer on different skin. Tolerance tiers come from the redness and hydration scores, and irritant flags are gated by them, so "fine for you" is a real result, not a default.
  • Planning a week from a fixed shelf. The planner places exfoliant and retinoid nights within the tier's limits, never on the same night, with recovery nights between, using only products the person owns.
  • YouCam details: a face turned too far returns error_large_face_angle, which became plain on-page guidance. Mask URLs expire, so the samples store their masks locally while live analyses use fresh URLs.

Accomplishments that I'm proud of

The verdict that most shopping tools never show: "Buy nothing." In the demo, setting the toner and the acid to once a week and the retinol to three nights clears the conflict, and pasting a sunscreen's ingredients turns the verdict into "Buy nothing." It's a product recommendation flow that can recommend nothing, and it explains why.

What I learned

Skin analysis gets more useful when it's pointed at something the person already owns. A score on its own is a number; a score next to the exact ingredient on your own bottle is a decision.

What's next for SkinShelf

Reading the ingredient list from a photo of the bottle, a "re-check in 8 weeks" comparison using the same seven concerns, and YouCam's skin-type analysis to refine the tolerance tiers.

Honest limits

Ingredient lists don't state concentrations, so list position is the only signal. The tiers are cautious starting points, not prescriptions. Cosmetic guidance, not medical advice.

Project history and AI disclosure

New project, created during the submission period (October 2026) and rebuilt on Oct 12 around the shelf audit. Built by me with help from an AI assistant (Tab), which wrote much of the code under my direction; there is no AI in the product at runtime. The demo video's narration is AI text-to-speech. All code is public (MIT) on GitLab.

Built With

Share this project:

Updates

Submission history