A hands-on look at skill decay, generative UI, and turning career anxiety into actionable insights
๐ Introduction
Hola amigos ๐
Welcome to the world of AI and DevOps.
In this blog, I want to share my experience building SkillDebt.ai as part of the UI Strikes Back Challenge, hosted by the WEMakeDevs community in collaboration with Tambo AI.
The idea behind SkillDebt.ai is simple:
as developers, we often talk about technical debt in our code โ but we rarely think about the technical debt in our careers.
SkillDebt.ai takes your resume or tech stack, analyzes it using Tambo AI and Gemini, and turns that data into beautiful, interactive visual insights about your skills. Instead of long paragraphs or generic advice, you get a clear picture of where you stand in your field.
Beyond skill visualization, it also highlights:
Skill decay โ tools and technologies you havenโt touched in a while
Risk audits โ warning signs when core skills are becoming outdated
Upgrade suggestions โ practical recommendations on what skills to add next to boost your career growth
This project isnโt just about AI or UI โ itโs about giving developers clarity, direction, and a better way to plan their learning journey.
๐ Practical Demo
Letโs see SkillDebt.ai in action.
Thereโs no heavy setup or complex prerequisites. All you need is your resume in PDF format.
Head over to the live demo here:
๐ https://my-repo-8k7lhiaxb-pravesh-sudhas-projects.vercel.app/
๐ง๐ต๐ฒ ๐ฃ๐ฟ๐ผ๐ท๐ฒ๐ฐ๐ ๐ต๐ฎ๐ ๐ฏ๐ฒ๐ฒ๐ป ๐๐ฎ๐ธ๐ฒ๐ป ๐ฑ๐ผ๐๐ป ๐ฏ๐ ๐ฎ๐ฑ ๐๐ฒ๐ฏ ๐ฎ๐ฌ๐ฎ๐ฒ, ๐๐ผ๐ ๐ฐ๐ฎ๐ป ๐ณ๐ผ๐น๐น๐ผ๐ ๐๐ต๐ฒ ๐๐ถ๐๐๐๐ฏ ๐๐๐ถ๐ฑ๐ฒ ๐๐ผ ๐ถ๐น๐น๐๐๐๐ฟ๐ฎ๐๐ฒ ๐ถ๐ป ๐๐ผ๐๐ฟ ๐ผ๐๐ป ๐น๐ผ๐ฐ๐ฎ๐น ๐๐๐๐๐ฒ๐บ
Once youโre on the site, click on โUpload Resumeโ, select your PDF, and hit Analyze. Thatโs it.
From there, SkillDebt.ai walks you through a complete breakdown of your profile:
First, youโll see a visual skill analysis chart that gives a quick overview of your strengths and gaps across different areas in your field.
Next comes the Skill Decay graph, which highlights technologies you havenโt actively used in a while and flags them based on risk. This part is especially useful because it surfaces skills you might be unknowingly neglecting.
After that, the Risk Audit section kicks in. It acts like a warning system, pointing out areas in your resume that could become problematic if left unaddressed.
Finally, you get career-focused upgrade suggestions โ specific skills you should consider adding or improving to stay relevant and boost long-term growth.
If youโre curious about how everything works under the hood, the complete source code is open-source and available here:
๐ SkillDebt.ai (UI Strikes Back)
Analyze your technical skill debt, visualize decay, and find your optimal upgrade path. Built for developers who want to stay ahead of the curve.
โจ Features
- ๐ Skill Visualization: Map out your current technical stack and see the balance across different domains.
- ๐ Decay Timeline: Understand how your skills might be losing relevance over time and plan ahead.
-
โ ๏ธ Risk Audit: Identify critical gaps or "debt" in your career path based on industry trends. - ๐ Upgrade Path: Get personalized, high-impact suggestions for your next skill upgrade.
- ๐ Resume Parsing: Upload your resume (PDF/Text) to start the analysis instantly.
- ๐ค Generative UI: Experience a dynamic AI-driven interface powered by the Tambo SDK.
๐ ๏ธ Tech Stack
- Framework: React + Vite
- Language: TypeScript
- Styling: Tailwind CSS
- Icons: Lucide React
- AI Integration: Tambo SDK
-
Markdown:
react-markdown+โฆ
๐ How I Built It
Going into the hackathon, I had one clear goal:
I didnโt want to build something flashy but forgettable. I wanted to build something novel and actually useful.
The AI agent space is already crowded. Everywhere you look, thereโs another code debugger, another productivity hack, another โAI assistantโ doing roughly the same thing. At the same time, with the rapid rise of AI โ especially tools like Claude Code and autonomous agents โ AI engineering has gone through the roof.
Thatโs when I paused and thought:
instead of building yet another tool to replace engineers, why not build something that helps engineers upskill and stay ahead of the curve?
That idea became SkillDebt.ai โ a system focused on helping developers understand where they stand today, what theyโre falling behind on, and how they can adapt to this AI-driven future instead of getting left behind.
From an implementation perspective, the most challenging part for me was configuring the Tambo Generative UI components. Getting the components to behave correctly, respond to the data, and render meaningful insights wasnโt straightforward at first. I ran into plenty of invalid input errors along the way.
But once I understood how the pieces fit together, things started clicking. The documentation played a huge role here โ it turned what initially felt overwhelming into a structured learning process. After a lot of trial and error (mostly invalid configuration for components), I finally got all four core components working together smoothly.
It wasnโt easy at the start, but that struggle is exactly what made the project so rewarding.
The main heart of the Project is the tambo.config.ts file inside the src/tambo directory, it handles the prompt for the generative UI components. Have a look at it:
import { z } from 'zod';
import { SkillRadarChart } from '../components/adaptive/SkillRadarChart';
import { SkillDecayTimeline } from '../components/adaptive/SkillDecayTimeline';
import { RiskWarningCard } from '../components/adaptive/RiskWarningCard';
import { UpgradeSuggestionCard } from '../components/adaptive/UpgradeSuggestionCard';
import { ExplanationToggle } from '../components/adaptive/ExplanationToggle';
export const tamboConfig = {
components: [
{
name: 'skill_radar_chart',
description: 'Visualizes the balance between depth and breadth of skills, or compares multiple skill categories.',
component: SkillRadarChart,
propsSchema: z.object({
title: z.string().describe("Title of the chart, e.g., 'Frontend Skill Balance'").default("Skill Analysis"),
data: z.array(z.object({
skill: z.string().describe("Name of the skill, e.g., 'React'").default("Unknown Skill"),
value: z.number().min(0).max(100).describe("Skill level from 0 to 100").default(50),
fullMark: z.number().default(100).optional(),
})).describe("Array of 3-6 skills to visualize.").default([]),
}),
},
{
name: 'skill_decay_timeline',
description: 'Shows a timeline of skills and their freshness/decay status based on last usage.',
component: SkillDecayTimeline,
propsSchema: z.object({
data: z.array(z.object({
name: z.string().describe("Name of the skill, e.g. 'jQuery'").default("Unknown Skill"),
lastUsed: z.string().describe("Year or timeframe like '2023', 'Current'").default("Unknown"),
decayLevel: z.string().describe("Decay level: 'low', 'medium', 'high', 'critical'").default("medium"),
})).describe("List of data points regarding skill usage and decay for the timeline.").default([]),
}),
},
{
name: 'risk_warning_card',
description: 'Displays a warning about a specific career risk or skill obsolescence.',
component: RiskWarningCard,
propsSchema: z.object({
title: z.string().describe("Short warning title, e.g. 'Legacy Stack Risk'").default("Risk Warning"),
message: z.string().describe("Detailed explanation of the risk").default("Potential risk detected."),
riskLevel: z.string().describe("Risk level: 'moderate', 'high', 'critical'").default('moderate'),
}),
},
{
name: 'upgrade_suggestion_card',
description: 'Suggests a specific skill upgrade or learning path with potential impact.',
component: UpgradeSuggestionCard,
propsSchema: z.object({
skill: z.string().describe("The recommended skill to learn").default("New Skill"),
recommendation: z.string().describe("Why this skill is recommended").default("Recommended for career growth."),
impact: z.string().describe("Impact: 'career_pivot', 'salary_bump', 'stability'").default("stability"),
}),
},
{
name: 'explanation_toggle',
description: 'Can be used to provide deeper context or reasoning for a specific insight, hidden by default behind a toggle.',
component: ExplanationToggle,
propsSchema: z.object({
reasoning: z.string().describe("The detailed reasoning or explanation to be hidden.").default("No additional details provided."),
context: z.string().describe("Optional context or source data reference.").optional(),
}),
},
],
};
It wasnโt easy at the start, but that struggle is exactly what made the project so rewarding.
After deploying the project, I posted about it on LinkedIn and dozens of Developers got their profile review using the system, and seeing real people interact with Generative UI components using Tambo made my DAY!
๐ Conclusion
Building SkillDebt.ai was a genuinely fun and exciting journey. From shaping the idea, struggling through early implementation issues, to finally seeing the generative UI come together โ every step pushed me to think differently about how AI can be used to empower developers, not replace them.
Huge thanks to the WEMakeDevs community and Tambo AI for organizing the UI Strikes Back Challenge and creating a space that encourages experimentation, learning, and building in public. Challenges like these are what make the developer ecosystem so motivating.
If you found this project interesting or have ideas on how it can be improved, Iโd love to hear from you. You can find the code on GitHub, and feel free to connect with me on my socials:
GitHub: https://github.com/Pravesh-Sudha
Twitter / X: https://x.com/praveshstwt
Thanks for reading โ and as always, keep building, keep learning, and stay curious ๐
Adios ๐
Top comments (0)