Claude Code Skills Panel

Stop typing /full-flow from memory.

If you use Claude Code (Anthropic's AI coding assistant) and you've installed even one plugin, you've probably got 30+ slash commands you can't remember.

This is the panel for them. One click to fire any command. Or 1–6. Or fuzzy search. Or just browse.

Three things you get the moment you install:

1. A grid of every slash command on your machine. Your ~/.claude/skills/, your ~/.claude/commands/, your project-level .claude/, and every plugin you've installed via /plugin install — all auto-discovered, no setup.
2. One-click execution. Click a card → command goes to clipboard. Or auto-paste + Enter. Or send straight to your active terminal. Pick the mode that fits.
3. A built-in plugin marketplace browser. 243+ official plugins, searchable, one-click install. The GUI Claude Code never had.

And then the side-project gravity hits:

• ⚔️ A buddy that branches into 1 of 10 RPG classes based on your slash command usage. Use a lot of /git-*? You become Gitto the Ninja. Heavy on /code-review? Testra the Paladin. Reincarnate any time.
• 🎨 Three pixel themes — Dark, Retro CRT, Gameboy LCD
• 🏆 Skills level up (LV.0 → LV.5), 16 achievements, weekly Markdown report
• 🌐 Four languages — English / 한국어 / 日本語 / 中文

All gamification is one toggle off. The clean professional panel is one click away.

외워서 타이핑하지 말고 한 번에 클릭 · もう打たないで、ワンクリックで起動 · 别再死记斜杠命令,一键触发

Built mostly with Claude Code itself. Free, MIT, ~120 KB, no telemetry by default.

Preview

Activity Bar (narrow)

Bottom Panel (wide)

Install

Cursor / Windsurf / VS Codium — install from OpenVSX VS Code — install from VS Marketplace

Or open the Extensions tab (Cmd+Shift+X), search Claude Code Skills Panel, and click Install.

Features

🔍 Auto-discovery

Scans every slash command source on your machine, no setup required:

New plugin? Just install with /plugin install <name>@<marketplace> and it shows up on the next refresh.

🎮 Interactions

⚡ Quick Bar — unlocked by evolution

Drag your most-used skills to 6 slots and trigger them with number keys. Each slot unlocks as your buddy evolves.

// keybindings.json — trigger from anywhere, even without the panel open
{ "key": "cmd+shift+1", "command": "claudeSkills.quickSlot1" }

🚀 Execution Modes (▶ button)

✏️ Customization

• Alias — rename any skill with a shorter label
• Note — shown in the hover popover
• Custom icon — upload your own image (PNG/SVG/JPG/GIF)
• Hide — declutter skills you rarely use

All settings saved to ~/.claude/skills-panel-config.json — version-controllable via dotfiles.

🐾 Claude Skills Buddies — class-branch evolution

A pixel-art companion that branches into one of 10 RPG classes based on your most-used slash-command category. Everyone starts the same; your usage decides who you become.

Don't like your class? Hit 🔄 Reincarnate — the locked class clears, your counts stay, and the next action picks fresh.

Stats: 🧠 INT (brainstorm/review skills) · ⚡ DEX (Quick Bar usage) · ❤️ VIT (daily streak) · 🍀 LCK (achievements)

🏆 Metagame

• 16 achievements — volume / variety / streaks / mastery / customization
• Weekly report (📊) — 7-day activity chart + TOP 5 skills
• Mastery ★ — LV.1–5 per skill, with level-up animation and sound
• Daily streak — 🔥 N days tracked in footer

🎨 Pixel-art UI

• Pixel fonts: DotGothic16 (Korean) + Press Start 2P (English)
• 30 custom spark-style icons — one per skill category, consistent dark frame
• CRT effects — scanlines + vignette (toggleable)
• 8-bit sounds — hover, click, level-up (toggleable)
• Animations — chamfer corners, sparkle hover, shake on click, staggered card entrance

Keyboard Shortcuts (optional)

Add to Preferences: Open Keyboard Shortcuts (JSON):

[
  { "key": "cmd+shift+1", "command": "claudeSkills.quickSlot1" },
  { "key": "cmd+shift+2", "command": "claudeSkills.quickSlot2" },
  { "key": "cmd+shift+3", "command": "claudeSkills.quickSlot3" },
  { "key": "cmd+shift+4", "command": "claudeSkills.quickSlot4" },
  { "key": "cmd+shift+5", "command": "claudeSkills.quickSlot5" },
  { "key": "cmd+shift+6", "command": "claudeSkills.quickSlot6" }
]

Development

git clone https://github.com/parksubeom/claude-skills-panel
cd claude-skills-panel
npm install

npm run build:pixels   # pixel icon set
npm run build:spark    # 30 spark-style skill icons
npm run build:buddy    # 6-stage buddy character
npm run package        # build all + package .vsix

# Manual publish (CI handles this on tagged releases)
npx ovsx publish -p $OVSX_PAT       # OpenVSX (Cursor / Windsurf / VS Codium)
npx vsce publish -p $VSCE_PAT       # VS Code Marketplace

Releasing

Push a vX.Y.Z tag — GitHub Actions builds, packages, and publishes to both marketplaces in parallel. See .github/workflows/publish.yml for the full pipeline.

Links

• Issues / feature requests — GitHub Issues
• Changelog — CHANGELOG.md
• OpenVSX listing — https://open-vsx.org/extension/parksubeom/claude-skills-panel
• VS Marketplace listing — https://marketplace.visualstudio.com/items?itemName=parksubeom.claude-skills-panel

License

MIT © parksubeom