What are Claude Code Skills?

Claude Code Skills are reusable prompt templates stored as markdown files in your project's .claude/skills/ directory. They let you codify best practices and common workflows into slash commands that Claude follows consistently.

How do I create a Claude Code Skill?

Create a markdown file in .claude/skills/ with instructions for Claude. The filename becomes the command name — for example, .claude/skills/code-review.md can be invoked with /code-review during a Claude Code session.

Can I share skills with my team?

Yes. Skills stored in .claude/skills/ can be committed to version control so every team member has access to the same standardized workflows. You can also organize skills into subdirectories by category.

What is the difference between project and global skills?

Project skills (.claude/skills/) are specific to the current project and are committed to git. Global skills (~/.claude/skills/) are personal skills available across all your projects.

fuse-design

New

12Community RegistryDevelopmentby Fusengine · MIT

UI Designer. Generates HTML/CSS via Gemini Design MCP. 7-phase pipeline with state tracking. Identity System, UX copy, page layouts, motion system, design audit. Anti-AI-Slop, WCAG 2.2.

Community PluginView Source

Overview

!version !plugins !agents !skills !License: MIT !platform !Windows

A plugin ecosystem that turns Claude Code into a supervised, multi-agent development environment. Expert agents write code, hooks enforce quality in real-time, skills inject framework-specific knowledge, and intelligent cartography auto-maps plugins and projects — so Claude never guesses, never duplicates, and always follows your architecture.

!Statusline

What It Does

Without plugins: Claude Code writes code based on its training data. It can hallucinate APIs, duplicate existing code, ignore your project structure, and produce inconsistent quality.

With Fusengine plugins:

•Expert agents detect your project type (Next.js, Laravel, React, Astro, Swift...) and load framework-specific documentation via MCP servers before writing a single line
•82 hooks intercept every Write/Edit/Bash call in real-time to enforce file size limits (<100 lines), block code duplication (DRY), require SOLID references, and validate security
•125 skills inject copy-paste-ready templates, architecture patterns, and best practices directly into agent context — no hallucination needed
•APEX workflow structures every task through Analyze → Plan → Execute (TDD) → Review → Validate — preventing the "just write code and hope" approach
•Sniper validation runs a 7-phase quality check after every modification: explore → research → grep usages → lint → fix → zero errors

Quick Install

bash

# Add marketplace
/plugin marketplace add fusengine/agents

# Install all plugins
/plugin install fuse-ai-pilot fuse-commit-pro fuse-laravel fuse-nextjs fuse-react fuse-astro fuse-swift-apple-expert fuse-solid fuse-tailwindcss fuse-design fuse-prompt-engineer fuse-shadcn-ui fuse-security fuse-changelog

# Setup (hooks + API keys + MCP servers)
~/.claude/plugins/marketplaces/fusengine-plugins/setup.sh        # macOS / Linux
~\.claude\plugins\marketplaces\fusengine-plugins\setup.ps1       # Windows

Statusline (optional):

bash

bun --cwd ~/.claude/plugins/marketplaces/fusengine-plugins/plugins/core-guards/statusline run config

How It Works

code

User prompt → Hook detects project type → Expert agent activated
            → Hook loads SOLID references → Agent reads docs via MCP
            → Hook blocks if DRY violation → Agent writes code
            → Hook checks file size → Sniper validates quality
            → Hook blocks secrets → Commit with version bump

Every step is intercepted. Claude cannot skip research, cannot duplicate code, cannot exceed file size limits, and cannot commit without security validation.

Plugins

Development — Framework Expert Agents

Each plugin provides an expert agent that auto-activates when it detects the framework in your project. The agent has access to official documentation via MCP servers and follows SOLID principles enforced by hooks.

Plugin	Detects	What the agent does
fuse-nextjs	`next.config.*`	App Router, RSC, Prisma 7, Better Auth, proxy.ts patterns
fuse-laravel	`composer.json` + `artisan`	Eloquent, Livewire, Blade, queues, Sanctum, Stripe Connect
fuse-react	`package.json` + React	React 19 hooks, TanStack Router/Form, Zustand stores
fuse-astro	`astro.config.*`	Islands, Content Layer, Actions, SEO, Starlight, i18n
fuse-swift-apple-expert	`Package.swift`	SwiftUI, concurrency, all Apple platforms (iOS → visionOS)
fuse-tailwindcss	`tailwind.config.*`	v4.1 CSS-first config, @theme, @utility, OKLCH colors
fuse-design	Any UI task	Gemini Design MCP + shadcn/ui + WCAG 2.2 accessibility
fuse-shadcn-ui	`components.json`	Radix/Base UI detection, registry, theming, migration

Quality & Security — Automated Enforcement

Plugin	What it enforces
fuse-ai-pilot	APEX workflow orchestration, 7-phase sniper validation, DRY detection via jscpd, 4-level cache (60-75% token savings)
fuse-security	OWASP Top 10 scanning, CVE research via NVD/OSV.dev, dependency audit, secrets detection, auth patterns audit
fuse-solid	Files < 100 lines, interface separation, JSDoc mandatory — auto-detected for TypeScript, PHP, Swift, Go, Java, Ruby, Rust

Productivity — Automation

Plugin	What it automates
fuse-commit-pro	Conventional commits with security check, auto version bump, CHANGELOG, git tag — blocks secrets from commits
fuse-prompt-engineer	Prompt creation with CoT/Few-Shot/Meta-Prompting, A/B testing, 50+ template library, agent design
fuse-cartographer	Intelligent cartography: auto-generates navigable maps of plugins and projects at SessionStart with merge-preserving enrichment — agents navigate via linked index trees, `/map --enrich` completes descriptions from source frontmatter
fuse-changelog	Monitors Claude Code updates, detects breaking changes in plugins, gathers community feedback via Exa

Core (auto-installed, always active)

Plugin	What it guards
core-guards	Blocks `git push --force`, `rm -rf`, `npm install` without lock, enforces SOLID file limits, tracks session state, DRY duplication blocking — also bundles token-optimization hooks (MCP verbosity caps, MCP + WebFetch disk cache, SessionStart cleanup)
claude-rules	Injects APEX/SOLID/DRY rules into every prompt so Claude never forgets the methodology

Key Features

Feature	How it prevents mistakes
APEX Workflow	Forces Analyze before coding — no more "let me just write this real quick"
[Agent Teams](docs/workflow/agent-teams.md)	Parallel agents with exclusive file ownership — no merge conflicts
DRY Detection	Blocks Write/Edit if function/class name already exists — forces import or shared extraction
SOLID Hooks	Denies file save if >100 lines or missing SOLID reference read
Sniper Validation	7-phase post-edit check: explore → research → grep → lint → fix → zero errors
[4-Level Cache](docs/reference/cache-system.md)	Caches exploration, docs, lessons, tests — 60-75% token savings
Token-efficient by default	Caps MCP verbosity (Context7/Exa `numResults≤3`, `tokens≤2000`), disk cache for MCP results + WebFetch with TTL (48h / 24h) and ripgrep lookup, auto-cleanup at SessionStart — typically saves ~150-200 KB per research-heavy session
28 MCP Servers	Context7, Exa, Astro docs, Gemini Design, shadcn, Playwright, and more
Smart Commits	Security scan before commit, auto version bump, CHANGELOG, shields.io badge sync

Documentation

Section	Content
Getting Started	Installation, configuration, first steps
Workflow	APEX methodology, agents, skills, commands
Plugins	Per-plugin documentation and skills
Reference	Architecture, hooks, MCP servers, cache system

License

MIT

Install & Usage

Create the skills directory

mkdir -p .claude/skills

Download the skill file

mkdir -p .claude/skills && curl -o .claude/skills/fuse-design.md https://raw.githubusercontent.com/fusengine/agents/main/SKILL.md

Invoke in Claude Code

/fuse-design

View source on GitHub

designmcpui-uxdesign-directoridentity-systemmulti-stackreactnextjs

Frequently Asked Questions

What is fuse-design?

UI Designer. Generates HTML/CSS via Gemini Design MCP. 7-phase pipeline with state tracking. Identity System, UX copy, page layouts, motion system, design audit. Anti-AI-Slop, WCAG 2.2.

How to install fuse-design?

To install fuse-design, create the .claude/skills directory in your project, then run the curl command to download the skill file. Once installed, invoke it in Claude Code with /fuse-design.

What is fuse-design best for?

fuse-design is a community categorized under Development. It is designed for: design, mcp, ui-ux, design-director, identity-system, multi-stack, react, nextjs. Created by Fusengine.