Communitygithub.com

NVlabs/Skill2Env

Balance visual design with ATS compatibility for creative roles

What is Skill2Env?

Skill2Env is a Claude Code agent skill that balance visual design with ATS compatibility for creative roles.

Works with~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/NVlabs/Skill2Env/tree/HEAD/SkillHub/skills/creative-portfolio-resume

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

Creative Portfolio Resume

When to Use This Skill

Use this skill when the user:

  • Works in a creative field (design, marketing, writing)
  • Needs to balance visual design with ATS compatibility
  • Wants to showcase creative skills through resume design
  • Is building a portfolio resume for creative roles
  • Mentions: "creative resume", "designer resume", "visual resume", "portfolio resume", "creative field"

Core Capabilities

  • Balance visual appeal with ATS compatibility
  • Design resumes for creative roles
  • Integrate portfolio elements with resume content
  • Advise on when to use creative vs. traditional formats
  • Guide visual hierarchy and design choices
  • Connect resume to portfolio effectively

The Creative Resume Dilemma

The Problem:

  • Creative professionals want to show design skills through their resume
  • But most applications go through ATS systems
  • Overly designed resumes often fail ATS parsing

The Solution: Two-version approach:

  1. ATS-compatible version for online applications
  2. Designed version for portfolio, networking, direct submissions

When to Use Each Version

Use ATS-Compatible Version When:

  • Applying through online portals
  • Submitting to job boards
  • Resume will be parsed by software
  • You're unsure how it will be processed

Use Designed Version When:

  • Networking events
  • Direct email to hiring manager
  • Portfolio website
  • In-person interviews
  • Creative agencies that expect visual resumes
  • When specifically told ATS isn't used

ATS-Compatible Creative Resume

Even the ATS version can show creativity through:

Subtle Design Elements

  • Strategic use of white space
  • Clean typography hierarchy
  • Thoughtful content organization
  • Strong copywriting
  • Polished, professional appearance

Safe Creative Touches

  • ✅ Custom professional font (ATS-safe ones)
  • ✅ Strategic bold and italic
  • ✅ Clean section dividers (simple lines)
  • ✅ Consistent, intentional spacing
  • ✅ Color in your name/headers (sparing)
  • ✅ Hyperlinks to portfolio

Still Avoid

  • ❌ Multiple columns
  • ❌ Text boxes
  • ❌ Images or icons
  • ❌ Tables for layout
  • ❌ Unusual fonts
  • ❌ Graphics or skill bars

Designed Portfolio Resume

Design Principles

1. Show, Don't Just Tell

  • Your resume IS a design sample
  • Typography choices matter
  • Layout demonstrates design thinking
  • Details show attention to craft

2. Clarity Over Cleverness

  • Information must still be findable
  • Prioritize readability
  • Save experimental design for portfolio pieces

3. Brand Consistency

  • Match your portfolio website
  • Consistent color palette
  • Unified visual identity

Visual Elements to Consider

Typography:

  • Headline font (display, personality)
  • Body font (readable, professional)
  • Size hierarchy (name > sections > body)
  • Line height and letter spacing

Color:

  • Brand color for accents
  • High contrast for readability
  • Limited palette (2-3 colors max)
  • Consider print-friendly colors

Layout:

  • Consider two-column (for designed version only)
  • Strategic white space
  • Clear visual hierarchy
  • Consistent margins and gutters

Visual Accents:

  • Icons (if used, consistently)
  • Dividers and rules
  • Subtle background elements
  • Your logo/personal brand mark

Creative Field-Specific Guidance

Graphic Designers

Must Show:

  • Typography skills
  • Layout and composition
  • Visual hierarchy
  • Attention to detail

Resume Approach:

  • Your resume IS a portfolio piece
  • Clean, sophisticated design
  • Show range through subtle choices
  • Link to portfolio for variety

UX/Product Designers

Must Show:

  • Information architecture skills
  • User-centered thinking
  • Clear visual hierarchy
  • Systematic approach

Resume Approach:

  • Scannable, organized structure
  • Clear content hierarchy
  • User (recruiter) focused organization
  • Link to case studies

Marketing/Brand

Must Show:

  • Brand thinking
  • Storytelling ability
  • Strategic communication
  • Attention to audience

Resume Approach:

  • On-brand visual identity
  • Compelling narrative flow
  • Strategic content choices
  • Proof points for claims

Writers/Content

Must Show:

  • Writing quality
  • Editing precision
  • Clear communication
  • Voice and style

Resume Approach:

  • Impeccable copy
  • Strong bullets
  • Zero errors
  • Personality through writing

Photographers/Video

Must Show:

  • Visual eye
  • Production quality
  • Technical skill
  • Aesthetic sensibility

Resume Approach:

  • Clean, uncluttered design
  • Strong portfolio link
  • Quality over quantity
  • Let portfolio speak

Portfolio Integration

On the Resume

Link to Portfolio:

Portfolio: yourname.com

Link to Specific Work:

• Redesigned checkout flow, increasing conversion by 40%
  Case Study: yourname.com/checkout

Portfolio Website Resume Page

Options:

  1. PDF download (designed version)
  2. HTML resume page
  3. Interactive resume experience
  4. All of the above

Best Practice:

  • Offer PDF download for convenience
  • Ensure web version is responsive
  • Keep updated with main resume

Design Execution Tips

Typography Checklist

  • Name is largest element
  • Clear hierarchy (3-4 levels max)
  • Body text is 10-12pt minimum
  • Line height allows breathing room
  • No more than 2 font families
  • Fonts complement each other

Layout Checklist

  • Clear sections and flow
  • Consistent margins throughout
  • Adequate white space
  • Elements align to grid
  • Visual balance achieved
  • Scannable in 6 seconds

Color Checklist

  • Limited palette (2-3 colors)
  • High contrast for text
  • Accessible color choices
  • Prints well in B&W
  • Consistent with personal brand
  • Professional appearance

Tools for Designed Resumes

Design Software:

  • Adobe InDesign (best for layout)
  • Figma (good for web-native)
  • Adobe Illustrator (vector-based)
  • Sketch (Mac option)

Simpler Options:

  • Canva (templates available)
  • Google Docs (limited but ATS-safe)
  • Microsoft Word (surprisingly capable)

Avoid:

  • PowerPoint/Keynote (not designed for this)
  • Random online resume builders
  • Heavy templates that obscure content

Output Format

When creating a creative resume:

# CREATIVE RESUME STRATEGY

## Role Type: [Design/Marketing/Creative]
## Industry: [Agency/In-house/Freelance]

## Version Strategy

### Version 1: ATS-Compatible
**Use for:** Online applications, job boards
**Format:** .docx and .pdf
**Design level:** Clean and professional, minimal embellishment

### Version 2: Designed
**Use for:** Portfolio, networking, direct outreach
**Format:** .pdf (print-quality)
**Design level:** Full creative treatment

## Design Specifications

### Typography
- Headline: [Font name, weight, size]
- Body: [Font name, weight, size]
- Accent: [Font name, use case]

### Colors
- Primary: [Hex code] - [Use case]
- Secondary: [Hex code] - [Use case]  
- Text: [Hex code]

### Layout
- Format: [Single column / Two column]
- Margins: [Specifications]
- Grid: [If applicable]

## Portfolio Integration
- Main portfolio link: [URL]
- Case studies to highlight: [List]
- Resume page on portfolio: [Y/N]

## Content Adjustments for Creative Field
- [Specific content recommendation]
- [Specific content recommendation]

Creative Resume Checklist

  • ✅ Have both ATS and designed versions
  • ✅ Design demonstrates relevant skills
  • ✅ Content is still clear and scannable
  • ✅ Portfolio is prominently linked
  • ✅ Visual identity is consistent
  • ✅ Typography is professional
  • ✅ Colors are accessible and print-friendly
  • ✅ File is optimized for sharing (reasonable size)
  • ✅ Content quality matches design quality
  • ✅ Resume is a worthy portfolio piece

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

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

Transform resume bullets into detailed portfolio case studies

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

Related Skills