SkillMirror AI

A real-world math simulator that builds intuition by revealing hidden patterns behind everyday life.

Comment

Inspiration

Every Indian student has said it: "Math is boring, real life me use nahi hota." I watched friends memorize formulas for exams, then struggle to calculate a simple discount at a shop.

I wanted to flip that. What if instead of teaching math, we train the brain to see it? Like Neo seeing the Matrix — suddenly percentages glow on price tags, speed equations appear in traffic.

That became SkillMirror AI.

What it does

SkillMirror AI is a real-world math simulator. It doesn't give you textbook problems. It mirrors your daily life into math:

1. Money Mirror – "Shirt ₹1,200, 20% off + 18% GST. Final price?" 2. Traffic Mirror – "Car at 60 km/h, another at 80 km/h, 20km apart. When will it overtake?" 3. Cricket Mirror – "Scores of 45, 67, 23. What's the average?"

You solve it, then Pattern Vision Mode activates. The screen reveals the hidden math glowing over the real scene. You don't just get an answer, you get intuition.

After 10 solves, your brain starts spotting patterns automatically. That's the core loop: Real scene → Solve → See pattern → Level up.

How we built it

We kept it brutally simple for MVP:

  • Frontend only: HTML, CSS, Vanilla JavaScript
  • No backend: All progress in localStorage (works offline in Tier 2/3 cities)
  • PWA ready: Installable on phone
  • Pattern Vision: CSS animations + SVG overlays to "glow" formulas on images

Example math we visualize with LaTeX: $$ \text{Final Price} = 1200 \times (1 - 0.20) \times (1 + 0.18) = 1132.8 $$ $$ \text{Relative Speed} = 80 - 60 = 20 \text{ km/h, Time} = \frac{20}{20} = 1 \text{ hour} $$ $$ \text{Average} = \frac{45 + 67 + 23}{3} = 45 $$

Challenges we ran into

  1. Scope creep: First idea was "all subjects AI tutor." We killed it. Math-only kept us focused.
  2. Making patterns feel real: Showing a formula is easy. Making it glow on a price tag like a superpower took 20+ CSS iterations.
  3. Gamification without distraction: XP is useless if it's just numbers. We tied XP to "Pattern Vision %" so progress feels like gaining eyesight.

Accomplishments that we're proud of

  • Working Pattern Vision animation in under 200 lines of JS
  • 3 fully functional real-world scenarios Indian students relate to instantly
  • Level system: Beginner → Pattern Seer → Math Thinker → Expert
  • Zero server cost, runs on any phone browser

What we learned

Students don't need more content. They need a reason to care. When math solves their shopping bill or cricket debate, motivation is automatic. Also: constraints win hackathons. Saying "no" to features made our demo 10x clearer.

What's next for SkillMirror AI

  • Add 10 more Indian scenarios: auto fare, UPI split, train delays
  • Hindi voice: "ab tumhe pattern dikh raha hai"
  • Teacher dashboard to assign real-life missions
  • Real AI to generate personalized scenarios from user's location

SkillMirror isn't another edtech app. It's training wheels for mathematical eyesight.

Built With

Share this project:

Updates