Frontend Slides
zarazhangrui/frontend-slides
Builds animated HTML slide decks that run in the browser with no dependencies, or converts PowerPoint files to the web, starting from visual style previews.
Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences.
MITAuto-check passed
Install Interactive Portfolio
$ npx skills add davila7/claude-code-templates --skill interactive-portfolio -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install davila7/claude-code-templates interactive-portfolio --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .claude/skills && cp -r skills-src/cli-tool/components/skills/creative-design/interactive-portfolio .claude/skills/interactive-portfolio && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "interactive-portfolio" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/creative-design/interactive-portfolio into .claude/skills/interactive-portfolio/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "interactive-portfolio", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/creative-design/interactive-portfolioType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add davila7/claude-code-templates --skill interactive-portfolio -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install davila7/claude-code-templates interactive-portfolio --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .agents/skills && cp -r skills-src/cli-tool/components/skills/creative-design/interactive-portfolio .agents/skills/interactive-portfolio && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "interactive-portfolio" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/creative-design/interactive-portfolio into .agents/skills/interactive-portfolio/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "interactive-portfolio", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add davila7/claude-code-templates --skill interactive-portfolio -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install davila7/claude-code-templates interactive-portfolio --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/cli-tool/components/skills/creative-design/interactive-portfolio .cursor/skills/interactive-portfolio && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "interactive-portfolio" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/creative-design/interactive-portfolio into .cursor/skills/interactive-portfolio/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "interactive-portfolio", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/davila7/claude-code-templates.git --path cli-tool/components/skills/creative-design/interactive-portfolio--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add davila7/claude-code-templates --skill interactive-portfolio -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install davila7/claude-code-templates interactive-portfolio --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/cli-tool/components/skills/creative-design/interactive-portfolio .gemini/skills/interactive-portfolio && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "interactive-portfolio" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/creative-design/interactive-portfolio into .gemini/skills/interactive-portfolio/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "interactive-portfolio", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install davila7/claude-code-templates interactive-portfolioInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add davila7/claude-code-templates --skill interactive-portfolio -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .github/skills && cp -r skills-src/cli-tool/components/skills/creative-design/interactive-portfolio .github/skills/interactive-portfolio && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "interactive-portfolio" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/creative-design/interactive-portfolio into .github/skills/interactive-portfolio/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "interactive-portfolio", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add davila7/claude-code-templates --skill interactive-portfolio -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install davila7/claude-code-templates interactive-portfolio --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/cli-tool/components/skills/creative-design/interactive-portfolio .opencode/skills/interactive-portfolio && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "interactive-portfolio" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/creative-design/interactive-portfolio into .opencode/skills/interactive-portfolio/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "interactive-portfolio", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
interactive-portfolio- GitHub stars
- 32k
- Used in
- 4 other repos
- Token cost
- ~1.4k tokens
- SKILL.md length
- 220 words
- Files
- 1
- Skills in repo
- 477
- Repo updated
- First seen
- Licence
- MIT
At a glance
Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences.
- Works in 9 steps: Hero image/video → Project overview (2-3 sentences) → The challenge → …
- Personal website
- SKILL.md covers Capabilities and Patterns
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Interactive Portfolio is an agent skill from davila7/claude-code-templates. 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.
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
The repository describes itself as: CLI tool for configuring and monitoring Claude Code. The licence is MIT.
When your agent uses it
- Personal website
- Developer portfolio
- Designer portfolio
Example prompts
- “/interactive-portfolio”
Workflow steps
9 steps, taken from the first numbered list in SKILL.md.
- Hero image/video
- Project overview (2-3 sentences)
- The challenge
- Your role
- Process highlights
- Key decisions
- Results/impact
- Learnings (optional)
- Links (live, GitHub, etc.)
What it can do on your machine
Read from SKILL.md and the folder at commit 14680ec. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Interactive Portfolio loads about 1.4k tokens when it runs. Until then it costs about 93 tokens; SKILL.md has 220 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from davila7/claude-code-templates at commit 14680ec, republished under its MIT licence (© davila7). 220 words, ~1,364 tokens.
Download SKILL.mdSave it as
.claude/skills/interactive-portfolio/SKILL.md (or your agent's skills folder).- 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
## 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 PatternsOption 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
## 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- Hero image/video
- Project overview (2-3 sentences)
- The challenge
- Your role
- Process highlights
- Key decisions
- Results/impact
- Learnings (optional)
- 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 engagementDeveloper Portfolio Specifics
What works for dev portfolios
When to use: When building developer portfolio
## 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 approachBlog/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`© davila7, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in cli-tool/components/skills/creative-design/interactive-portfolio of davila7/claude-code-templates.
Open the folder on GitHubat commit 14680ec
Used in 4 other repositories
We found 7 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 4 other GitHub owners. This page covers the copy in davila7/claude-code-templates, which our catalogue first saw on October 7, 2026.
- Dokhacgiakhoa/Agent-Skills-4-Vibe-Coding-CLI.agent/skills/interactive-portfolio
- agent-skills-hub/agent-skills-hubskills/interactive-portfolio
- benjaminasterA/antigravity-awesome-skillsskills/interactive-portfolio
- henryalouf/ruflow.agents/skills/antigravity-awesome-skills/skills/interactive-portfolio.agents/skills/antigravity-awesome-skills/plugins/antigravity-awesome-skills/skills/interactive-portfolio+2 more
Compare with similar skills
Interactive Portfolio next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Interactive Portfolio this skilldavila7/claude-code-templates | 32k | 4 repos | ~1.4k | Automated safety check: Pass | MIT | |
| Frontend Slideszarazhangrui/frontend-slides | 30k | 16 repos | ~7k | Automated safety check: Pass | MIT | |
| Algorithmic Art with p5.jsanthropics/skills | 180k | 38 repos | ~4.9k | Automated safety check: Pass | Apache-2.0 | |
| Canvas Designanthropics/skills | 180k | 52 repos | ~3k | Automated safety check: Pass | Apache-2.0 | |
| Impeccablebestofjs/bestofjs | 3.1k | 27 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Brand and Design Toolkitnextlevelbuilder/ui-ux-pro-max-skill | 134k | 1 repos | ~3.5k | Automated safety check: Pass | MIT |
Similar skills
- Official
Algorithmic Art with p5.js
anthropics/skills
Creates original generative art in two steps: a written algorithmic philosophy, then a p5.js sketch with seeded randomness and an interactive viewer for exploring parameters.
- Official
Canvas Design
anthropics/skills
Creates original posters and static art as PNG or PDF by first writing a short design philosophy, then expressing it visually on a canvas.
Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
Brand and Design Toolkit
nextlevelbuilder/ui-ux-pro-max-skill
Bundles design tasks behind one skill: brand identity, tokens, UI styling, logos, corporate identity mockups, slides, banners, icons and social images.
HyperFrames Animation
heygen-com/hyperframes
Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.
More from davila7/claude-code-templates
All 477 skills in this repoPerplexity Web Search
davila7/claude-code-templates
Runs web-grounded searches through Perplexity's Sonar models over OpenRouter for current events, recent literature and cited facts beyond the model's training cutoff.
Neuropixels Data Analysis
davila7/claude-code-templates
Analyzes Neuropixels recordings from SpikeGLX or Open Ephys through preprocessing, drift correction, Kilosort4 spike sorting, quality metrics and curation.
Scientific Venue Templates
davila7/claude-code-templates
Supplies LaTeX templates and formatting rules for journals, conferences, posters, and grant proposals, then can check a draft against them.
Brand Voice Content Creator
davila7/claude-code-templates
Analyzes a brand's existing writing to lock in a consistent voice, then builds SEO blog posts and platform-specific social content around it.
CAPA Officer
davila7/claude-code-templates
Guides corrective and preventive action (CAPA) work in a quality management system, from initiation and root cause analysis through effectiveness verification.
Fda Consultant Specialist
davila7/claude-code-templates
Senior FDA consultant and specialist for medical device companies including HIPAA compliance and requirement management.
Questions about Interactive Portfolio
What does Interactive Portfolio do?
Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Interactive Portfolio is an agent skill from davila7/claude-code-templates. Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences.
When should I use Interactive Portfolio?
Interactive Portfolio fits situations like: personal website; developer portfolio; designer portfolio.
How do I install Interactive Portfolio in Claude Code?
Run `npx skills add davila7/claude-code-templates --skill interactive-portfolio -a claude-code`. Or copy the skill folder (cli-tool/components/skills/creative-design/interactive-portfolio in davila7/claude-code-templates) into .claude/skills/interactive-portfolio in your project. Claude Code loads it when a task matches its description.
How do I install Interactive Portfolio in Codex?
Run `npx skills add davila7/claude-code-templates --skill interactive-portfolio -a codex`. Or copy the skill folder (cli-tool/components/skills/creative-design/interactive-portfolio in davila7/claude-code-templates) into .agents/skills/interactive-portfolio in your project. Codex loads it when a task matches its description.
Can I use Interactive Portfolio in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add davila7/claude-code-templates --skill interactive-portfolio -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/interactive-portfolio, .gemini/skills/interactive-portfolio, .github/skills/interactive-portfolio and .opencode/skills/interactive-portfolio in your project.
What does Interactive Portfolio need to run?
SKILL.md names no scripts, command-line tools or credentials: Interactive Portfolio is instructions for the agent only.
Does Interactive Portfolio access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Interactive Portfolio safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Interactive Portfolio use?
Interactive Portfolio is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Interactive Portfolio use?
About 1.4k tokens (SKILL.md is roughly 5.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Interactive Portfolio?
Skills that share tags, products or a category with Interactive Portfolio: Frontend Slides (zarazhangrui/frontend-slides, 30k stars), Algorithmic Art with p5.js (anthropics/skills, 180k stars), Canvas Design (anthropics/skills, 180k stars) and Impeccable (bestofjs/bestofjs, 3.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Interactive Portfolio?
davila7 (a GitHub user) maintains it in davila7/claude-code-templates, which has 32,463 GitHub stars. The repository holds 477 skills in this directory. The repository was last updated on October 8, 2026.
Source: davila7/claude-code-templates on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.