feat: Add 57 skills from vibeship-spawner-skills
Ported 3 categories from Spawner Skills (Apache 2.0): - AI Agents (21 skills): langfuse, langgraph, crewai, rag-engineer, etc. - Integrations (25 skills): stripe, firebase, vercel, supabase, etc. - Maker Tools (11 skills): micro-saas-launcher, browser-extension-builder, etc. All skills converted from 4-file YAML to SKILL.md format. Source: https://github.com/vibeforge1111/vibeship-spawner-skills
This commit is contained in:
sck_0
223
skills/interactive-portfolio/SKILL.md
Normal file
223
skills/interactive-portfolio/SKILL.md
Normal file
@@ -0,0 +1,223 @@
|
||||
---
|
||||
name: interactive-portfolio
|
||||
description: "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."
|
||||
source: vibeship-spawner-skills (Apache 2.0)
|
||||
---
|
||||
|
||||
# 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
|
||||
```
|
||||
|
||||
### 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
|
||||
|
||||
```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.)
|
||||
```
|
||||
|
||||
### 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
|
||||
```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`
|
||||
Reference in New Issue
Block a user