{"slug": "i-built-a-claude-skill-that-turns-a-boring-resume-into-an-animated-web-page", "title": "I Built a Claude Skill That Turns a Boring Resume Into an Animated Web Page", "summary": "A developer built an open-source Claude skill that converts a standard resume or LinkedIn PDF into an animated, interactive one-page profile delivered as a single HTML file with no framework or build step. The skill uses Claude to read and interview the user while a Python script (build.py) generates the output from a profile.json, and it can be installed via Claude Code plugin commands or uploaded to the Claude app under Settings → Capabilities → Skills. The code is released under the MIT license.", "body_md": "I wanted to try something really fun for generating online profiles and websites; mostly, I wanted it to be customised for each person and have some personality.\n\nSo I built a small **Claude skill** that takes a normal resume (or a LinkedIn PDF) and turns it into an **animated, interactive one-page profile**. \n\nIn this post, I'll show you what it does, how it works under the hood, and how you can try it yourself in about two minutes.\n\nThe demo uses a fictional person, so no real data was harmed in the making of this GIF. 😄\n\nHere's what ends up on the page:\n\nAnd the output is just **one HTML file**. No framework, no build step. You can drop it on GitHub Pages, and you're done.\n\nWhen you ask Claude to make an animated resume, the skill walks through four steps:\n\nThat's the whole trick. Claude does the reading and the interviewing, and a plain Python script does the building.\n\nHere's roughly how the skill folder is laid out:\n\n```\nskills/animated-resume/\n├── SKILL.md                    # the instructions Claude follows\n├── assets/template.html        # the animated page\n├── assets/example-profile.json # a full fictional example\n├── references/schema.md        # every profile.json field\n└── scripts/build.py            # profile.json → index.html\n```\n\nIf you use **Claude Code**, installing it takes two commands:\n\n```\n/plugin marketplace add dooa-ansari/animated-resume-claude-skill\n/plugin install animated-resume@animated-resume\n```\n\nThen just ask:\n\nMake me an animated resume from my CV.\n\nIf you use the **Claude app** (claude.ai or desktop), download `animated-resume-skill.zip` from the repo and upload it under **Settings → Capabilities → Skills**.\n\nSince the result is a single HTML file, hosting it is easy:\n\n`index.html` in a GitHub repo.`main` / `(root)`.` https://<your-username>.github.io/<repo>/`.\nNow you have a link you can put on your LinkedIn or in your email signature.\nThe code is open source under the MIT license, so feel free to use it, fork it, or borrow ideas for your own skill:", "url": "https://wpnews.pro/news/i-built-a-claude-skill-that-turns-a-boring-resume-into-an-animated-web-page", "canonical_source": "https://dev.to/dooaansari/i-built-a-claude-skill-that-turns-a-boring-resume-into-an-animated-web-page-e70", "published_at": "2026-10-16 20:11:02+00:00", "updated_at": "2026-10-16 20:20:24.944047+00:00", "lang": "en", "topics": ["ai-tools", "ai-agents", "developer-tools", "generative-ai"], "entities": ["Claude", "Claude Code", "Anthropic", "GitHub Pages", "LinkedIn"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/i-built-a-claude-skill-that-turns-a-boring-resume-into-an-animated-web-page", "markdown": "https://wpnews.pro/news/i-built-a-claude-skill-that-turns-a-boring-resume-into-an-animated-web-page.md", "text": "https://wpnews.pro/news/i-built-a-claude-skill-that-turns-a-boring-resume-into-an-animated-web-page.txt", "jsonld": "https://wpnews.pro/news/i-built-a-claude-skill-that-turns-a-boring-resume-into-an-animated-web-page.jsonld"}}