Help us improve
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
By michelve
Ship design-to-production React 19 apps with Claude Code — Figma-to-code translation, automated code reviews, architecture guardrails, and accessibility enforcement for designers and engineers.
npx claudepluginhub michelve/hugin-marketplace --plugin hugin-v0Analyze blind comparison results to understand WHY the winner won and generate improvement suggestions for skill evaluation.
Automatically resolve TypeScript compilation and build errors systematically. Use when fixing build errors, TypeScript errors, compilation failures, tsc errors, or when the build is broken and needs to be fixed.
Semantic code review using project-specific rules
Review recently written code for best practices, architectural consistency, and system integration. Use when reviewing code, checking implementations, after completing significant code changes, or when asking for a code review.
Refactor code for better organization, cleaner architecture, and improved maintainability. Use when reorganizing code, cleaning up messy files, extracting components, splitting large files, or improving code structure.
Use this skill for any accessibility concern: WCAG compliance (any success criterion including SC 1.3.5 autocomplete, SC 2.4.11 focus obscured), ARIA roles/attributes, screen reader behavior, axe-core or WAVE audit failures, color/non-text contrast, keyboard navigation, focus trapping/management, skip links, touch targets, VPAT reports, or accessible form patterns. Also trigger when a user asks whether a UI library (DSAI) handles keyboard interactions — but only if the question is specifically about accessibility behavior, not general usage. Do NOT trigger for general component usage questions where keyboard behavior is incidental (e.g., "does DSAI Tooltip show on hover and focus?" without an accessibility problem to solve).
Write, validate, and commit Architecture Decision Records in MADR 4.0.0 format. Use when user says 'write an ADR', 'create an ADR', 'document this decision', 'ADR for X', 'architecture decision record for X', 'record this decision', 'document the decision to use X', or wants to formally capture an architectural choice. Do NOT trigger on 'what ADR covers X?', 'show me the ADR for Y', 'does this violate an ADR?', or 'check ADR compliance' - those are lookup/audit tasks.
Automatic semantic code review triggered after file modifications. Hook-driven skill that logs file changes via PostToolUse and runs the automatic-code-reviewer agent on Stop. Not user-invocable — triggered automatically by lifecycle hooks.
Generate interactive HTML dependency graphs for React components. Use when asked to "visualize components", "show component dependencies", "dependency graph", "component map", or "what depends on what".
Creates well-formed tasks following a template that engineers can implement. Triggers on: 'create tasks', 'define work items', 'break this down', creating tasks from PRD, converting requirements into actionable tasks, feature breakdown, sprint planning.
Structured architectural analysis with dependency mapping, component diagrams, and actionable recommendations
Detailed code review output with inline findings, severity levels, and actionable fix suggestions
Technical documentation output with structured prose, API references, and example-driven explanations
Step-by-step refactoring guidance with before/after comparisons, risk assessment, and migration plans
Matches all tools
Hooks run on every tool call, not just specific ones
Executes bash commands
Hook triggers when Bash tool is used
Share bugs, ideas, or general feedback.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
UI/UX Design Plugin - Visual fidelity from Figma/mockups, design system enforcement, React UI prototyping with pattern memory, and brand icon asset generation.
Shared Claude Code plugin for frontend teams, including frontend skills, subagents, hooks, and MCP integration for Figma/Sketch/MasterGo/Pixso/墨刀/摹客. All reports auto-saved as Markdown files.
Convert Figma designs and screenshots into production-ready code components with accessibility built-in
Design System compliance harness for Claude + Figma. Enforces library-first components, token binding, and automated QA — so AI-generated designs stay on-spec.
Plugin that includes the Figma MCP server and Skills for common workflows
Implement UI designs from specs with pixel-perfect component generation
Cowork-compatible skills, agents, hooks, and MCP servers for shipping design-to-production React 19 apps — Figma-to-code translation, accessibility enforcement, and development best practices for designers and engineers.
Modifies files
Hook triggers on file write and edit operations
Modifies files
Hook triggers on file write and edit operations
External network access
Connects to servers outside your machine
External network access
Connects to servers outside your machine
Requires secrets
Needs API keys or credentials to function
Requires secrets
Needs API keys or credentials to function
Uses power tools
Uses Bash, Write, or Edit tools
Uses power tools
Uses Bash, Write, or Edit tools
Share bugs, ideas, or general feedback.
A Claude Code plugin that helps product designers and engineers ship design-to-production react apps — translating Figma mockups into accessible, production-ready components with automated code reviews, architecture guardrails, and quality gates baked into every workflow.
Packed with 27 skills, 13 agents, 8 event hooks, 7 MCP servers, 4 output styles, and 1 LSP server covering the full stack: React 19, TypeScript, Express, Prisma, DSAI Design System, and Bootstrap 5.
Built for and tested with draft_v0 — a full-stack starter with opinionated architecture, ADR workflows, task management, Figma integration, and automated code quality gates.
/plugin marketplace add michelve/hugin-marketplace
/plugin install hugin-v0@hugin-marketplace
claude --plugin-dir ./path/to/hugin-v0
Or from within Claude Code:
/plugin marketplace add ./path/to/hugin-v0
/plugin install hugin-v0
| Skill | Description | Invocable |
|---|---|---|
| accessibility | WCAG 2.1 AA — keyboard nav, ARIA, focus management, color contrast | /accessibility |
| adr-writer | Write Architecture Decision Records in MADR 4.0.0 format | /adr-writer |
| automatic-code-review | Semantic code review on modified files (hook-driven) | auto |
| figma-code-connect-components | Connect Figma components to code via Code Connect | /figma-code-connect-components |
| component-visualizer | Generate interactive HTML dependency graphs for React components | /component-visualizer |
| figma-create-design-system-rules | Generate project-specific design system Figma-to-code rules | /figma-create-design-system-rules |
| figma-create-new-file | Create a new blank Figma design or FigJam file | /figma-create-new-file |
| create-tasks | Break PRDs into well-formed, INVEST-compliant tasks | /create-tasks |
| figma-generate-design | Build or update full-page screens in Figma from design system | /figma-generate-design |
| figma-generate-library | Build professional design systems in Figma from codebase | /figma-generate-library |
| figma-implement-design | Translate Figma nodes into production-ready code | /figma-implement-design |
| figma-use | Mandatory prerequisite for every use_figma Plugin API call | /figma-use |
| miro-mcp | Create diagrams, tables, docs on Miro boards via MCP | /miro-mcp |
| nodejs | Node.js backend patterns — async/await, middleware, layered architecture | /nodejs |
| playwright-skill | Browser automation, e2e testing, UI validation | /playwright-skill |
| prisma | Prisma Client queries, schema, migrations, transactions | /prisma |
| react | React 19 hooks, Suspense, lazy loading, TypeScript patterns | /react |
| react-best-practices | Vercel Engineering performance optimization guidelines | /react-best-practices |
| route-tester | HTTP API route testing, auth strategies, integration tests | /route-tester |
| dsai-components | DSAI component catalog, types, patterns, compound components, FSM | /dsai-components |
| skill-creator | Create new Claude Code skills and instruction files | /skill-creator |
| skill-developer | Develop and iterate on existing skills | /skill-developer |
| dsai-styling | Bootstrap 5 + DSAI CSS custom properties, cn(), token pipeline | /dsai-styling |
| dsai-tools | DSAI CLI tools — dsai add, tokens build, icons, framework mappers | /dsai-tools |