Communitygithub.com

NVlabs/Skill2Env

Transform resume bullets into detailed portfolio case studies

Qu'est-ce que Skill2Env ?

Skill2Env is a Claude Code agent skill that transform resume bullets into detailed portfolio case studies.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/NVlabs/Skill2Env/tree/HEAD/SkillHub/skills/portfolio-case-study-writer

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Portfolio Case Study Writer

When to Use This Skill

Use this skill when the user:

  • Wants to create portfolio case studies
  • Needs to expand resume bullets into detailed writeups
  • Is building a portfolio website
  • Wants to showcase project work in depth
  • Mentions: "case study", "portfolio", "project writeup", "work samples", "portfolio piece"

Core Capabilities

  • Transform resume bullets into detailed case studies
  • Structure case studies for maximum impact
  • Create compelling project narratives
  • Balance technical detail with business context
  • Format for portfolio websites
  • Tailor depth to audience

Case Study Purpose

Why Case Studies Matter:

  • Resumes show WHAT you did; case studies show HOW and WHY
  • Demonstrate thinking process, not just outcomes
  • Allow deeper showcase of skills
  • Differentiate you from other candidates
  • Required for many PM, UX, and creative roles

The Case Study Structure

Standard Structure

1. Overview (Project summary)
2. Problem (What needed to be solved)
3. Process (How you approached it)
4. Solution (What you created/delivered)
5. Results (The impact)
6. Learnings (What you'd do differently)

Time to Read

  • Quick Read: 3-5 minutes (essential for portfolio)
  • Deep Dive: 10-15 minutes (for interested readers)

Section-by-Section Guide

1. Overview Section

Purpose: Hook the reader, provide context

Include:

  • Project name and company
  • Your role
  • Timeline
  • Team size
  • One-sentence summary of impact

Example:

# Redesigning the Checkout Flow

**Company:** E-Commerce Inc.
**Role:** Lead Product Designer
**Timeline:** 6 weeks
**Team:** 2 designers, 3 engineers, 1 PM

**Summary:** Reduced cart abandonment by 35% through a streamlined 3-step checkout process, generating $2M in recovered revenue.

2. Problem Section

Purpose: Set up why this work mattered

Include:

  • Business context
  • User pain points
  • Key metrics or goals
  • Constraints

Example:

## The Problem

E-Commerce Inc. was experiencing 68% cart abandonment—significantly higher than the industry average of 55%. Exit surveys and user research revealed several issues:

- **Too many steps:** Our checkout had 7 screens
- **Forced account creation:** Users had to register before purchasing
- **Hidden costs:** Shipping wasn't shown until step 5
- **Mobile friction:** Forms weren't optimized for mobile

**Goal:** Reduce cart abandonment to below 50% within 3 months.

**Constraints:**
- No changes to existing payment integrations
- Had to maintain PCI compliance
- 6-week timeline before holiday season

3. Process Section

Purpose: Show your thinking and methodology

Include:

  • Research conducted
  • Stakeholders involved
  • Hypotheses formed
  • Options considered
  • Decisions made (and why)

Example:

## Process

### Research
I started by understanding the problem deeply:
- Analyzed Mixpanel funnel data for drop-off points
- Conducted 10 user interviews with recent abandoners
- Reviewed heatmaps and session recordings
- Benchmarked against 5 competitor checkout flows

**Key Insight:** 73% of drop-offs occurred at the account creation screen. Users wanted to purchase, not commit to a relationship.

### Ideation
I explored several approaches:
1. Guest checkout only (simplest)
2. Social login options (lower friction)
3. Progressive profiling (collect info over time)
4. One-page checkout (Amazon-style)

After weighing feasibility, timeline, and impact, we chose a hybrid approach...

### Decisions Made
- **Guest checkout first:** Made registration optional and post-purchase
- **Transparent pricing:** Showed shipping on the first screen
- **Mobile-first design:** Designed for mobile, then adapted for desktop
- **Progress indicator:** Added clear "Step 1 of 3" indicator

4. Solution Section

Purpose: Show what you actually created

Include:

  • Visual artifacts (mockups, screenshots, diagrams)
  • Key features/changes
  • Technical implementation (if relevant)
  • How it addressed the problems

Example:

## Solution

### The New Checkout Flow

**Before:** 7 screens with mandatory registration
**After:** 3 screens with optional guest checkout

[IMAGE: Before/After comparison]

### Key Changes

**1. Transparent Pricing Widget**
[IMAGE: Pricing widget mockup]
Showed order total, shipping, and taxes from the start. No surprises.

**2. Guest Checkout Option**
[IMAGE: Guest checkout screen]
Made account creation optional with clear value proposition for why to register.

**3. Smart Form Design**
[IMAGE: Form design]
- Single-column layout on mobile
- Auto-format for phone/card numbers
- Address autocomplete integration
- Clear error messaging

**4. Trust Signals**
Added security badges, money-back guarantee, and customer service contact throughout the flow.

5. Results Section

Purpose: Prove impact with data

Include:

  • Quantitative results (with timeframe)
  • Comparison to goals
  • Secondary metrics affected
  • Business impact

Example:

## Results

### Primary Metrics (90 days post-launch)

| Metric | Before | After | Change |
|--------|--------|-------|--------|
| Cart Abandonment | 68% | 44% | -35% |
| Checkout Completion | 32% | 56% | +75% |
| Mobile Conversion | 18% | 41% | +128% |
| Revenue per Visitor | $2.40 | $3.85 | +60% |

### Business Impact
- **$2M additional revenue** in first quarter
- **15% increase in mobile orders**
- **Customer support tickets about checkout** dropped by 45%

### Secondary Effects
- Account creation actually increased 20% (post-purchase)
- Average order value stayed stable
- Return customer rate improved

6. Learnings Section

Purpose: Show growth mindset and self-awareness

Include:

  • What worked well
  • What you'd do differently
  • Unexpected challenges
  • Skills developed

Example:

## Learnings

### What Worked
- **Early user research** prevented us from building the wrong solution
- **Cross-functional alignment** meetings kept everyone on the same page
- **Launching with analytics** let us measure impact immediately

### What I'd Do Differently
- **More A/B testing:** We launched the full redesign at once. Would have preferred to test individual changes to understand what drove results.
- **Earlier mobile focus:** We designed desktop-first then adapted. Starting mobile-first would have been more efficient.
- **Stakeholder education:** Spent too long convincing leadership. Would start stakeholder alignment earlier next time.

### Skills Developed
- Advanced Figma prototyping
- Working with A/B testing frameworks
- Presenting data-driven design decisions to executives

Case Study Types by Role

Product Manager Case Study

Focus on:

  • Strategy and prioritization
  • Stakeholder management
  • Metrics and outcomes
  • Technical trade-offs

UX/Product Designer Case Study

Focus on:

  • User research
  • Design process
  • Visual artifacts
  • Usability improvements

Software Engineer Case Study

Focus on:

  • Technical architecture
  • Problem-solving approach
  • System design
  • Code quality/performance

Marketing Case Study

Focus on:

  • Strategy and targeting
  • Creative execution
  • Channel performance
  • ROI and attribution

Visual Elements

Must-Have Visuals

  • Before/after comparisons
  • Key screens or deliverables
  • Process diagrams
  • Results charts

Nice-to-Have Visuals

  • User journey maps
  • Wireframes evolution
  • Research artifacts
  • Team photos

Visual Tips

  • Use consistent image sizing
  • Add captions explaining each image
  • Blur sensitive data if needed
  • Ensure mobile-friendly image sizes

Output Format

When creating a case study:

# CASE STUDY: [PROJECT NAME]

## Quick Facts
- **Role:** [Your role]
- **Company:** [Company]
- **Timeline:** [Duration]
- **Team:** [Team composition]
- **Impact:** [One-line result]

---

## Overview
[2-3 sentence summary of the project]

## Problem
[Context and challenges - what needed to be solved]

## Process
### Research
[What you learned]

### Approach
[How you tackled it]

### Key Decisions
[Important choices and rationale]

## Solution
[What you built/created - include visual descriptions]

### Feature 1
[Description]

### Feature 2
[Description]

## Results
[Quantified impact]

| Metric | Before | After | Change |
|--------|--------|-------|--------|

## Learnings
[Reflections and growth]

---

## Visual Asset List
[List of images/screenshots needed]

Case Study Quality Checklist

  • ✅ Clear problem statement
  • ✅ Evidence of user/customer focus
  • ✅ Process clearly explained
  • ✅ Your specific contributions are clear
  • ✅ Quantified results
  • ✅ Visual artifacts included
  • ✅ Honest about challenges/learnings
  • ✅ Appropriate length (3-10 min read)
  • ✅ Proofread and polished
  • ✅ Can discuss in detail in interview

Individual skills in this repo

This repo contains 12 individual skills — each has its own dedicated page.

NVlabs/Skill2Env

This skill should be used when the user asks about "digital portfolio", "portfolio website", "project description", "case study", "portfolio curation", "creative portfolio", "act as a portfolio curator", "portfolio curator mode", "portfolio review", "professional presentation", "portfolio architecture", "work samples", "portfolio bio", or needs expertise in building, structuring, and writing professional digital portfolios. Part of the AlterLab FC Skills collection (New Media & Communication department).

NVlabs/Skill2Env

When the user wants to create, generate, or produce video content using AI tools or programmatic frameworks. Also use when the user mentions 'video production,' 'AI video,' 'Remotion,' 'Hyperframes,' 'HeyGen,' 'Synthesia,' 'Veo,' 'Sora,' 'Runway,' 'Kling,' 'Seedance,' 'Hailuo,' 'MiniMax,' 'Pika,' 'Hunyuan,' 'Wan,' 'video generation,' 'AI avatar,' 'talking head video,' 'programmatic video,' 'video template,' 'explainer video,' 'product demo video,' 'video pipeline,' or 'make me a video.' Use this for video creation, generation, and production workflows. For video content strategy and what to post, see social. For paid video ad creative, see ad-creative.

NVlabs/Skill2Env

Balance visual design with ATS compatibility for creative roles

NVlabs/Skill2Env

Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required. Use this skill for any web design task: landing pages, product sites, hero sections, scroll animations, parallax, sticky sections, section overlaps, floating products between sections, clip-path reveals, text that flies in from sides, words that light up on scroll, curtain drops, iris opens, card stacks, bleed typography, and any site that should feel cinematic or premium. Trigger on phrases like "make it feel alive", "Apple-style animation", "sections that overlap", "product rises between sections", "immersive", "scrollytelling", or any scroll-driven visual effect. Covers 45+ techniques across 8 categories. Always inspects, judges, and plans assets before coding. Use aggressively for ANY web design task.

NVlabs/Skill2Env

Read-only queue dashboard for workspace-aware ship. (gstack)

NVlabs/Skill2Env

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

NVlabs/Skill2Env

Audits any landing or service page across 48 checks in 10 categories for LLM/AI discoverability, GEO readiness, content clarity, schema markup, internal linking, freshness signals, and technical crawlability. Produces an overall score out of 100, a per-category score out of 100, pass/warn/fail/ manual counts, and a prioritised fix list — all rendered as a standalone HTML report saved to disk. Use when a user provides a URL and asks to audit it, score it, check its GEO readiness, test its AI discoverability, run a landing page audit, or evaluate it for LLM citation potential. Also trigger on phrases like "audit this page", "score this URL", "check GEO for", "is this page AI-ready", "run a GEO audit", "LLM page check", "how would AI read this page", or "landing page score".

NVlabs/Skill2Env

Generates a premium single-page HTML landing page with 3D CSS animations, GSAP scroll effects, and mouse-parallax depth. Forcing intake (product + elevator pitch, audience register, brand overrides, tone) locks down positioning before any copy or markup is written, so the page reflects the actual product rather than generic boilerplate. Use whenever the user says 'landing for X', 'create a landing page', 'build a landing page', 'make a landing page for X', 'I need a web page for Y', or provides product/service details and wants a polished website. Also triggers on 'promotional page', 'product page', 'one-pager', 'web presence', 'sales page'. Outputs a single self-contained HTML file (Claude Code) or HTML artifact (Claude.ai). Supports configurable brand colors via CSS custom property overrides.

NVlabs/Skill2Env

Use when a user asks to build, optimize, backtest, rebalance, or analyze a stock portfolio with Mean-CVaR, efficient frontiers, scenario generation, or NVIDIA cuOpt.

NVlabs/Skill2Env

Generates high-converting landing pages as complete Next.js/React (TSX) components with Tailwind CSS. Creates hero sections, feature grids, pricing tables, FAQ accordions, testimonial blocks, and CTA sections using proven copy frameworks (PAS, AIDA, BAB). Outputs SEO meta tags, structured data, and performance-optimised code targeting Core Web Vitals (LCP < 1s, CLS < 0.1). Use when the user asks to create a landing page, marketing page, homepage, single-page site, lead capture page, campaign page, promo page, or conversion-optimised web page — or when they want to A/B test landing page variants or replace a static page with one designed to convert.

NVlabs/Skill2Env

> Visual design direction framework organized by emotional intent (Warm/Cold x Active/Calm). The first design reference system that categorizes sites by what they make you FEEL, not how they look. Includes 48 annotated public website references.

NVlabs/Skill2Env

Run a structured 5-pass finishing audit on any website before launch — scoring visual polish, technical foundation, UX completeness, content quality, and cross-device readiness on 100 points. Use when: **Pre-launch** - Final validation before going live; **Post-redesign** - Verify nothing broke during the overhaul; **Client handoff** - Structured proof that the site is ready; **Quarterly review** - Catch accumulated debt; **Single-pass focus** - Run just Pass 2 after a perf sprint

Skills associés