By jnlei
Starter bundle for Next.js projects with commands, hooks, scripts, and MCP integration
npx claudepluginhub JNLei/claude-tools --plugin next-project-starterCreate distinctive, production-grade frontend interfaces with exceptional design quality. Two modes - (1) New projects - bold aesthetic design philosophy including typography, color theory, spatial composition, motion design, visual details, avoiding generic AI aesthetics, creating unforgettable interfaces. (2) Existing codebases - mandatory design language analysis enforcing consistency by scanning layout patterns, typography hierarchy, component structure, spacing, theme systems before implementation. Use when building components, pages, applications, design systems, UI modifications. Covers React, Vue, Next.js, HTML/CSS, Tailwind. Keywords - create component, build page, design interface, add UI, aesthetic design, visual design, typography, animations, spatial layout, design system, consistency, pattern analysis, existing codebase.
Create and manage Claude Code skills following Anthropic best practices. Use when creating new skills, modifying skill-rules.json, understanding trigger patterns, working with hooks, debugging skill activation, or implementing progressive disclosure. Covers skill structure, YAML frontmatter, trigger types (keywords, intent patterns, file paths, content patterns), enforcement levels (block, suggest, warn), hook mechanisms (UserPromptSubmit, PreToolUse), session tracking, and the 500-line rule.
Optimize Claude Code skills for token efficiency using progressive disclosure and content loading order. Use when optimizing skills, reducing token usage, restructuring skill content, improving skill performance, analyzing skill size, applying 500-line rule, implementing progressive disclosure, organizing reference files, optimizing YAML frontmatter, reducing context consumption, improving skill architecture, analyzing token costs, splitting large skills, or working with skill content loading. Covers Level 1 (metadata), Level 2 (instructions), Level 3 (resources) loading optimization.
Open-source marketplace of Claude Code plugins (commands, hooks, agents, skills, MCPs, and bundles) in the standard Claude plugin layout.
.claude-plugin/marketplace.json — catalog of all plugins (regenerated from plugins/)plugins/ — actual plugins scoped by type:
commands/ — slash command pluginshooks/ — event hook plugins with hooks/hooks.jsonagents/ — subagent pluginsskills/ — Agent Skills with SKILL.mdmcp/ — MCP server plugins (.mcp.json)bundles/ — multi-component bundlesscripts/generate-marketplace.js — rebuilds the marketplace catalog from manifestsnode scripts/generate-marketplace.js
/plugin marketplace add ./
/plugin install dev-docs@claudesmith-marketplace
claude plugin validate .
Each plugin lives under plugins/<category>/<name>/ with a manifest at .claude-plugin/plugin.json and component directories at the plugin root (not inside .claude-plugin/).
Minimal manifest example:
{
"name": "my-plugin",
"version": "0.1.0",
"description": "What this plugin does",
"author": { "name": "Your Name" },
"license": "MIT",
"keywords": ["team", "feature"]
}
After adding files, run node scripts/generate-marketplace.js to refresh marketplace.json.
.claude-plugin/plugin.json required; keep paths relative; use ${CLAUDE_PLUGIN_ROOT} in scripts/hooks.hooks/hooks.json; scripts in scripts/ and executable.skills/<skill-name>/SKILL.md with frontmatter..mcp.json or mcpServers in manifest; commands may use npx or bundled binaries.keywords in plugin.json; generator merges category + keywords into marketplace tags.Next.js development expertise with skills for App Router, Server Components, Route Handlers, Server Actions, and authentication patterns
Share bugs, ideas, or general feedback.
Advanced Next.js skills for App Router, Server Components, and data fetching.
Persistent memory system for Claude Code - seamlessly preserve context across sessions
Standalone image generation plugin using Nano Banana MCP server. Generates and edits images, icons, diagrams, patterns, and visual assets via Gemini image models. No Gemini CLI dependency required.
Ultra-compressed communication mode. Cuts ~75% of tokens while keeping full technical accuracy by speaking like a caveman.
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns