By sablier-labs
Accelerate React/Next.js frontend development by generating Tailwind CSS v4 configurations with type-safe variants, xState v5 actor machines for complex UI flows, Zustand stores with selectors, and detailed design specs from website screenshots including layout, typography, and components.
npx claudepluginhub sablier-labs/plugin-marketplace --plugin frontendThis skill should be used when the user asks about "Tailwind CSS", "tailwind-variants", "tv() function", "CSS-first configuration", "Tailwind breaking changes", mentions styling with Tailwind utilities, gradient syntax, or component variants with TypeScript.
This skill should be used when the user asks to "create a state machine", "add xState", "use xState with React", "implement actor-based state", "manage complex state with state machines", "use xState with Effect", "integrate Effect-ts with xState", mentions xState hooks (useMachine, useActor, useSelector), or discusses finite state machines in React applications.
This skill should be used when the user asks to "create a Zustand store", "add Zustand", "manage global state with Zustand", "use Zustand with TypeScript", "add state management", or mentions Zustand stores, selectors, or middleware. Provides TypeScript-first state management guidance for Next.js projects.
[!NOTE]
This repo is now deprecated. Please use sablier-labs/agent-skills instead.
Official Sablier plugin marketplace for AI agents like Claude Code.
See Anthropic's official docs for more guidance on plugins.
Sablier protocol context, design guidelines, and content creation.
Skills:
sablier — Sablier protocol overview: token vesting, airdrops, and onchain payrolldesign — Sablier dark-theme aesthetic and production-grade React interfacesx-twitter — X/Twitter posts: announcements, educational content, social proof, hot takesblog-posts — Blog content: announcements, educational articles, comparisons, technical deep divescase-studies — Customer success stories with outcomes and quotesCommands:
/create-issue — Create GitHub issues in sablier-labs repositoriesReferences:
BRAND_VOICE.md — How Sablier soundsCOMPANY_PROFILE.md — Products, metrics, positioningICP.md — Target audience segmentsVOICE_EXAMPLES.md — Past content for consistencyWriting skills reference https://docs.sablier.com/llms.txt for product details.
Functional programming patterns with Effect-TS.
Skills:
effect-ts — Effect-TS functional programming patternseffect-ts-next — Effect-TS + Next.js integration patternsFrontend development tools: Tailwind CSS, Zustand, UI specs.
Skills:
tailwind-css — Tailwind CSS v4 rules and tailwind-variantszustand — Zustand state management with TypeScriptCommands:
/spec-screenshot — Analyze screenshots and generate SPEC.md implementation specsTesting frameworks and patterns for Solidity and TypeScript projects.
Skills:
btt — Bulloak tree specifications for smart contract integration testsfoundry — Foundry tests, fuzz tests, fork tests, invariant tests, and deployment scriptsvitest-v4 — Vitest v4 testing patterns for TypeScript React/Next.jsBlockchain and Web3 development tools.
Skills:
etherscan-api — Etherscan API V2 for blockchain balance queriesviem — Viem TypeScript interface for Ethereum interactions[!IMPORTANT]
To be able to use the plugins, you must have ni installed globally.
npm i -g @antfu/ni
Then, run these commands in a Claude Code chat:
# Add this repository as a marketplace
/plugin marketplace add sablier-labs/plugin-marketplace
# Install plugins (choose the ones you need)
/plugin install sablier@sablier-plugins
/plugin install fp@sablier-plugins
/plugin install frontend@sablier-plugins
/plugin install testing@sablier-plugins
/plugin install web3@sablier-plugins
Restart Claude Code, then verify with /plugin browse to confirm skills and commands are loaded.
There is no CLI command for updating a marketplace (i.e., no claude plugin update command exists). See
anthropics/claude-code#11676 for tracking.
In the meantime, use the interactive /plugin built-in command to update:

See CONTRIBUTING.md.
MIT
Blockchain development with Solidity security, DeFi protocols, NFT standards, and Web3 testing
Comprehensive Solana development toolkit: build programs with Anchor/native Rust and audit for security vulnerabilities
Specialized agents for blockchain development, smart contracts, and Web3 applications
Frontend component development with accessibility and responsive design
Reusable UI component patterns for implementing common features across different frameworks and tech stacks
Runs pre-commands
Contains inline bash commands via ! syntax
Bash prerequisite issue
Uses bash pre-commands but Bash not in allowed tools
Share bugs, ideas, or general feedback.
Use this agent for expert assistance with web development tasks using React, Next.js, NestJS, and other modern web frameworks with TypeScript and Tailwind CSS. This includes code analysis, component creation, debugging, performance optimization, and architectural decisions. Examples: <example>Context: User is building a Next.js app and encounters a routing issue. user: 'My dynamic routes in Next.js are not rendering correctly' assistant: 'Let me use the web-dev agent to analyze your Next.js routing setup and provide a solution' <commentary>This is a Next.js-specific routing issue, so the web-dev agent will provide targeted guidance.</commentary></example> <example>Context: User needs a reusable React component with Tailwind CSS. user: 'I need a card component that matches my app's Tailwind-based design system' assistant: 'I'll use the web-dev agent to create a TypeScript-based React card component styled with Tailwind CSS, following your app's design patterns' <commentary>The user requires a component that aligns with their Tailwind CSS design system, so the web-dev agent ensures compatibility.</commentary></example>
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 claim