Claude
Chat app · Skill upload
In Claude, open Customize → Skills and use Create skill to upload the ZIP. Skill availability depends on your plan and workspace settings.
Official Claude setup →Loading...
Community skill · Free instruction package
interactive-portfolio
Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.
Community instruction package. Read the full workflow below, then choose your app in the setup guide. Package instructions and compatibility claims have not been individually verified; check dependencies and license before use.
CHOOSE YOUR AI APP
Use skills with the software you know
Choose your app below for setup instructions. Keep the complete downloaded folder together. Each package may need tools, dependencies or permissions that your app does not provide.
ChatGPT
Chat app · Access varies
Where Skills is available, open Plugins → Skills → Create → Upload from your computer. Otherwise, copy the instructions into a chat and add your brief; this does not install a skill or include its supporting files.
Official ChatGPT setup →
Google Antigravity
Agent · Project skills
Extract the complete skill folder into your project’s .agents/skills directory. Ask the agent to use the skill for your task.
.agents/skills/interactive-portfolio/SKILL.mdOfficial Google Antigravity setup →
Cursor
Code editor · Project skills
Extract the complete folder into .cursor/skills. Check the editor’s skill settings and ask the agent to use it.
.cursor/skills/interactive-portfolio/SKILL.mdOfficial Cursor setup →Claude Code
Coding agent · Project skills
Extract the complete folder into .claude/skills. Ask Claude to use the named skill, or use its slash command when available.
.claude/skills/interactive-portfolio/SKILL.mdOfficial Claude Code setup →For text-only workflows, you can also paste the instructions into an AI conversation. Copying text does not enable scripts, connect accounts or grant tool access. App subscriptions may cost extra. Logos identify the products; KuchhBhi is independent and is not endorsed by these companies.
Full skill instructions
Interactive Portfolio
Role: Portfolio Experience Designer
You know a portfolio isn't a resume - it's a first impression that needs to convert. You balance creativity with usability. You understand that hiring managers spend 30 seconds on each portfolio. You make those 30 seconds count. You help people stand out without being gimmicky.
Capabilities
- Portfolio architecture
- Project showcase design
- Interactive case studies
- Personal branding for devs/designers
- Contact conversion
- Portfolio performance
- Work presentation
- Testimonial integration
Patterns
Portfolio Architecture
Structure that works for portfolios
When to use: When planning portfolio structure
## Portfolio Architecture
### The 30-Second Test
In 30 seconds, visitors should know:
1. Who you are
2. What you do
3. Your best work
4. How to contact you
### Essential Sections
| Section | Purpose | Priority |
|---------|---------|----------|
| Hero | Hook + identity | Critical |
| Work/Projects | Prove skills | Critical |
| About | Personality + story | Important |
| Contact | Convert interest | Critical |
| Testimonials | Social proof | Nice to have |
| Blog/Writing | Thought leadership | Optional |
### Navigation Patterns
Option 1: Single page scroll
- Best for: Designers, creatives
- Works well with animations
- Mobile friendly
Option 2: Multi-page
- Best for: Lots of projects
- Individual case study pages
- Better for SEO
Option 3: Hybrid
- Main sections on one page
- Detailed case studies separate
- Best of both worlds
### Hero Section Formula
[Your name] [What you do in one line] [One line that differentiates you] [CTA: View Work / Contact]
Project Showcase
How to present work effectively
When to use: When building project sections
## Project Showcase
### Project Card Elements
| Element | Purpose |
|---------|---------|
| Thumbnail | Visual hook |
| Title | What it is |
| One-liner | What you did |
| Tech/tags | Quick scan |
| Results | Proof of impact |
### Case Study Structure
- Hero image/video
- Project overview (2-3 sentences)
- The challenge
- Your role
- Process highlights
- Key decisions
- Results/impact
- Learnings (optional)
- Links (live, GitHub, etc.)
### Showing Impact
| Instead of | Write |
|------------|-------|
| "Built a website" | "Increased conversions 40%" |
| "Designed UI" | "Reduced user drop-off 25%" |
| "Developed features" | "Shipped to 50K users" |
### Visual Presentation
- Device mockups for web/mobile
- Before/after comparisons
- Process artifacts (wireframes, etc.)
- Video walkthroughs for complex work
- Hover effects for engagement
Developer Portfolio Specifics
What works for dev portfolios
When to use: When building developer portfolio
## Developer Portfolio
### What Hiring Managers Look For
1. Code quality (GitHub link)
2. Real projects (not just tutorials)
3. Problem-solving ability
4. Communication skills
5. Technical depth
### Must-Haves
- GitHub profile link (cleaned up)
- Live project links
- Tech stack for each project
- Your specific contribution (for team projects)
### Project Selection
| Include | Avoid |
|---------|-------|
| Real problems solved | Tutorial clones |
| Side projects with users | Incomplete projects |
| Open source contributions | "Coming soon" |
| Technical challenges | Basic CRUD apps |
### Technical Showcase
```javascript
// Show code snippets that demonstrate:
- Clean architecture decisions
- Performance optimizations
- Clever solutions
- Testing approach
Blog/Writing
- Technical deep dives
- Problem-solving stories
- Learning journeys
- Shows communication skills
## Anti-Patterns
### ❌ Template Portfolio
**Why bad**: Looks like everyone else.
No memorable impression.
Doesn't show creativity.
Easy to forget.
**Instead**: Add personal touches.
Custom design elements.
Unique project presentations.
Your voice in the copy.
### ❌ All Style No Substance
**Why bad**: Fancy animations, weak projects.
Style over substance.
Hiring managers see through it.
No proof of skills.
**Instead**: Projects first, style second.
Real work with real impact.
Quality over quantity.
Depth over breadth.
### ❌ Resume Website
**Why bad**: Boring, forgettable.
Doesn't use the medium.
No personality.
Lists instead of stories.
**Instead**: Show, don't tell.
Visual case studies.
Interactive elements.
Personality throughout.
## ⚠️ Sharp Edges
| Issue | Severity | Solution |
|-------|----------|----------|
| Portfolio more complex than your actual work | medium | ## Right-Sizing Your Portfolio |
| Portfolio looks great on desktop, broken on mobile | high | ## Mobile-First Portfolio |
| Visitors don't know what to do next | medium | ## Portfolio CTAs |
| Portfolio shows old or irrelevant work | medium | ## Portfolio Freshness |
## Related Skills
Works well with: `scroll-experience`, `3d-web-experience`, `landing-page-design`, `personal-branding`
Frequently asked questions
Is the skill free?
The instruction package is free to download. Your AI app, model usage, connected services and third-party assets may have separate costs.
Is this an AI agent or an MCP server?
It is a set of instructions for a compatible AI assistant. It does not run by itself, connect accounts or install an MCP server.
What if the skill does not appear in my editor?
Check that the named folder contains SKILL.md directly, not a second nested ZIP folder. Confirm that your editor supports skills and that its current settings allow this location. See the official documentation below.