Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

interactive-portfolio — Claude Code skill: setup and features

Builds developer and designer portfolios focused on converting visitors into job offers and client leads. Use it when planning or restructuring a personal showcase site.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add sickn33/agentic-awesome-skills --skill interactive-portfolio -a claude-code
Open on GitHub

What interactive-portfolio does

The skill acts as a portfolio experience designer. It structures project presentations, personal branding, and user journeys so hiring managers or clients see your strongest work right away. Brevity matters. The skill focuses on clean positioning rather than flashy gimmicks.

Execution requires reading references/detailed-guide.md beforehand, which defines safety prerequisites and validation steps. If key requirements, permissions, or success metrics are absent, the agent stops and asks for clarification.

Generated output cannot substitute for environment-specific testing or manual review. You will still need to inspect and validate the code in your own deployment setup.

What it helps with

  • structure a developer or designer personal portfolio
  • showcase projects to convert visitors into client leads
  • clarify personal branding without excessive visual gimmicks
  • present complex technical case studies clearly

Example prompts for the agent

  • Help me build an interactive developer portfolio that converts visitors
  • Structure my personal website to showcase creative coding and client projects
  • How should I present my design case studies so recruiters see the impact fast?

How to install interactive-portfolio

1Skills CLI (Vercel)

npx skills add sickn33/agentic-awesome-skills --skill interactive-portfolio -a claude-code

2Manually: put the files in place

~/.claude/skills/interactive-portfolio/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/interactive-portfolio/

From the same set80

The whole set →
docker-expert sickn33 A skill that turns your AI agent into a Docker reviewer for Dockerfiles, multi-stage builds and container security. Useful when images and Compose files need a second look. Claude Code CX Codex Cursor +1 27,200installs typescript-expert sickn33 A skill for TypeScript and JavaScript work: it reads your project setup, fixes type errors and speeds up type checking. Useful once a TS codebase gets big. Claude Code CX Codex Cursor +1 12,600installs browser-automation sickn33 This skill builds browser checks around observed UI state and explicit outcomes. Use it for UI workflows, timing failures, or authorised page-data collection. Claude Code CX Codex Cursor +1 6,700installs nextjs-supabase-auth sickn33 This skill wires Supabase Auth into the Next.js App Router with clients, middleware, OAuth callbacks, and Server Actions. Use it when you need protected routes and session handling. Claude Code CX Codex Cursor +1 6,500installs 3d-web-experience sickn33 Helps build and debug web 3D scenes, product configurators, and portfolios. Covers stack choice, model loading, scroll interaction, and performance checks. Claude Code CX Codex Cursor +1 5,200installs prisma-expert sickn33 This skill helps inspect Prisma schemas, migrations, and queries. Use it to investigate an error or review database changes before deployment. Claude Code CX Codex Cursor +1 4,200installs playwright-skill sickn33 Write and run Playwright browser tests directly in Claude Code: responsive design checks, login flows, form submissions, screenshots. Executes locally via Node with a visible browser window. Claude Code CX Codex Cursor +1 3,900installs game-development sickn33 Guides game architecture decisions, platform choices, and core loop structure. Directs the assistant to specialized sub-skills for web, mobile, PC, or VR. Claude Code CX Codex Cursor +1 3,800installs

Similar

spartan spartan-ng Helps manage spartan/ui components in Angular projects, from adding and composing them to styling and debugging. It covers the Brain and Helm layers. Claude Code CX Codex Cursor +1 2,200installs html-plan plannotator Turns project notes and requirements into a self-contained HTML plan. Useful for organizing phases, dependencies, and owners without turning the doc into a dashboard. Claude Code CX Codex Cursor +1 3,800installs html plannotator A skill that makes the agent build one self-contained HTML file with styles and scripts inlined: a report, landing page, deck or calculator. It also knows which sibling skill should take the job instead. Claude Code CX Codex Cursor +1 3,800installs flutter-dev MiniMax-AI A Flutter development guide for widget patterns, Riverpod, Bloc, and GoRouter. Use it when building layouts, navigation, tests, or reviewing performance. Claude Code CX Codex Cursor +1 2,000installs uniwind uni-stack A skill that hands the agent Uniwind's rules and reference files, so it builds and debugs Tailwind CSS v4 interfaces in React Native instead of guessing APIs. Claude Code CX Codex Cursor +1 4,400installs chat-motion-overlay nexu-io Builds animated chat scenes from text or screenshots, then prepares them for Remotion rendering. Use it for message bubbles, app-style chat views, and transparent overlays. Claude Code CX Codex Cursor +1 820installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about interactive-portfolio

How do I install interactive-portfolio in Claude Code?

Run npx skills add sickn33/agentic-awesome-skills --skill interactive-portfolio -a claude-code in your terminal.

What does interactive-portfolio do?

It provides guidance on portfolio UX, project presentation, and conversion strategies for developers and designers. The goal is creating memorable sites that turn traffic into professional opportunities.

What prerequisites or limitations does this skill have?

You must consult references/detailed-guide.md before execution for mandatory validation rules. The output does not replace environment-specific testing or expert code review.

Source text

SKILL.md · MIT 
---
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.
risk: critical
source: vibeship-spawner-skills (Apache 2.0)
date_added: 2026-02-27
---

# Interactive Portfolio

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.

**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
a visitor may review a portfolio briefly. Make its purpose and strongest
work clear quickly. You help people stand out without being gimmicky.

### Expertise

- Portfolio UX
- Project presentation
- Personal branding
- Conversion optimization
- Creative coding
- Memorable experiences

## Detailed Guide

Read [the detailed guide](references/detailed-guide.md) before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.

## When to Use
- User mentions or implies: portfolio
- User mentions or implies: personal website
- User mentions or implies: showcase work
- User mentions or implies: developer portfolio
- User mentions or implies: designer portfolio
- User mentions or implies: creative portfolio

## Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

© sickn33 · MIT · sickn33/agentic-awesome-skills

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor