content-hub
About
Content Hub is a browser-based asset gallery for managing marketing assets with visual grid browsing, filtering/search, and brand context sidebar. It provides asset preview/edit actions and generation capabilities while maintaining R2-ready manifests for future cloud sync. Use this skill when browsing assets, managing content libraries, or generating new assets with brand context.
Quick Install
Claude Code
Recommended/plugin add https://github.com/majiayu000/claude-skill-registrygit clone https://github.com/majiayu000/claude-skill-registry.git ~/.claude/skills/content-hubCopy and paste this command in Claude Code to install this skill
Documentation
Content Hub
Visual asset gallery for ClaudeKit Marketing.
Quick Start
# Open gallery
node .claude/skills/content-hub/scripts/server.cjs --open
# Rescan assets
node .claude/skills/content-hub/scripts/server.cjs --scan
# Stop server
node .claude/skills/content-hub/scripts/server.cjs --stop
Or use command: /write:hub
Features
- Gallery Grid: Thumbnails of assets/ folder
- Filter/Search: By type (banners, designs, etc.) and keywords
- Brand Sidebar: Displays user's colors and voice from docs/brand-guidelines.md
- Actions: Preview, Edit in Claude, Copy path, Generate new
- R2 Ready: Manifest schema supports Cloudflare R2 sync (UI disabled)
API Routes
| Route | Purpose |
|---|---|
/hub | Gallery HTML |
/api/assets | Asset list JSON |
/api/brand | Brand context JSON |
/api/scan | Trigger rescan |
/file/* | Serve local files |
Manifest Schema
Assets stored in .assets/manifest.json with R2 fields:
{
"id": "abc123",
"path": "banners/hero.png",
"category": "banner",
"r2": {
"status": "local", // local|pending|synced|error
"bucket": null,
"url": null
}
}
Scripts
| Script | Purpose |
|---|---|
scripts/server.cjs | HTTP server entry |
scripts/lib/scanner.cjs | Scan assets directory |
scripts/lib/router.cjs | HTTP routing |
scripts/lib/brand-context.cjs | Extract brand guidelines |
Integration
Command: /write:hub
Related Skills: brand-guidelines, ai-multimodal, design
Agents: content-creator, ui-ux-designer
GitHub Repository
Related Skills
content-collections
MetaThis skill provides a production-tested setup for Content Collections, a TypeScript-first tool that transforms Markdown/MDX files into type-safe data collections with Zod validation. Use it when building blogs, documentation sites, or content-heavy Vite + React applications to ensure type safety and automatic content validation. It covers everything from Vite plugin configuration and MDX compilation to deployment optimization and schema validation.
creating-opencode-plugins
MetaThis skill provides the structure and API specifications for creating OpenCode plugins that hook into 25+ event types like commands, files, and LSP operations. It offers implementation patterns for JavaScript/TypeScript modules that intercept and extend the AI assistant's lifecycle. Use it when you need to build event-driven plugins for monitoring, custom handling, or extending OpenCode's capabilities.
langchain
MetaLangChain is a framework for building LLM applications using agents, chains, and RAG pipelines. It supports multiple LLM providers, offers 500+ integrations, and includes features like tool calling and memory management. Use it for rapid prototyping and deploying production systems like chatbots, autonomous agents, and question-answering services.
Algorithmic Art Generation
MetaThis skill helps developers create algorithmic art using p5.js, focusing on generative art, computational aesthetics, and interactive visualizations. It automatically activates for topics like "generative art" or "p5.js visualization" and guides you through creating unique algorithms with features like seeded randomness, flow fields, and particle systems. Use it when you need to build reproducible, code-driven artistic patterns.
