interactive-portfolio · davila7 — Claude Code skill
A skill that shapes a personal portfolio so a visitor gets who you are and what you do within seconds. Aimed at developers and designers.
npx claude-code-templates@latest --skill creative-design/interactive-portfolioWhat interactive-portfolio does
The skill walks you through portfolio structure: a hero block, a work section, an about page, contact details. It spells out what belongs in the first thirty seconds of a visit and which sections matter most. Each project gets a card with a thumbnail, a one-line note on your role, tech tags and an outcome.
Developer and designer tracks are separate. For developers it pushes a cleaned-up GitHub link, live demos and your own contribution on team work, and it steers you away from tutorial clones toward problems real users had. Designers get guidance on case studies that show process instead of finished screens alone.
A section on anti-patterns covers the template look, flashy animation over thin projects, and a portfolio that is just a resume in disguise. A sharp-edges table flags things like a site more elaborate than the work it shows, or one that holds up on desktop and breaks on a phone. Installation drops a SKILL.md file into your skills directory; no API keys or extra libraries are involved.
What it helps with
- lay out a personal site with project pages
- write a case study that shows your own role
- decide which projects to keep and which to cut
- add a call to action and contact details
- check the portfolio on a phone
Example prompts for the agent
- Help me plan the structure of a developer portfolio
- Rewrite this project description so my contribution stands out
- What should I cut so my portfolio doesn't look like a template?
How to install interactive-portfolio
1claude-code-templates
npx claude-code-templates@latest --skill creative-design/interactive-portfolio2Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill interactive-portfolio -a claude-code3Manually: put the files in place
~/.claude/skills/interactive-portfolio/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/interactive-portfolio/
Manually: put the files in place
.agents/skills/interactive-portfolio/SKILL.mdFor all projects use ~/.agents/skills/
Manually: put the files in place
.cursor/skills/interactive-portfolio/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates interactive-portfolio2Manually: put the files in place
.github/skills/interactive-portfolio/SKILL.mdPlatform CLI
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/interactive-portfolioManually: put the files in place
.devin/skills/interactive-portfolio/SKILL.mdThe legacy .windsurf/skills/ path still works
Claude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about interactive-portfolio
How do I install interactive-portfolio in Claude Code?
Use the templates command: npx claude-code-templates@latest --skill creative-design/interactive-portfolio. Or run npx skills add davila7/claude-code-templates --skill interactive-portfolio -a claude-code. The skill then sits at ~/.claude/skills/interactive-portfolio/SKILL.md.
What does interactive-portfolio do?
It helps you design a portfolio: section structure, project cards, case studies, calls to action. It also covers common mistakes such as a template layout or weak projects hidden behind animation.
Which skills does it work with?
The author lists scroll-experience, 3d-web-experience, landing-page-design and personal-branding as companions.
Similar skills
Everything for Design →interactive-portfolio by other authors comes first.
