MR
Mayur Rathi
@mayurrathi
⭐ 40.7k GitHub stars

Interactive Portfolio

Interactive Portfolio is an design AI skill with a core value of Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. It helps developers solve real-world problems in the design domain, boosting efficiency, automating repetitive tasks, and optimizing workflows.

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,...

Last verified on: 2026-07-07

Quick Facts

Category design
Works With Claude
Source sickn33/antigravity-awesome-skills
Stars ⭐ 40.7k
Last Verified 2026-07-07
Risk Level Low
mkdir -p ./skills/interactive-portfolio && curl -sfL https://raw.githubusercontent.com/sickn33/antigravity-awesome-skills/main/skills/interactive-portfolio/SKILL.md -o ./skills/interactive-portfolio/SKILL.md

Run in terminal / PowerShell. Requires curl (Unix) or PowerShell 5+ (Windows).

Skill Content

# 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


javascript 
## 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

text 

### Hero Section Formula

[Your name]

[What you do in one line]

[One line that differentiates you]

[CTA: View Work / Contact]

text

Project Showcase


How to present work effectively


**When to use**: When building project sections


javascript 
## 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

1. Hero image/video

2. Project overview (2-3 sentences)

3. The challenge

4. Your role

5. Process highlights

6. Key decisions

7. Results/impact

8. Learnings (optional)

9. Links (live, GitHub, etc.)

text 

### 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


javascript 
## 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

// Show code snippets that demonstrate:

- Clean architecture decisions

- Performance optimizations

- Clever solutions

- Testing approach

text 

### 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 Styl

🎯 Best For

  • UI designers
  • Product designers
  • Claude users
  • Designers
  • Creative professionals

💡 Use Cases

  • Generating component mockups
  • Creating design system tokens
  • Design system documentation
  • Component specification creation

📖 How to Use This Skill

  1. 1

    Install the Skill

    Copy the install command from the Terminal tab and run it. The SKILL.md file downloads to your local skills directory.

  2. 2

    Load into Your AI Assistant

    Open Claude and reference the skill. Paste the SKILL.md content or use the system prompt tab.

  3. 3

    Apply Interactive Portfolio to Your Work

    Provide context for your task — paste source material, describe your audience, or share existing work to guide the AI.

  4. 4

    Review and Refine

    Edit the AI output for accuracy, tone, and completeness. Add human insight where the AI lacks context.

❓ Frequently Asked Questions

Does this work with Figma?

Some design skills integrate with Figma plugins. Check the Works With section for supported tools.

Does Interactive Portfolio generate production-ready design specs?

It generates detailed specifications that developers can use directly. Review and adjust for your specific design system.

How do I install Interactive Portfolio?

Copy the install command from the Terminal tab and run it. The skill downloads to ./skills/interactive-portfolio/SKILL.md, ready to use.

Can I customize this skill for my team?

Absolutely. Edit the SKILL.md file to add team-specific instructions, examples, or workflows.

⚠️ Common Mistakes to Avoid

Skipping usability testing

AI-generated designs should be validated with real users before development.

Not reading the full skill

Skills contain important context and edge cases beyond the quick start.

🔗 Related Skills

3d-web-experience 3d-web-experienceaccessibility-compliance-accessibility-audit Accessibility Compliance Accessibility Auditalgorithmic-art Algorithmic Artandroid-jetpack-compose-expert Android Jetpack Compose Expertangular-ui-patterns Angular Ui Patternsantigravity-design-expert antigravity-design-expert