AgentToolHub
Skill

frontend-design

frontend-design — a Claude Code skill from benshapyro/cadre-devkit-claude

Features

  • ✓Curated collection of frontend-design — a claude code skill from benshapyro/cadre-devkit-claude resources
  • ✓Covers a wide range of tools across multiple categories
  • ✓Community-maintained and regularly updated
  • ✓Browse the [GitHub repository](https://github.com/benshapyro/cadre-devkit-claude) for the complete list

Installation Guide

Option 1: Via Plugin System (Recommended)

Start Claude Code:

bash
claude

Then inside Claude Code, add the marketplace and install the plugin:

bash
/plugin marketplace add github.com/benshapyro/cadre-devkit-claude
/plugin install cadre-devkit-claude@cadre-devkit

For local development, use the file path:

bash
/plugin marketplace add /Users/bshap/Projects/cadre-internal/devkits/cadre-devkit-claude
/plugin install cadre-devkit-claude@cadre-devkit

Option 2: Git Clone with Install Script

bash
git clone https://github.com/benshapyro/cadre-devkit-claude.git
cd cadre-devkit-claude
./install.sh

Option 3: Manual Installation

bash
# Clone
git clone https://github.com/benshapyro/cadre-devkit-claude.git

# Copy components
cp -r cadre-devkit-claude/commands/* ~/.claude/commands/
cp -r cadre-devkit-claude/skills/* ~/.claude/skills/
cp -r cadre-devkit-claude/agents/* ~/.claude/agents/
cp -r cadre-devkit-claude/hooks/* ~/.claude/hooks/

# Make hooks executable
chmod +x ~/.claude/hooks/**/*.py
chmod +x ~/.claude/hooks/**/*.sh

Configure Hooks

Add to ~/.claude/settings.json:

json
{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Bash",
        "hooks": [{ "type": "command", "command": "~/.claude/hooks/security/dangerous-command-blocker.py" }]
      },
      {
        "matcher": "Edit|Write|Read",
        "hooks": [{ "type": "command", "command": "~/.claude/hooks/security/sensitive-file-guard.py" }]
      }
    ],
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [
          { "type": "command", "command": "~/.claude/hooks/formatting/auto-format.py" },
          { "type": "command", "command": "~/.claude/hooks/testing/test-on-change.py" }
        ]
      }
    ]
  }
}

Verify Installation

After installing via plugin system, restart Claude Code to load the plugin. Then verify:

bash
/help                       # Should show /learn, /plan, /research, etc.
/learn                      # Should show welcome message
Can you run rm -rf /        # Should be blocked by security hook

If you used the install script or manual installation, hooks are configured automatically in your ~/.claude/settings.json.

---

Reviews