Frontend Resume

Create zero-dependency, animation-rich HTML resume pages that run entirely in the browser. Help users discover their preferred aesthetic through visual exploration, then generate production-quality interactive resumes.

Core Philosophy

Zero Dependencies — Single HTML files with inline CSS/JS. No npm, no build tools.
Show, Don't Tell — Generate visual previews, let users pick what they like.
Distinctive Design — Avoid generic "AI slop" aesthetics. Each resume should feel custom-crafted.
Print-Friendly — Every resume MUST include @media print styles for clean PDF output.
Accessible — Semantic HTML, keyboard nav, reduced motion support, WCAG AA contrast.

Phase 0: Detect Mode

Determine what the user wants:

Mode A: From File — User provides a resume file (.pdf, .docx, .md, .txt, .json) → Phase 1 Mode B: From Text — User provides resume content as text → Phase 1 Mode C: Enhancement — User has an existing HTML resume to improve → Read file, then Phase 2

Phase 1: Content Extraction & Structuring

Step 1.1: File Extraction (Mode A only)

Run scripts/extract_resume.py on the user's resume file:

python [skill-dir]/scripts/extract_resume.py <resume_file>

Supported formats and dependencies:

Format	Extensions	Python Dependency	Notes
PDF	.pdf	`pdfplumber` (preferred) or `PyPDF2`	`pip install pdfplumber`
Word	.docx	`python-docx`	`pip install python-docx`
Markdown	.md	None	Parses headings, lists, bold/italic
Plain Text	.txt	None	ALL-CAPS lines inferred as headings
JSON Resume	.json	None (built-in `json`)	jsonresume.org schema; already structured — can skip Step 1.2

If a required dependency is missing, the script prints install instructions.

Present extracted content to user for confirmation. For JSON Resume files, the data is already structured — present the mapped sections directly and skip to Step 1.3 unless the user wants to adjust.

Step 1.2: Structure Content

Parse raw text into structured sections:

header: name, title/tagline, location, contact (email, phone, LinkedIn, GitHub, portfolio)
about: professional summary
experience[]: company, role, dates, location, bullets
education[]: school, degree, dates, honors/GPA
skills{}: grouped by category with optional proficiency levels (0-100)
projects[]: name, description, tech stack, link
certifications[]: name, issuer, date (optional)
languages[]: language, proficiency (optional)

Present structured content to user for review. Ask: "Does this look correct? Any sections to add, remove, or modify?"

Step 1.3: Section Priority

Ask via AskUserQuestion:

Header: "Layout"
Question: "Which sections should be most prominent?"
Options:
- "Experience-heavy" — Work history is the star (senior professionals)
- "Skills-focused" — Technical skills front and center (developers/engineers)
- "Projects-driven" — Portfolio/projects spotlight (designers/freelancers)
- "Balanced" — Equal weight to all sections

Phase 2: Style Discovery

Step 2.0: Style Path

Ask: "How would you like to choose your resume style?"

"Show me options" — Generate 3 visual previews (recommended) → Step 2.1
"I know what I want" — Pick from preset list directly → Show preset picker below

Available Presets:

Preset	Vibe	Best For
Midnight Architect	Sophisticated, premium	Executives, consultants
Neon Terminal	Hacker-chic, developer	Software engineers, DevOps
Dark Luxe	Elegant, editorial	Creative directors, marketing
Cosmic Depth	Bold, futuristic	Tech founders, AI/ML engineers
Clean Slate	Minimal, Swiss-inspired	Designers, product managers
Paper Craft	Warm, tactile	Writers, educators, academics
Soft Blueprint	Technical, approachable	Engineers, data scientists
Brutalist Mono	Raw, anti-design	Brand strategists, standout seekers
Sage Garden	Nature-inspired, calming	HR, wellness, educators
Retro Ink	Vintage editorial	Journalists, personal brands

If user picks one directly, skip to Phase 3.

Step 2.1: Guided Discovery

Question 1 — Mood (multiSelect up to 2):

"Professional/Authoritative" — Established, trustworthy
"Creative/Distinctive" — Unique, design-forward
"Modern/Technical" — Clean, developer-oriented
"Warm/Approachable" — Friendly, personable

Question 2 — Tone:

"Light" — Clean, printable
"Dark" — Bold, screen-optimized
"Either" — Let the style decide

Step 2.2: Generate 3 Previews

Based on mood + tone, select 3 presets. Read references/STYLE_PRESETS.md for full preset definitions.

Mood-to-preset mapping:

Mood	Dark	Light	Specialty
Professional	Midnight Architect, Dark Luxe	Clean Slate, Soft Blueprint	—
Creative	Dark Luxe, Cosmic Depth	Paper Craft	Brutalist Mono, Retro Ink
Modern/Technical	Neon Terminal, Cosmic Depth	Soft Blueprint	Brutalist Mono
Warm	Dark Luxe	Paper Craft, Sage Garden	Retro Ink

Generate 3 mini HTML previews in .claude-design/resume-previews/:

.claude-design/resume-previews/
├── style-a.html
├── style-b.html
└── style-c.html

Each preview: self-contained (~80-120 lines), shows hero section + one experience entry + skill bars. Enough to convey the aesthetic.

NEVER use these generic patterns:

Inter, Roboto, Arial as display fonts
Purple gradients on white, generic indigo #6366f1
Everything centered with no variation
Gratuitous glassmorphism

Step 2.3: Choose

Present previews, ask user to pick one or mix elements.

Phase 3: Generate Resume

Read these reference files for the chosen preset:

references/STYLE_PRESETS.md — Full CSS variables, font URLs, color palette, animation style
references/RESUME_COMPONENTS.md — Interactive component CSS/JS patterns
references/HTML_ARCHITECTURE.md — Base HTML template, mandatory CSS, JS architecture, print styles, accessibility checklist

Output

Generate a single self-contained HTML file:

All CSS inline in <style>
All JS inline in <script>
Google Fonts / Fontshare via <link> (gracefully degradable)
Semantic HTML5 structure

Required Features

Scroll-triggered reveals — Elements animate in via IntersectionObserver
Floating navigation — Fixed nav with active section tracking
Animated skill bars — Fill on scroll-into-view
Scroll progress bar — Thin bar at top
Back-to-top button — Appears after scrolling
Print stylesheet — @media print with white bg, no animations, visible URLs
Reduced motion — @media (prefers-reduced-motion: reduce) disables animations
Responsive — All sizes use clamp(), works mobile through desktop

Verification Checklist

Before delivering, verify:

All typography uses clamp(min, preferred, max)
All spacing uses clamp() or viewport units
Semantic HTML (<header>, <main>, <section>, <nav>)
Print styles included and functional
Reduced motion respected
ARIA labels on nav, buttons, progress bar
Color contrast meets WCAG AA
External links have target="_blank" rel="noopener"

Phase 4: Delivery

Clean up — Delete .claude-design/resume-previews/ if it exists
Open — Launch in browser: open [filename].html
Summary:

Your interactive resume is ready!

File: [filename].html
Style: [Style Name]
Sections: [list]

Features:
- Scroll-triggered animations
- Animated skill bars
- Interactive timeline
- Floating navigation
- Print-friendly (Ctrl+P)
- Responsive on all screen sizes

To customize:
- Colors: Edit :root CSS variables at the top
- Fonts: Change the font import link
- Animations: Modify .reveal class timings
- Content: Edit text directly in the HTML

Would you like me to make any adjustments?

Troubleshooting

PDF extraction returns little text: PDF may be image-based (scanned). Ask user to provide text content directly.

DOCX extraction missing structure: Some DOCX files don't use standard heading styles (Heading 1/2/3). The extractor falls back to font size from individual runs. If structure is still unclear, ask the user to confirm which lines are section headers.

JSON Resume fields missing: The JSON may omit optional sections (projects, certificates, etc.). Present what's available and ask the user if they want to add missing sections manually.

Markdown frontmatter interference: YAML frontmatter delimiters (---) are skipped automatically. If the resume content itself uses --- as horizontal rules, they will also be skipped — this is generally harmless.

Fonts not loading: Check font URL. Ensure font-family declaration includes system font fallback.

Animations not triggering: Verify IntersectionObserver is initialized. Check that .visible class is being added.

Print output looks wrong: Ensure @media print block exists. Check that animations are disabled and backgrounds are white.

frontend-resume