By JNLei
Design production-grade frontend UIs with bold aesthetics for new React, Vue, Next.js, or Tailwind projects, or analyze design languages in existing codebases, using checklists for implementation.
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.Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
npx claudepluginhub JNLei/claude-tools --plugin frontend-developmentPostToolUse hook to log tool usage analytics
UserPromptSubmit hook to activate relevant skills via intent matching
MCP server for Next.js developer tooling
Command set for developer docs lookup and updates
PreToolUse hook to run TypeScript type-checks
Frontend design skill for UI/UX implementation
Advanced frontend design plugin with interactive wizard, trend research, moodboard creation, color/typography selection, and browser-based inspiration analysis
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS. Includes component scaffolding, bundle analysis, performance optimization, and accessibility best practices.
Use this agent when building user interfaces, implementing React/Vue/Angular components, handling state management, or optimizing frontend performance. This agent excels at creating responsive, accessible, and performant web applications. Examples:\n\n<example>\nContext: Building a new user interface\nuser: "Create a dashboard for displaying user analytics"\nassistant: "I'll build an analytics dashboard with interactive charts. Let me use the frontend-developer agent to create a responsive, data-rich interface."\n<commentary>\nComplex UI components require frontend expertise for proper implementation and performance.\n</commentary>\n</example>\n\n<example>\nContext: Fixing UI/UX issues\nuser: "The mobile navigation is broken on small screens"\nassistant: "I'll fix the responsive navigation issues. Let me use the frontend-developer agent to ensure it works perfectly across all device sizes."\n<commentary>\nResponsive design issues require deep understanding of CSS and mobile-first development.\n</commentary>\n</example>\n\n<example>\nContext: Optimizing frontend performance\nuser: "Our app feels sluggish when loading large datasets"\nassistant: "Performance optimization is crucial for user experience. I'll use the frontend-developer agent to implement virtualization and optimize rendering."\n<commentary>\nFrontend performance requires expertise in React rendering, memoization, and data handling.\n</commentary>\n</example>
Frontend and mobile development with React, Next.js, React Native, and Tailwind
Access thousands of AI prompts and skills directly in your AI coding assistant. Search prompts, discover skills, save your own, and improve prompts with AI.