claude-code-marketplace 0.9.0 → 0.10.0

package/README.md

@@ -1,89 +1,53 @@
 # Claude Code Marketplace
 
-A web-based dashboard for browsing, installing, and managing [Claude Code](https://docs.anthropic.com/en/docs/claude-code) plugins across multiple marketplaces.
-
 [![npm version](https://img.shields.io/npm/v/claude-code-marketplace)](https://www.npmjs.com/package/claude-code-marketplace)
 [![license](https://img.shields.io/npm/l/claude-code-marketplace)](LICENSE)
 [![npm downloads](https://img.shields.io/npm/dm/claude-code-marketplace)](https://www.npmjs.com/package/claude-code-marketplace)
 
-<p align="center">
-  <img src="assets/main-dark.png" alt="Marketplace — dark theme" width="100%">
-</p>
-
-<details>
-<summary>Light theme & file preview</summary>
-
-<p align="center">
-  <img src="assets/main-light.png" alt="Marketplace — light theme" width="100%">
-</p>
+**[Live Demo & Docs](https://nikiforovall.blog/claude-code-marketplace/)**
 
-<p align="center">
-  <img src="assets/prevew-light.png" alt="Plugin file preview" width="100%">
-</p>
+> Browse, install, and manage [Claude Code](https://docs.anthropic.com/en/docs/claude-code) plugins across multiple marketplaces.
 
-</details>
+![Marketplace dashboard](assets/shot-marketplace.png)
 
-## Quick Start
+## Getting Started
 
 ```bash
 npx claude-code-marketplace --open
 ```
 
-Or with a custom port:
-
-```bash
-npx claude-code-marketplace --port 8080
-```
-
-### Options
-
-```
---port <number>   Custom port (default: 3542)
---project <path>  Project directory for project-scoped plugins
---open            Open browser on start
-```
+That's it — the dashboard reads your `~/.claude/plugins/` registry and opens in the browser. All install/uninstall/enable/disable operations delegate to the official `claude plugin` CLI, so Claude Code must be installed and on your PATH.
 
 ## Features
 
 - **Multi-marketplace browser** — aggregate plugins from GitHub repos, git URLs, and local directories
-- **Scope management** — install, enable, and disable plugins per scope (user / project / local)
+- **Scope management** — install, enable, and disable plugins per scope, with `U`/`P`/`L` state badges (user / project / local)
 - **Component inspection** — browse skills, commands, agents, MCP servers, hooks, and LSP servers inside each plugin
 - **File preview** — read plugin source files directly in the browser with syntax highlighting
+- **Full catalog view** — marketplace info panel shows every plugin a source offers, installed or not
+- **User & project customizations** — your local `~/.claude/` and `./.claude/` skills, commands, agents, and hooks appear as browsable virtual marketplaces
 - **Marketplace actions** — add, update, and remove marketplace sources
-- **PWA support** — installable as a standalone desktop app with offline caching
-- **Dark / light theme** — styled with IBM Plex Mono, orange accent palette
+- **17 color themes** — Ember, Gruvbox, Catppuccin, Tokyo Night, Dracula, Nord, and more — each in light and dark
 - **Keyboard-first** — vim-style navigation, press `?` for shortcuts
+- **PWA support** — installable as a standalone desktop app
 
-## How It Works
-
-The server reads `~/.claude/plugins/` to discover installed marketplaces and plugin registries. Each marketplace points to a directory containing a `.claude-plugin/marketplace.json` manifest listing available plugins.
-
-The UI renders a tree of marketplaces with their plugins. Clicking a plugin opens its detail panel showing description, version, scope installation matrix, and filesystem-based component breakdown.
+![Plugin components and scope matrix](assets/shot-plugin-components.png)
 
-All plugin management operations (install, uninstall, enable, disable) delegate to `claude plugin` CLI commands.
+![File preview with syntax highlighting](assets/shot-file-preview.png)
 
-## Tech Stack
+![Dark theme — Tokyo Night](assets/shot-dark-theme.png)
 
-- **Frontend** — vanilla JS single-page app, no framework dependencies
-- **Backend** — Express.js serving static files + REST API
-- **Styling** — CSS custom properties with dark/light theme support
-- **Icons** — inline SVG (Feather-style, 24x24 viewBox)
-- **Linter** — Biome with husky pre-commit hook
+## Configuration
 
-## Development
-
-```bash
-git clone https://github.com/NikiforovAll/claude-code-marketplace.git
-cd claude-code-marketplace
-npm install
-npm run dev
 ```
-
-```bash
-npm run lint        # check with biome
-npm run lint:fix    # auto-fix
+--port <number>   Custom port (default: 3542, falls back if busy)
+--project <path>  Project directory for project-scoped plugins
+--dir <path>      Custom Claude config dir (default: ~/.claude)
+--open            Open browser on start
 ```
 
+The config dir can also be set via the `CLAUDE_CONFIG_DIR` environment variable.
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-marketplace",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Web UI for browsing and managing Claude Code marketplace plugins",
   "main": "server.js",
   "bin": {

package/server.js

@@ -14,7 +14,13 @@ app.get('/hub-config', (_req, res) => {
 
 app.use(express.static(path.join(__dirname, 'public')));
 
-const CLAUDE_DIR = path.join(os.homedir(), '.claude');
+function getClaudeDir() {
+  const dir = getArg('dir') || process.env.CLAUDE_CONFIG_DIR || process.env.CLAUDE_DIR;
+  if (dir) return dir.startsWith('~') ? dir.replace('~', os.homedir()) : dir;
+  return path.join(os.homedir(), '.claude');
+}
+
+const CLAUDE_DIR = getClaudeDir();
 const PLUGINS_DIR = path.join(CLAUDE_DIR, 'plugins');
 
 let _marketplaceCache = null;