shadcn/ui plugins

Extract any website's complete design language — colors, typography, spacing, shadows, motion, and voice — and output DTCG tokens, Tailwind/shadcn/Figma variables, CSS, and a visual preview. Grade consistency, battle two sites, remix in six design vocabularies, recolor via OKLCH, generate brand guidelines, and rebuild pages for pixel-diff fidelity checks.

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.

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.

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 and build premium React/Next.js applications with production-ready animated components, design pattern research, competitive analysis, UX validation, and accessibility auditing—all integrated into the development workflow.

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.

Spec-driven development workflow that combines code understanding, safe editing, and multi-language agent support with integrated browser automation, infrastructure scanning, vulnerability detection, and project management APIs.

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.

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.

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.

Orchestrate the full software development lifecycle through AI-guided agents that handle request intake, architecture planning, implementation, testing, and release — with defined QA checkpoints, gates, and automated verification.

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.

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.

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.

Spec-driven development workflow for Next.js full-stack apps. Guides a project from rough idea through structured spec drafting, refinement, phase planning, and implementation — with environment setup, secret-leak auditing, and stack troubleshooting.

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.

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.

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 full-stack dApps on Monad blockchain: deploy smart contracts, integrate embedded MPC wallets with social login, index on-chain events via Envio, and get guidance on Monad-specific EVM architecture, gas pricing, and production deployment.

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.

Automate browser testing, social media scraping, CRM management, email triage, meeting follow-ups, and content generation across 1,000+ apps using AI agents and composable skills within a secure, company-configured environment.

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.

Orchestrates an AI-assisted development workflow with specialized agents for planning, coding, testing, documentation, and code review. Manages tasks, specs, git operations, Jira integration, and release automation through structured commands and multi-agent coordination.

Develop full-stack web apps with Wasp using Claude — add authentication, email, database, and styling; run dev servers with database setup; deploy to Railway or Fly.io; debug via browser automation and server logs.

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

Enforces a structured specification and task management workflow using PLANS taxonomy, ADR-style architecture decisions, SMART acceptance criteria, and SEAMS clarification. Generates language-specific implementation designs (React/Next.js, Python, Rust, TypeScript), detects anti-patterns across 5 tech stacks, validates code against project rules, and maintains traceability from requirements to tasks.

Design and develop polished interactive frontend experiences using Svelte, with support for animations, 3D, scrollytelling, data visualization, and color/typography systems, enriched by agents that articulate aesthetic direction and validate UX decisions with behavioral research.

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.

Run a complete software development lifecycle workflow inside Claude Code: implement features with architecture design and code exploration, review PRs with multi-agent analysis, audit file changes for security, and validate plugin structure. Includes UI/UX design guidelines, iterative refinement loops, and MCP integrations for Upstash and GitHub Copilot.

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

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.