shadcn/ui plugins

Extract any website's design language (colors, typography, spacing, motion) into DTCG tokens, Tailwind config, shadcn/ui themes, Figma variables, and CSS. Grade accessibility, battle two sites, remix into 6 design vocabularies, recolor via OKLCH, or package a full design system bundle.

Automate frontend workflows: generate Tailwind-powered landing pages and multi-page marketing sites from briefs with screenshots and videos; set up Tailwind v4 themes and install shadcn/ui components in React/Next.js apps; review visual designs, extract design systems, and audit React performance patterns.

Build, manage, and deploy the full Salesforce platform stack — Apex, OmniStudio, Data Cloud, Agentforce agents, Lightning Web Components, UI bundles, flows, metadata, and mobile apps — with code generation, validation scoring, debugging, documentation retrieval, and CLI-driven deployment.

Run autonomous full-stack dev workflows in Claude Code: generate PRDs/specs via interviews, execute Ralph/autodev loops for overnight PRD implementation with git branching/testing/committing, parallelize tasks across 12 agents (architect, frontend-dev, code-reviewer), build React/Tailwind/shadcn UIs and FastAPI backends, TDD/E2E test/verify/review code, automate git commits/PRs, and audit harness health.

Build, deploy, and manage full-stack applications on Vercel with AI features, serverless functions, storage, authentication, and CI/CD pipelines, plus agent-driven troubleshooting and performance optimization.

Generate compact AMOLED-black UI code for shadcn-ui and Tailwind in React, Vue, or Svelte using Atlas design system tokens, rules, and patterns via AI agents. Build dense dashboards, chats, and admin panels with engineering-grade, framework-agnostic styling.

Automates the full AI-assisted SaaS development lifecycle: from product idea research and PRD generation through multi-agent coding, security/SEO audits, and automatic knowledge accumulation with session retrospectives.

Profiles competitors from URLs using live site scraping and SEO data, generates SEO-optimized pages at scale, optimizes conversion funnels, and creates marketing copy, email sequences, and ad creative. Also provides TYPO3 extension development, migration, and security hardening, plus React/Next.js performance optimization and shadcn/ui scaffolding.

Automate UI/UX and brand design workflows: sync guidelines to CSS design tokens with Node.js scripts, generate logos/banners/slides using shadcn-ui and Tailwind, validate assets, and query a database of 50+ styles, 161 palettes, 57 font pairings, and guidelines for web/mobile component design and layouts.

Review React, React Flow, React Router, shadcn/ui, Tailwind v4, Vitest, and Zustand code with specialized sub-skills that auto-detect technologies and enforce a multi-step verification protocol to reduce false positives.

Design, build, and audit premium React/Next.js UIs with production-ready components, design pattern research, competitive analysis, UX research, and accessibility validation.

Generate animated React components from Magic UI and shadcn-ui, choreograph complex sequences with Anime.js and React Spring, render Lottie animations, apply AOS scroll reveals, and optimize performance. Use Python commands to import components, build configs/props/timelines, and consult specialist agents for integration and best practices in web UIs.

Import pre-built animated React components from Magic UI and React Bits into Tailwind/shadcn-ui projects via interactive Python commands. Generate customized props on demand and consult a specialist agent for implementation patterns, performance tweaks, integrations, and troubleshooting.

Run a local spec-driven development toolkit that combines project management, browser automation, security scanning, and code-aware editing across multiple services and languages.

Build and extend AI assistant skills covering generative art, branded presentations, frontend UIs with React/Vue, MCP server integration, internal communications, documentation co-authoring, Slack GIFs, theme styling, and web testing via Playwright.

Delegate Rails UI development to generate consistent, accessible components as Tailwind-styled ERB partials inspired by shadcn/ui. Enables feature UI implementation, view and page creation, form building, layout design, and UI reviews in Rails apps.

Access UI/UX intelligence to plan, design, build, implement, review, fix, improve, and optimize interfaces for websites, dashboards, apps using 50+ styles, 21 palettes, 50 font pairings, 20 charts, and accessibility guidelines tailored to React, Next.js, Vue, Svelte, Tailwind, shadcn/ui.

Orchestrates the full software development lifecycle with AI agents that handle architecture, planning, implementation, testing, and release — enforcing a structured workflow from request intake to deployment.

Build server-driven SPAs with Rails backend and Inertia.js frontend in React, Vue, or Svelte by applying skills for project setup, architecture patterns, controllers with props and redirects, full-stack forms and validation, page components with layouts and navigation, TypeScript type generation from Ruby resources, shadcn UI adaptations, and RSpec/Minitest response testing.

Autonomously implements tickets from triage to PR in one command using multi-agent AI orchestration: agents plan, code with TDD, test, review, QA, and ship via git worktrees for React/TS apps, Supabase DBs, backends in JS/Python/Go/Rust. Handles full dev pipeline without interruptions.

Orchestrate a full development workflow with specialized agents, skills, and commands — from project scaffolding and code review to CI/CD, deployment, and documentation — all within Claude Code. Includes autonomous subagents for diverse domains like design, security, data, mobile, and AI.

Embed framework-agnostic version badges in React, Vue, Svelte, Next.js, or Nuxt apps to display build version, git commit SHA, timestamp, branch, and changelog details in interactive tooltips for debugging and support workflows. Auto-detects Tailwind and shadcn/ui setups.

Recommend and install the best-fit shadcn/ui components and ShadcnBlocks for React/Next.js Tailwind frontends. Use multi-dimensional tagging (layout, tone, goal, media, interaction) and answer 1-2 guided questions to select from 1,338 premium blocks and 1,189 free components for landing pages, dashboards, heroes, pricing sections.

Guides AI-assisted development through a spec-driven TDD workflow: triage, spec writing, architecture evaluation, TDD planning, ping-pong test-code cycles, browser verification, and code review. Includes codebase analysis, dependency analysis, git hotspot detection, and design discovery.

Bootstrap Claude Code setups for TypeScript, JavaScript, Python, Go, Rust projects with generated CLAUDE.md, hooks, commands, and agents; assess mastery levels (0-4) via dashboards with Korean learning guides, upgrade suggestions, and trend research; create personalized Next.js portfolios tailored to MBTI, profession, and style using Tailwind, shadcn/ui, Zustand.

Automatically approve Write/Edit tool calls and run self-healing documentation scripts for Next.js development, with integrated AI tools for sequential reasoning, Gemini design assistance, shadcn/ui component management, Exa search, and Upstash context retrieval.

Build and customize AI chat interfaces in React/Next.js apps using assistant-ui library. Scaffold projects via CLI with templates, customize UI primitives and state with hooks, add multi-thread management and cloud persistence with auth, integrate LLM tools and streaming backends, and migrate packages to latest versions.

Launch a browser-based UI companion to brainstorm UI/UX concepts like Crazy 8s, prototype HTML/CSS/Tailwind designs, annotate elements, inspect and tune properties, and iterate with Claude feedback for rapid design exploration and refinement.

Delegate to AI experts for architecting reusable, accessible React UI components with Next.js 14+ App Router, Server Components, Tailwind, and shadcn/ui; implementing full-stack apps with TanStack Start, SSR/SSG/ISR, server functions, and type-safe Vite-based development using latest best practices and project awareness.

Build complex, multi-component HTML apps with state management and shadcn/ui components that render inline in Claude.ai, bundled as single-file artifacts.

Configure FeatureDrop toolkit in React apps via Claude Code to add changelogs, onboarding tours, checklists, badges, hotspots, feedback widgets, and surveys optimized for Tailwind or shadcn-ui styling, accelerating product adoption setup.

Review and build SaaS UIs following 12 research-backed design principles — accessibility, auth flows, data tables, forms, navigation, permissions, error states, performance patterns, theming, notifications, onboarding, and responsive layouts — with actionable code audits and fix suggestions

Guide installation, configuration, theming, and usage of shadcn/ui React components with Tailwind CSS and Radix/Base UI primitives, using CLI commands, components.json, CSS variable theming including OKLCH colors, dark mode, RTL support, form patterns with React Hook Form or TanStack Form, and setups for Next.js, Vite, Astro, Remix, Laravel, Gatsby, TanStack Start, and monorepos.

Build and interact with BSV blockchain applications — mint ordinals/NFTs, manage BSV21 tokens, create and sign transactions, set up wallets, list on the marketplace, and automate wallet operations via CLI, SDK, or MCP server.

Automates GitHub workflows with isolated git worktrees for branch isolation, automated PR creation and review resolution, issue triaging and planning, plus provides MCP servers for Next.js/shadcn/ui component management, Chrome DevTools browser inspection, and library documentation lookups.

Orchestrate specialized AI agents via a single command to generate complete Next.js App Router frontends integrated with AI SDK, Supabase for auth and database, shadcn/ui components, Tailwind CSS, and TypeScript, always using the latest dependency versions.

Build and deploy full-stack dApps on Monad blockchain, from smart contracts to frontend integration with wallet auth, transaction sending, and indexer setup.

Interactively scaffold TanStack Start projects via CLI, selecting from 30+ integrations to configure full-stack apps with data fetching, authentication, ORMs, deployment, databases, and AI agent servers in a single guided workflow.

Build full-stack Next.js applications with Supabase and Vercel AI SDK, from local database setup and type-safe queries to streaming AI interfaces, responsive UI components, and automated quality checks.

Develop full-stack web apps with Wasp (React, Node.js, Prisma) using AI assistance for adding features like auth, email, database, and styling; starting dev servers with database setup; deploying to Railway or Fly.io; and getting expert code improvement advice.

Manage structured project specifications with ADR architecture decisions, SMART acceptance criteria, and SEAMS requirement clarification; auto-detect anti-patterns across TypeScript, Python, Rust, React/Next.js, and Tailwind stacks; generate implementation designs with typed interfaces, tests, and tech-specific patterns; enforce code rules and trace requirements through plan-to-task matrices.

Engineer Svelte-first interactive frontends with animations, 3D/WebGL, scrollytelling, and data visualization — supported by aesthetic direction discovery, design system implementation, UX research validation, and branch protection for safe collaboration.

Generate maintainable frontend components from design prototypes like images or PDFs. Analyze structure incrementally, extract design tokens, confirm architecture, and output code for React/Next.js, Vue, SvelteKit with Tailwind and shadcn/ui, building one component at a time.

Provides a complete developer workflow toolkit for Claude Code with skills, agents, and commands covering TDD, debugging, code review, architecture, documentation, refactoring, security, testing, git workflows, API design, performance, UI/UX design, plugin development, and incident response across the full SDLC.

Engineer Svelte-first interactive frontend experiences with animations (GSAP, Lenis), 3D/WebGL (Threlte), scrollytelling, data visualization (D3, Layer Cake), and headless UI (Melt), guided by creative direction, design system implementation, and UX research. Enforces code quality by blocking utility-style file names.

Installs and configures Ein UI liquid glass morphism components in React/Next.js projects using the Shadcn CLI registry with Tailwind CSS v4

Accelerate Next.js development with a starter bundle including MCP servers for Next.js devtools and shadcn/ui, plus skills for UI design, token-efficient coding, and project documentation management via commands and hooks.

Convert markdown research reports into interactive React presentation websites using Tailwind CSS v4 and shadcn/ui. Parse report structure into tabs, integrate interactive components like calculators, apply customizable dark professional themes with responsive design and accessibility, then build static sites with Vite or Next.js and deploy to GitHub Pages via automated repo creation and Actions.