Pet project · 2026
MOS — Mentor OS
Mentorship that shows its work.
What MOS is.
MOS is a tool for design mentors. It holds the whole arc of a mentorship in one place: a node-based timeline for each mentee, a shared competency matrix to score growth against, and reports that turn months of quiet work into something you can put in front of a promo committee.
I took it end to end. Brand, design system, product design, and a live multi-user web app, built solo.
Mentorship lives in scattered docs and memory.
Mentorship usually lives in scattered docs, DMs, and memory. There's no shared definition of what good looks like. Progress gets judged on feel. And when it's time to prove how far someone has come, to the mentee, their manager, or a promo committee, there's nothing concrete to point at.
Structure beats note-taking.
If a mentor can map the arc on a timeline, score it against one consistent matrix, and generate proof on demand, mentorship becomes measurable and repeatable without turning into admin.
The bet underneath: structure beats note-taking, and a visual timeline makes the structure feel light instead of bureaucratic.
The person quietly responsible for someone's growth.
Design mentors and team leads guiding a handful of people. The person quietly responsible for someone's growth who has no system for it. v1 is mentor-only by design. The mentee-facing side comes later.
Secondary audience: anyone who has to turn "they got better" into evidence at review time.
Four moving parts.
Meetings, tasks, notes, reviews and assessments mapped across 90 days, each tagged to a skill.
You score everyone against it, so growth reads as a trend, not a feeling.
Assessments accumulate session over session, with the deltas doing the talking.
Exported as proof you can hand to a manager or a promo committee.
Designed in code, no handoff.
Process
No exhaustive Figma flows. I started from a concept and made the design decisions in the build itself. The design system lives as a working component library in Storybook, with tokens, components, states, and accessibility checks captured as code, and brand and foundations worked out in Figma. Designing in code meant going from idea to a usable product with no handoff in between.
Stack
- Frontend
- Next.js, React, TypeScript, Tailwind, Zustand
- Node canvas
- React Flow
- Backend
- Supabase — Postgres, Auth, row-level security
- Auth
- Google and email sign-in
- Analytics
- PostHog
- Deploy
- Vercel
- Interaction
- Hand-rolled touches, like the falling-avatar physics on the landing page
- Made with
- Vibecoded with Claude
Where it goes.
- A mentee view, so mentees see their own progress, not just the mentor.
- A design-director role: team-level pulse across mentors, promotion-ready signal, roll-up reporting above the individual mentor.
- Multiple skill matrices with versioning, so a mentor working across teams or shifting standards can hold several bars side by side and track how each one evolves. The bet: one global matrix won't survive contact with real teams.
- Google Calendar sync for sessions.
- Live AI scoring and import. Today it imports a matrix from any LLM as Markdown or JSON, and the schema is built so a live model drops straight in.
- A proper mobile experience. Desktop-first for now.
see for yourself.
The demo is a real sandbox, pre-loaded with sample data. Open a mentee, scrub the timeline, score the matrix, export a report. No signup.
Open the demo— Kate