Agent skill
content-hub
Browser-based asset gallery for managing marketing assets. Visual grid with filter/search, brand context sidebar, and actions (preview, edit, generate). R2-ready manifest for future cloud sync. Use when browsing assets, managing content library, or generating new assets with brand context.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/content-hub
SKILL.md
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?