BeClaude

frontend-dev

New
3Community RegistryGeneralby Ariff

Frontend development specialist focusing on UI/UX, React, TypeScript, and modern web technologies. Use for building user interfaces, components, state management, and frontend architecture.

Community PluginView Source

Overview

<div align="center">

![Plugins](./marketplace.json) ![Agents](./plugins) ![Skills](./plugins) ![Hooks](./plugins) ![License](./LICENSE) ![Stars](https://github.com/a-ariff/ariff-claude-plugins/stargazers)

65 production-ready plugins for Claude Code -- autonomous agents, power skills, anti-hallucination suite, smart hooks, and custom commands

Compatible with Claude Opus 4.6, Sonnet 4.6, and Haiku 4.5

</div>


What is this?

Claude Code is Anthropic's CLI tool for coding with AI. Plugins extend what Claude Code can do by adding specialized agents, skills, and automation hooks.

This marketplace gives you 53 ready-to-use plugins that turn Claude Code into an autonomous development powerhouse. Instead of telling Claude what to do step by step, you delegate entire tasks to specialized agents that know exactly how to handle them.

Before plugins:

code
You: "Read the auth module, check for SQL injection, review the error handling,
     look at the input validation, check the session management..."

After plugins:

code
You: "Run a security review on the auth module"
Claude: *security-analyst agent handles everything autonomously*

Quick Start

Prerequisites: Claude Code and Git installed.

macOS / Linux:

bash
git clone https://github.com/a-ariff/ariff-claude-plugins.git
cd ariff-claude-plugins && bash scripts/install.sh

Windows (PowerShell):

powershell
git clone https://github.com/a-ariff/ariff-claude-plugins.git
cd ariff-claude-plugins; .\scripts\install.ps1

Done. Start a new Claude Code session and all 65 plugins are available.


What's Inside

65 Plugins in 4 Categories

code
ariff-claude-plugins/
|
|-- 24 Agents      autonomous workers that handle entire tasks
|-- 34 Skills      methodologies and knowledge you can apply on demand
|--  5 Hooks       automatic safeguards that run without you asking
|--  2 Commands    slash commands for common workflows
|
|-- includes 12-plugin Anti-Hallucination Suite

Agents (22) -- delegate entire tasks

Agents are autonomous workers. You give them a task, they figure out the approach, use tools, read files, and deliver results.

CategoryAgentsWhat they do
Developmentarchitect, backend-dev, frontend-dev, performance-engineer, qa-engineer, security-analyst, refactorer, autonomous-dev-assistantBuild, optimize, test, and secure code
Analysissequential-thinker, project-planner, analyzer, mentorPlan, analyze, reason through problems
Safetycontext-validator, intent-clarifier, pre-action-verifier, scope-boundary-checker, fact-checker, dependency-validator, rollback-plannerValidate before acting, catch mistakes early
Specializedsmithery-deployment-agent, smart-routing, setup-orchestratorDeploy MCP servers, route to optimal models, configure environments

Skills (26) -- apply proven methodologies

Skills are knowledge and methodology files that Claude loads when relevant. They teach Claude how to approach specific types of problems.

Superpowers (9): brainstorming, writing-plans, executing-plans, subagent-driven-development, verification-before-completion, root-cause-tracing, defense-in-depth, when-stuck, using-superpowers

Development (12): github, plugin-creator, plugin-checker, canvas-api, api-docs-generator, ci-cd-helper, code-reviewer, commit-message-generator, error-explainer, performance-optimizer, pr-analyzer, refactor-assistant

Testing (3): security-scanner, tdd-workflow, test-writer

Debugging (2): systematic-debugger, memory-sync

Hooks (3) -- automatic safeguards

Hooks run automatically at specific points during Claude's workflow. You don't invoke them -- they watch and act.

HookEventWhat it does
assumption-checkerPreToolUseWarns when Claude makes assumptions instead of checking
memory-syncStopPrompts to save learnings at session end
hooks-referencePreToolUseReference implementation for building your own hooks

Anti-Hallucination Suite (12 plugins) -- stop AI from guessing

A complete system to prevent Claude from making things up. Hooks catch problems automatically, agents cross-verify claims, and skills teach verification methodology.

Why this matters: AI can confidently state things that aren't true -- wrong file paths, invented function names, assumed behavior. These plugins catch that before it reaches you.

PluginTypeWhat it does
hallucination-guardHookScans every response for speculative language and unverified claims
answer-validatorHookChecks that tool outputs match the claims Claude makes about them
truth-finderAgentCross-references claims against actual code, docs, and git history
answer-analyzerAgentReviews Claude's own response for accuracy before delivery
anti-hallucinationSkillComplete methodology: verify before claiming, cite before asserting
cross-checkerSkillVerify from multiple angles: code, tests, git, docs, config
source-verifierSkillEvery claim must have a file:line citation or be flagged
confidence-scorerSkillAssigns 0-100 confidence score to each claim
citation-enforcerSkillForces file:line references for every code claim
uncertainty-detectorSkillCatches when Claude is guessing but sounding certain
output-auditorSkill4-angle review: accuracy, logic, completeness, safety
context-groundingSkillForces reading actual code before making claims about it

Commands (2) -- slash commands

CommandUsageWhat it does
deep-search/deep-search "query"Multi-source semantic search across GitHub, Reddit, docs
task-folder-manager/task-folder-managerCreate dated, organized task folders

How to Install (Step by Step)

This guide assumes you've never installed a Claude Code plugin before. Pick your platform below.

Step 1: Make sure Claude Code is installed

Open any terminal and run:

code
claude --version

If you see a version number (e.g., 2.1.76), you're good. If not, install Claude Code first from claude.ai/code.

Step 2: Clone this repository

code
git clone https://github.com/a-ariff/ariff-claude-plugins.git
cd ariff-claude-plugins

Step 3: Run the installer for your platform

<details> <summary><strong>macOS / Linux (Terminal, iTerm, Warp)</strong></summary>

bash
bash scripts/install.sh

</details>

<details> <summary><strong>Windows (PowerShell)</strong></summary>

powershell
# Run from PowerShell (not CMD)
cd ariff-claude-plugins

# Create plugin directories
$claudeDir = "$env:USERPROFILE\.claude"
New-Item -ItemType Directory -Force -Path "$claudeDir\agents"
New-Item -ItemType Directory -Force -Path "$claudeDir\skills"
New-Item -ItemType Directory -Force -Path "$claudeDir\hooks"
New-Item -ItemType Directory -Force -Path "$claudeDir\commands"
New-Item -ItemType Directory -Force -Path "$claudeDir\scripts"

# Copy all plugins
Get-ChildItem plugins -Directory | ForEach-Object {
    $plugin = $_
    # Agents
    if (Test-Path "$($plugin.FullName)\agents") {
        Copy-Item "$($plugin.FullName)\agents\*.md" "$claudeDir\agents\" -Force
    }
    # Skills (directories)
    if (Test-Path "$($plugin.FullName)\skills") {
        Get-ChildItem "$($plugin.FullName)\skills" -Directory | ForEach-Object {
            $dest = "$claudeDir\skills\$($_.Name)"
            New-Item -ItemType Directory -Force -Path $dest | Out-Null
            Copy-Item "$($_.FullName)\*" $dest -Force
        }
        # Skills (flat .md files)
        Get-ChildItem "$($plugin.FullName)\skills\*.md" -ErrorAction SilentlyContinue | ForEach-Object {
            $skillName = $_.BaseName -replace '\.skill$',''
            $dest = "$claudeDir\skills\$skillName"
            New-Item -ItemType Directory -Force -Path $dest | Out-Null
            Copy-Item $_.FullName "$dest\SKILL.md" -Force
        }
    }
    # Hooks
    if (Test-Path "$($plugin.FullName)\hooks\hooks.json") {
        Copy-Item "$($plugin.FullName)\hooks\hooks.json" "$claudeDir\hooks\$($plugin.Name)-hooks.json" -Force
    }
    # Commands
    if (Test-Path "$($plugin.FullName)\commands") {
        Copy-Item "$($plugin.FullName)\commands\*.md" "$claudeDir\commands\" -Force -ErrorAction SilentlyContinue
    }
    # Scripts
    if (Test-Path "$($plugin.FullName)\scripts") {
        Copy-Item "$($plugin.FullName)\scripts\*" "$claudeDir\scripts\" -Force -ErrorAction SilentlyContinue
    }
    Write-Host "  ok  $($plugin.Name)" -ForegroundColor Green
}

Write-Host "`nInstalled all plugins to $claudeDir" -ForegroundColor Cyan

</details>

<details> <summary><strong>Windows (WSL / Git Bash)</strong></summary>

bash
# If using WSL or Git Bash, the bash script works directly
bash scripts/install.sh

</details>

<details> <summary><strong>VS Code Terminal</strong></summary>

Works with any terminal profile in VS Code:

  1. Open VS Code
  2. Open terminal: Ctrl+ (backtick) or View > Terminal
  3. Select your terminal profile (bash, PowerShell, or zsh)
  4. Run the commands for your platform above

If your VS Code terminal is PowerShell, use the PowerShell instructions. If your VS Code terminal is bash/zsh, use the macOS/Linux instructions. </details>

<details> <summary><strong>Windows Terminal</strong></summary>

Windows Terminal supports multiple profiles. Pick the one that matches:

PowerShell tab: Use the PowerShell instructions above.

Git Bash tab: Use bash scripts/install.sh

WSL tab (Ubuntu/Debian): Use bash scripts/install.sh

CMD tab: Not recommended. Switch to PowerShell or Git Bash. </details>

Step 4: Verify it worked

Start a new Claude Code session:

code
claude

Then type:

code
/browse

You should see all 65 plugins listed. If you see them, installation is complete.

How it works

code
    You clone the repo          Install script copies          Claude Code
    to your machine             components to ~/.claude/       reads them
                                (or %USERPROFILE%\.claude\
                                 on Windows)

    ariff-claude-plugins/       ~/.claude/
    |-- plugins/                |-- agents/     (22 files)
    |   |-- architect/    -->   |-- skills/     (26 dirs)
    |   |-- security/     -->   |-- hooks/      (3 configs)
    |   |-- debugger/     -->   |-- commands/   (2 files)
    |   |-- ...53 total         |-- scripts/    (hook scripts)
    |                           |
    |-- scripts/                Claude Code loads these
    |   |-- install.sh          automatically on startup
    |   |-- install.ps1

Install a single plugin

Don't want all 65? Install just what you need:

macOS / Linux:

bash
bash scripts/install.sh --plugin architect
bash scripts/install.sh --plugin security-analyst

Windows PowerShell (single plugin):

powershell
# Example: install just the architect agent
$claudeDir = "$env:USERPROFILE\.claude\agents"
New-Item -ItemType Directory -Force -Path $claudeDir | Out-Null
Copy-Item plugins\architect\agents\*.md $claudeDir -Force

Updating

When new plugins are added:

macOS / Linux:

bash
cd ariff-claude-plugins
git pull origin main
bash scripts/install.sh

Windows PowerShell:

powershell
cd ariff-claude-plugins
git pull origin main
# Re-run the PowerShell install block from Step 3

Uninstalling

macOS / Linux:

bash
bash scripts/install.sh --uninstall

Windows PowerShell:

powershell
Remove-Item -Recurse -Force "$env:USERPROFILE\.claude\agents"
Remove-Item -Recurse -Force "$env:USERPROFILE\.claude\skills"
Remove-Item -Recurse -Force "$env:USERPROFILE\.claude\hooks"
Remove-Item -Recurse -Force "$env:USERPROFILE\.claude\commands"
Remove-Item -Recurse -Force "$env:USERPROFILE\.claude\scripts"

Troubleshooting

ProblemSolution
claude: command not foundInstall Claude Code first from claude.ai/code
git: command not foundInstall Git from git-scm.com
Plugins don't show in /browseRestart Claude Code (close and reopen)
Permission denied on macOSRun chmod +x scripts/install.sh first
PowerShell execution policyRun Set-ExecutionPolicy -Scope CurrentUser RemoteSigned
WSL can't find ~/.claudeMake sure you're running Claude Code inside WSL, not Windows

Usage Guide

Using Agents

Agents are the most powerful feature. Describe what you want and Claude delegates to the right agent.

Example workflow:

code
+-------------------+     +-------------------+     +-------------------+
|                   |     |                   |     |                   |
|  You: "review     |---->|  Claude selects   |---->|  security-analyst |
|  this code for    |     |  security-analyst |     |  reads code,      |
|  vulnerabilities" |     |  agent            |     |  checks OWASP,    |
|                   |     |                   |     |  reports findings  |
+-------------------+     +-------------------+     +-------------------+

More examples:

code
"Design a caching layer for my high-traffic API"
  -> architect agent handles system design

"Review this code for security vulnerabilities"
  -> security-analyst agent runs a full review

"Optimize this database query that's taking 3 seconds"
  -> performance-engineer agent profiles and fixes it

"Plan the implementation for this new feature"
  -> project-planner agent breaks it down into steps

"Help me understand how this authentication flow works"
  -> mentor agent explains at your level

Using Skills

Skills are invoked when Claude recognizes a relevant situation, or you can ask directly:

code
"Use the systematic-debugger skill to find this memory leak"
"Apply the brainstorming skill to generate API design alternatives"
"Use verification-before-completion for this deployment"

Using Commands

Slash commands for quick actions:

code
/deep-search "react server components best practices"
/task-folder-manager --name "feature-auth-rewrite"

Using Hooks

Hooks run automatically. No action needed from you.

code
+------------------+     +--------------------+     +------------------+
|                  |     |                    |     |                  |
|  Claude is about |---->|  assumption-checker|---->|  "Warning: you   |
|  to use a tool   |     |  hook fires        |     |  assumed X, did  |
|                  |     |  (PreToolUse)      |     |  you verify it?" |
+------------------+     +--------------------+     +------------------+

Architecture

Plugin loading flow

mermaid
flowchart TD
    A["You start Claude Code"] --> B["Claude reads ~/.claude/"]
    B --> C["agents/*.md"]
    B --> D["skills/*/SKILL.md"]
    B --> E["hooks/*.json"]
    B --> F["commands/*.md"]

    C --> G["Loaded on demand\nwhen task matches"]
    D --> H["Descriptions loaded\nfull content on invoke"]
    E --> I["Always active\nfires on matching events"]
    F --> J["Available as\n/slash-commands"]

    style A fill:#4CAF50,color:#fff
    style B fill:#2196F3,color:#fff
    style G fill:#FF9800,color:#fff
    style H fill:#FF9800,color:#fff
    style I fill:#f44336,color:#fff
    style J fill:#9C27B0,color:#fff

Plugin distribution

mermaid
pie title 65 Plugins by Category
    "Agents (24)" : 24
    "Skills (34)" : 34
    "Hooks (5)" : 5
    "Commands (2)" : 2

Install flow

mermaid
flowchart LR
    A["git clone"] --> B["cd ariff-claude-plugins"]
    B --> C{Your OS?}
    C -->|macOS/Linux| D["bash scripts/install.sh"]
    C -->|Windows| E[".\scripts\install.ps1"]
    C -->|WSL| D
    D --> F["~/.claude/"]
    E --> G["%USERPROFILE%\.claude\"]
    F --> H["65 plugins ready"]
    G --> H

    style A fill:#4CAF50,color:#fff
    style H fill:#4CAF50,color:#fff
    style C fill:#2196F3,color:#fff

Agent workflow

mermaid
sequenceDiagram
    participant You
    participant Claude
    participant Agent

    You->>Claude: "review this code for vulnerabilities"
    Claude->>Claude: Selects security-analyst agent
    Claude->>Agent: Delegates task
    Agent->>Agent: Reads code files
    Agent->>Agent: Checks OWASP patterns
    Agent->>Agent: Analyzes attack surface
    Agent->>Claude: Returns findings
    Claude->>You: Structured security report

Plugin structure

Every plugin follows this structure:

code
my-plugin/
  .claude-plugin/
    plugin.json          # manifest (name, version, description)
  agents/                # agent definitions (markdown)
  skills/                # skill definitions (markdown)
  hooks/
    hooks.json           # hook event configuration
  commands/              # slash command definitions
  scripts/               # shell scripts for hooks

Supported hook events (22 total)

CategoryEvents
SessionSessionStart, SessionEnd
User InputUserPromptSubmit
Tool UsePreToolUse, PostToolUse, PostToolUseFailure, PermissionRequest
CompletionStop, SubagentStop, TaskCompleted, TeammateIdle
ContextPreCompact, PostCompact, InstructionsLoaded
ConfigConfigChange
WorktreeWorktreeCreate, WorktreeRemove
MCPElicitation, ElicitationResult
SystemNotification

Compatibility

RequirementDetails
Claude Opus 4.6Full support (1M context)
Claude Sonnet 4.6Full support (1M context)
Claude Haiku 4.5Full support (200k context)
Claude Code version2.1+ recommended
Operating systemsmacOS, Linux, Windows (WSL)
Git worktree isolationSupported
MCP integrationSupported (stdio, HTTP, SSE)

Statistics

MetricCount
Total plugins65
Agents24 (37%)
Skills34 (52%)
Hooks5 (8%)
Commands2 (3%)
Anti-hallucination suite12 (included in counts above)
Plugin component types6 (agents, skills, commands, hooks, MCP servers, LSP servers)
Supported hook events22
Supported models3 (Opus 4.6, Sonnet 4.6, Haiku 4.5)
Install time< 30 seconds

Documentation

Guides (start here)

  • Agents Guide -- what agents are, all 24 agents with descriptions and examples
  • Skills Guide -- what skills are, all 34 skills with descriptions and examples
  • Hooks Guide -- what hooks are, all 22 supported events, how to create your own
  • Commands Guide -- what commands are, all 2 commands with usage

Reference


Use Cases

For solo developers

  • Delegate code reviews to the security-analyst and code-reviewer
  • Use project-planner before starting any feature
  • Let systematic-debugger find root causes
  • Have architect agent design your system before you code

For teams

  • Standardize workflows with shared skills
  • Safety checker agents catch mistakes before they ship
  • QA engineer agent handles test strategy
  • Plugin-creator skill helps build team-specific plugins

For students

  • Mentor agent explains concepts at your level
  • Canvas API skill integrates with university LMS
  • Sequential-thinker breaks complex problems into steps
  • Writing-plans skill teaches you to plan before coding

Contributing

Contributions welcome. See CONTRIBUTING.md.

Quick contribution:

  1. Fork this repository
  2. Create your plugin in plugins/your-plugin/
  3. Run bash scripts/validate-plugin.sh plugins/your-plugin
  4. Submit a pull request

Why this marketplace?

FeatureThis marketplaceTypical repos
Production-testedYes, 65 plugins5-10 experimental plugins
DocumentationFull guides, visual diagrams, examplesBasic README
Safety layer7 checker agents + 5 hooksNone
Model supportOpus 4.6, Sonnet 4.6, Haiku 4.5Single model
One-line installbash scripts/install.shManual file copying
Cross-device syncGit-based, works with any cloud storageNot supported
Updatesgit pull && bash scripts/install.shManual

License

MIT License -- see LICENSE for details.


Links

  • Repository: https://github.com/a-ariff/ariff-claude-plugins
  • Issues: https://github.com/a-ariff/ariff-claude-plugins/issues
  • Author: @a-ariff

If this marketplace is useful to you, consider giving it a star. It helps others find these plugins.

Install & Usage

1
Create the skills directory
mkdir -p .claude/skills
2
Download the skill file
mkdir -p .claude/skills && curl -o .claude/skills/frontend-dev.md https://raw.githubusercontent.com/a-ariff/ariff-claude-plugins/main/SKILL.md
3
Invoke in Claude Code
/frontend-dev
View source on GitHub
frontendtypescriptagent

Frequently Asked Questions

What is frontend-dev?

Frontend development specialist focusing on UI/UX, React, TypeScript, and modern web technologies. Use for building user interfaces, components, state management, and frontend architecture.

How to install frontend-dev?

To install frontend-dev, 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 /frontend-dev.

What is frontend-dev best for?

frontend-dev is a community categorized under General. It is designed for: frontend, typescript, agent. Created by Ariff.