tools-only Claude Code Skills Hub - Marketplace Website
Technology Partners
Sponsored by nixtla.io
Live Site: claudecodeplugins.io
Static site generator for the Claude Code plugins marketplace. Built with Astro 5.16, Tailwind CSS 4.1, and Fuse.js for instant search.
Features
- 244 Searchable Skills - Instant fuzzy search with Fuse.js
- 521 Static Routes - Pre-rendered for maximum performance
- Learning Hub - Interactive tutorials and production workflows
- Skills Directory - Filterable, sortable catalog with metadata
- Zero JavaScript Required - Progressive enhancement only
Quick Start
# Install dependencies
npm install
# Start dev server (localhost:4321)
npm run dev
# Generate skills catalog
npm run skills:generate
# Build for production
npm run build
# Preview production build
npm run preview
Project Structure
marketplace/
├── src/
│ ├── pages/ # Astro pages (static routes)
│ │ ├── index.astro # Homepage
│ │ ├── skills/ # Skills directory
│ │ ├── learning/ # Learning hub
│ │ └── plugins/ # Plugin pages
│ ├── components/ # Reusable components
│ ├── data/ # Generated catalogs
│ │ └── skills-catalog.json
│ └── layouts/ # Page layouts
├── public/ # Static assets
├── scripts/ # Build scripts
│ └── discover-skills.mjs
└── package.json
Build Process
Skills Discovery (
npm run skills:generate)- Scans
../plugins/forSKILL.mdfiles - Extracts frontmatter metadata
- Generates
src/data/skills-catalog.json - 244 skills across 16 categories
- Scans
Astro Build (
astro build)- Generates 521 static HTML pages
- Optimized CSS with Tailwind 4.1
- Minimal JavaScript (search only)
- Output:
dist/directory
Deployment (automatic on push to main)
- GitHub Actions workflow
- Deploys to GitHub Pages
- CDN: Cloudflare (auto-configured)
Key Routes
/- Homepage with hero, stats, CTA/skills/- Searchable skills catalog (244 skills)/learning/- Interactive tutorials and guides/plugins/[name]/- Individual plugin pages (259 plugins)/playbooks/- Production workflow playbooks
Performance
- Bundle Size: 1.66 MB (40% reduction from 2.79 MB)
- Lighthouse Score: 98+ on all metrics
- Load Time: < 2s on 3G
- Search: < 50ms fuzzy search with Fuse.js
Development Commands
| Command | Action |
|---|---|
npm install |
Install dependencies |
npm run dev |
Start dev server at localhost:4321 |
npm run skills:generate |
Regenerate skills catalog from plugins |
npm run build |
Build production site to ./dist/ |
npm run preview |
Preview production build locally |
npm run astro ... |
Run Astro CLI commands |
Technology Stack
- Framework: Astro 5.16.0 (static site generator)
- Styling: Tailwind CSS 4.1.17
- Search: Fuse.js 7.1.0 (fuzzy search)
- Typography: Poppins (headings) + Lora (body)
- Icons: SVG icons (inline)
- Deployment: GitHub Pages + Cloudflare CDN
Design System
Brand Colors:
- Dark:
#141413 - Light:
#faf9f5 - Mid Gray:
#b0aea5 - Orange:
#d97757(primary accent) - Blue:
#6a9bcc - Green:
#788c5d
Typography:
- Headings: Poppins (sans-serif)
- Body: Lora (serif)
- Monospace: System default
Contributing
See 007-DR-GUID-contributing.md for contribution guidelines.
License
MIT License - see 001-BL-LICN-license.txt
Maintained by: Intent Solutions IO Contact: jeremy@intentsolutions.io Repository: github.com/jeremylongshore/claude-code-plugins