Expertise in designing and structuring portfolios to land jobs and clients.
Install
mkdir -p .claude/skills/interactive-portfolio-h4d3zs && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13375" && unzip -o skill.zip -d .claude/skills/interactive-portfolio-h4d3zs && rm skill.zipInstalls to .claude/skills/interactive-portfolio-h4d3zs
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Design portfolio architecture
- →Design project showcases
- →Create interactive case studies
- →Develop personal branding for developers/designers
- →Optimize for contact conversion
- →Integrate testimonials effectively
How it works
The skill applies knowledge modules covering portfolio architecture, project showcase design, and personal branding to create portfolios that convert visitors into opportunities.
Inputs & outputs
When to use interactive-portfolio
- →Building a personal website
- →Creating case studies
- →Showcasing project impact
About this skill
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
🧠 Knowledge Modules (Fractal Skills)
1. Portfolio Architecture
2. The 30-Second Test
3. Essential Sections
4. Navigation Patterns
5. Hero Section Formula
6. Project Showcase
7. Project Card Elements
8. Case Study Structure
9. Showing Impact
10. Visual Presentation
11. Developer Portfolio Specifics
12. What Hiring Managers Look For
13. Must-Haves
14. Project Selection
15. Technical Showcase
16. Blog/Writing
17. ❌ Template Portfolio
18. ❌ All Style No Substance
19. ❌ Resume Website
When not to use it
- →The task is to create a resume website
- →The task focuses only on style without substance
- →The task involves using a template portfolio without customization
Limitations
- →It does not support creating a resume website
- →It avoids portfolios that are all style and no substance
- →It does not recommend template portfolios
How it compares
This skill focuses on creating portfolios that are memorable and convert visitors into opportunities by balancing creativity with usability, unlike generic portfolio creation.
Compared to similar skills
interactive-portfolio side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| interactive-portfolio (this skill) | 0 | 3mo | No flags | Intermediate |
| frontend-design | 481 | 2mo | No flags | Advanced |
| visual-design-foundations | 5 | 5mo | No flags | Beginner |
| add-icon | 1 | 7mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by H4D3ZS
View all by H4D3ZS →You might also like
frontend-design
anthropics
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
visual-design-foundations
wshobson
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
add-icon
wei
Add or update supported language, framework, library, tool, or platform icons in Socialify. Use when a request involves adding a new icon/logo, mapping a display name to a Simple Icons entry or a custom icon, and updating the language options list used in the UI.
landing-page-guide
bear2u
Comprehensive guide for creating effective landing pages using Next.js or React. This skill should be used when users request to create landing pages, marketing pages, or product pages that require the 11 essential elements for high-converting landing pages. Specifically designed for Next.js 14+ App Router with ShadCN UI components.
web-asset-generator
alonw0
Generate web assets including favicons, app icons (PWA), and social media meta images (Open Graph) for Facebook, Twitter, WhatsApp, and LinkedIn. Use when users need icons, favicons, social sharing images, or Open Graph images from logos or text slogans. Handles image resizing, text-to-image generation, and provides proper HTML meta tags.
tech-logos
crafter-station
Install official tech brand logos from the Elements registry. Use when user needs logos for tech companies (Clerk, Vercel, GitHub, etc.), AI providers (OpenAI, Anthropic, Claude), social platforms, or any brand assets. Triggers on "logo", "brand", "icon for [company]", "add [company] logo", placeholder logo detection, or when building landing pages, auth UIs, or integrations showcases.