Design & Frontend plugins for Claude Code

A local-first design application that exposes projects, files, and preview tools to Claude Code through an MCP server, enabling design-aware coding workflows. Requires the `od` daemon to run and connects over stdio.

Impeccable is a frontend design fluency plugin that provides 24 commands for design review, audit, and critique, with built-in anti-pattern detection to catch common frontend issues. It hooks into Claude Code's tool workflow and session events to automatically apply design checks as part of development.

Archify converts plain-language descriptions or Mermaid diagrams into polished, interactive HTML diagrams with dark/light themes, trace animations, and multiple export formats (PNG, JPEG, WebP, SVG, WebM). Use it to visualize system architectures, workflows, data pipelines, state machines, and other technical or planning concepts that benefit from interactive exploration.

A collection of 14 Agent Skills for designers and engineers to make better UI decisions, covering animation craft, design principles, motion audits, component stress-testing, Swift development, and library selection based on Emil Kowalski's expertise at companies like Vercel and Linear. The skills amplify domain expertise by encoding common mistakes agents make (wrong easing, poor component choices) and guide users toward high-craft interfaces through structured decision-making.

A collection of 13 standalone Agent Skills for building animations and polished interfaces, with expertise in motion design decisions, React Native/Expo, gesture interactions, and UI libraries curated by Emil Kowalski. The skills guide agents toward high-craft animation choices and design fundamentals while also providing vocabulary, auditing, and platform-specific (web, mobile, Swift) implementation guidance.

AI-powered diagram generation that creates flowcharts, architecture diagrams, and system designs through natural language, with real-time browser preview of Draw.io files. The plugin includes an embedded MCP server and tools to create, edit, export, and version-control diagrams without external API dependencies.

This standalone Agent Skill reviews UI code for compliance with Web Interface Guidelines, checking for accessibility, UX best practices, and design standards. Activate it when you need to audit your site's design, review UI code, or validate that your interface meets established guidelines.

A design productivity plugin that provides critique, design system management, UX writing, accessibility audits, research synthesis, and developer handoff workflows — all available standalone and enhanced by connecting to Figma, Linear, Asana, Notion, Slack, and other team tools via MCP. The plugin includes six slash commands and six domain skills that Claude applies automatically when relevant to design work.

img2threejs converts reference images into procedural Three.js models via code generation, achieving animation-ready 3D reconstruction without photogrammetry or mesh extraction. The skill quality-gates outputs and optimizes for token efficiency, supporting object rebuilds, character likeness, and staged code generation workflows.

This skill transforms any source material (URLs, PDFs, DOCX files, Markdown, plain text, screenshots, or pasted notes) into beautiful, single-file HTML articles using the ReActicle component protocol. It guides agents through a structured six-phase editorial process with checkpoints, theme selection, and sub-agent reviewers to produce share-ready, archive-friendly articles.

A structured prompt-engineering skill for GPT Image 2 that generates and edits images with 18 categories and 80+ templates, adapting seamlessly across three runtime modes: local generation via OpenAI-compatible endpoints, delegation to the host agent's native image tool, or pure prompt advisory when no image tool is available. Prompts and outputs are automatically archived with task-slug + timestamp naming for reproducibility and reuse across posters, UI mockups, product visuals, infographics, diagrams, comics, avatars, and editing workflows.

This standalone skill transforms AI-generated HTML/CSS/JavaScript web pages from functional to polished through anti-cliché design rules, perceptually uniform oklch color theory, and a structured calibration workflow that declares design systems before coding. It covers landing pages, interactive prototypes, slide decks, data visualizations, and animations, with optional browser-based QA and responsive testing triggered only on explicit request.

A methodology-driven agent skill for transforming scripts and articles into click-driven 16:9 web presentations that can be screen-recorded as cinematic videos using Vite, React, and TypeScript. It provides reusable design tokens, 23 pre-built themes, and a provider-agnostic audio synthesis system (with built-in MiniMax mmx-cli and OpenAI TTS) that works through a structured workflow with hard checkpoints for script alignment, outline approval, and optional audio generation.

A collection of seven standalone agent skills for design engineers, including baseline UI cleanup, design documentation, accessibility auditing, motion performance optimization, and interface improvement tasks. Skills are invoked individually via CLI (`npx skills add`) or exposed over Model Context Protocol for agents to discover and apply to design-focused workflows.

This plugin provides access to 21st, a UI component and theme discovery platform with code retrieval and optional hosted AI-powered component generation. It connects via the 21st MCP server using an API key and includes tools for searching components, themes, and templates, along with AI-assisted design when enabled.

Lavish Editor is an agent-native AXI skill that transforms agent-generated HTML artifacts into interactive, locally-browsable files where humans can annotate elements, edit Mermaid diagrams, and send feedback back to the agent without screenshots or long prose descriptions. The skill installs as a stub via `npx skills add` and runs Lavish on-demand through `npx -y lavish-axi`, keeping the CLI always current and requiring no additional npm setup.

A curated registry of 67 AI-ready design system skills covering aesthetic styles from agentic and ant to brutalism and cosmic, each providing SKILL.md instructions and DESIGN.md implementation notes for Claude Code and other agentic tools. Developers can pull any design skill into projects with a single command to instantly apply consistent visual systems across generated interfaces.

Official Expo plugin providing 24 AI agent skills for building, deploying, upgrading, and debugging Expo apps across React Native, iOS, and Android, with clear separation between open-source framework skills and paid Expo Application Services (EAS). Connects to mcp.expo.dev and includes navigation, animations, design systems, data fetching, native modules, App Store submissions, EAS Build/Update/Observe, and remote simulator capabilities.

brand-forge generates on-brand logos, social templates, and marketing graphics as vector SVGs without requiring any API keys or external accounts. The plugin stores a visual brand profile (colors, typography, logo rules) and applies it consistently across all outputs, with optional AI raster imagery via Gemini or OpenAI.

Converts Figma designs and screenshots into production-ready React, Svelte, or Vue components with built-in accessibility features including ARIA labels, semantic HTML, and keyboard navigation. The plugin provides three MCP tools for parsing Figma exports, analyzing screenshot layouts, and generating fully accessible code components.

A self-contained design skill that guides AI tools through the complete process of building high-converting landing pages, including intake questions, page structure, conversion copywriting, SEO, and a comprehensive visual system (typography, spacing, corner radius, backgrounds, icons, and motion). Install it into Claude Code, Cursor, Codex, Windsurf, or other AI coding tools by copying the SKILL.md file into your project rules.

The Figma plugin integrates the Figma MCP server with 16 Agent Skills for common design workflows, enabling AI agents to read design context, generate code from frames, and write native Figma content directly to the canvas. It connects to Figma's design system data including variables, components, and layout information while supporting Code Connect integration and AI-powered image generation.

This skill teaches AI agents motion design principles for creating animations across any framework (CSS, Framer Motion, GSAP, Lottie, etc.), focusing on philosophy and thinking like a motion director before implementation. It includes decision frameworks, Disney principles adapted for UI, patterns for common animations (entrance/exit, loading states, choreography), and reference guides for timing, easing, and quality evaluation.

This Agent Skill Pack enables creation of AI marketing videos and images through Arcads, supporting multiple generative models including Seedance 2.0, Sora 2, Veo 3.1, Kling 3.0, and image generators like ChatGPT Image 2 and Nano Banana 2. The pack includes 7 skills for video generation, image-ad creation, ad cloning, and YouTube thumbnail generation, with pre-built prompt formulas for UGC reviews, product reveals, and feature walkthroughs.

This plugin extracts video frames via ffmpeg and audio via configurable backends (Gemini API, local Whisper, or OpenAI), sending both to Claude for direct multimodal understanding. It supports YouTube URLs, adaptive parameter selection based on user intent, and offers an interactive setup wizard for configuration.

Banana Claude generates, edits, and compares images using Google's Gemini models directly from Claude Code, with a review-first workflow that shows prompts, costs, and settings before any paid request executes. The plugin orchestrates visual briefs across Gemini Nano models (Lite, standard, and Pro) and stores results with privacy-conscious metadata.

This plugin enables Claude to build and modify Power Apps Canvas Apps by connecting to an app open in Power Apps Studio via the Canvas Authoring MCP server. The agent can create screens, configure controls, set up formulas, manage connectors, and define data sources directly within the Power Apps environment.

This plugin scaffolds and deploys Power Apps mobile applications using Expo and React Native, enabling developers to build native mobile experiences that connect to Power Platform data through Microsoft's native host package. It automates app generation, screen design, native capability configuration, and connector wiring via agent-driven skills that integrate with Azure authentication and Entra app registration.

The model-apps plugin builds and deploys complete model-driven Power Apps end to end, with /app-builder generating whole apps (tables, relationships, forms, views, charts, security roles) from natural language and /genpage creating generative pages using specialist agents for planning and parallel code generation. It requires PAC CLI > 2.10.0, Azure CLI, and Node.js LTS, integrating with Power Platform via the vendored cds-maker-sdk and leveraging feature flags for experimental capabilities like custom API calls and telemetry.

This Claude Code plugin analyzes codebases and generates AWS infrastructure deployments with cost estimates, CDK/CloudFormation IaC, and draw.io architecture diagrams using official AWS4 icons. It connects to three AWS MCP servers for real-time pricing data, IaC best practices, and architecture guidance.

HyperFrames Student Kit is a 14-skill standalone Agent Skill set for Codex and Claude Code that provides a complete video-editing pipeline — including silence removal, mistake detection, motion graphics, and short-form reel creation — for talking-head footage using HyperFrames HTML compositions and GSAP animations. It includes 406 pre-built motion-graphics cards, scene templates, transcription and beat-sync tools, and can optionally integrate ElevenLabs Scribe or Whisper for transcription and Kie.ai for generated assets.

The LaTeX Document Skill converts plain English descriptions into publication-ready PDF documents without requiring LaTeX knowledge, supporting 27 templates and handling tasks from resume generation to OCR-powered document conversion with 27 automation scripts. It processes handwritten notes, scanned textbooks, CSV data, and other formats through specialized pipelines that compile to polished PDFs with proper formatting, equations, charts, and diagrams.

FableCut is a browser-based non-linear video editor that exposes its entire timeline as a JSON document, allowing Claude Code to drive editing operations like cuts, keyframes, transitions, chroma key, speed ramps, and MP4 export via ffmpeg with ~150 ms hot-reload. The plugin includes 3 skills and 1 MCP server, requires only node, and enables human–AI collaborative video editing where changes sync live between the UI and code.

capcut-cli allows Claude Code to create and edit CapCut and JianYing projects directly from the command line, supporting subtitles, SRT/ASS import, timing, speed, volume, keyframes, masks, filters, effects, templates, linting, preview rendering, and conversion of long-form content to shorts. The tool works on local draft files with no external APIs or servers required, and outputs fully editable projects that can be opened and further refined in CapCut or JianYing.

This skill package provides two specialized capabilities: `alt-text` for generating and improving accessible alt text for data visualizations and images in pkgdown sites and Quarto documents, and `brand-yml` for creating and applying brand.yml files for consistent styling across Shiny apps (R and Python) and Quarto documents. Both skills extend Claude's abilities for accessibility and design consistency in R/Python documentation and app projects.

NextBoard is a PCB hardware solution design agent that takes product requirements and outputs reviewable, implementable PCB schematics through a structured 7-stage workflow including requirement freezing, architecture selection, component sourcing, and multi-dimensional review. The agent automatically analyzes chip solutions, performs component selection, generates BOMs with pricing, creates module schematics, and produces comprehensive technical deliverables including markdown, datasheets, and PDF documentation.

A Claude Code Skill that generates programmatic videos using React components and the Remotion framework, with AI-powered text-to-speech audio (via MiniMax or Edge TTS) and scene-based timing. The skill scaffolds video projects with support for animations, subtitles, and music visualization.

UI Craft is a design engineering system for AI coding agents that applies opinionated craft rules and acceptance criteria to prevent low-quality UI output. It provides four rungs of capability—from default-better prompts through persistent design context to CI/review gates—plus a scoreable design critique using Nielsen heuristics and classic design laws.

This standalone Agent Skill pack provides 19 slash commands that automate AI image generation and Seedance 2.0 video creation on Higgsfield, with specialized prompt engineers for UGC ads, cinematic videos, animation styles, and vertical-specific content like food, fashion, and real estate. The suite includes a full UGC pipeline that generates character images and converts them to videos via browser automation with Playwright MCP.

This repository provides two standalone Agent Skills for video editing: motion-broll generates timed motion-graphic B-roll from videos and transcripts with continuous morphing shapes, while object-separation isolates subjects from video backgrounds locally using SAM 2 without uploading data. Both run entirely on the user's machine with no external API dependencies.

This skill installs three integrated tools—UI/UX Pro Max, Framer Motion, and 21st.dev components—that enable Claude Code to design and build professional animated websites without requiring coding experience. Users can request complete website designs and Claude handles styling, layout, animations, and responsiveness end-to-end.

Cartograph generates architecture, data flow, dependency, call chain, class, and community detection diagrams from codebases by analyzing code structure and rendering visualizations via Mermaid Chart MCP. The plugin provides `/visualize` commands that dispatch a codebase explorer agent to analyze modules and relationships, then synthesize Mermaid diagram syntax for rendering.

A pack of two SwiftUI Agent Skills for iOS 26+ development: swiftui-liquid-glass enables implementation and review of Liquid Glass with native APIs and patterns, while swiftui-iphone-duo adapts SwiftUI apps for iPhone Duo with layout, fold-safety, and hinge interactions. Both skills work with Cursor, Claude Code, Codex, and any Agent Skills–compatible harness.

Naksha is a virtual design team plugin that assembles 30 specialist roles (UI designer, UX researcher, content designer, Figma expert, motion designer, and more) for Claude Code and other coding assistants, offering 70 slash commands and 16,000+ lines of design expertise. The plugin activates automatically based on what you're building, integrating design system tokens, component frameworks, accessibility compliance, and multi-channel content creation into your coding workflow.

Refero is a design skill and MCP server that researches real product interfaces, visual styles, and user flows from 150,000+ app screens before implementation. It enforces evidence-based design decisions by accessing live Refero research data and bundled craft references for typography, color, spacing, motion, icons, and copywriting.

Designpowers is a 10-agent design system that runs an inclusive design workflow—discovery, research, strategy, design, build, and review—with accessibility integrated at every step and you as creative director approving or redirecting at each handoff. The plugin works with any AI coding tool via markdown skills and agents, supporting both Direct mode (approval at each step) and Auto mode (full pipeline with end review).

This standalone agent skill extracts design tokens (colors, typography, spacing, border radius, shadows) from any public website and generates W3C-compatible JSON and CSS custom property files for local projects. It's installable via `npx skills add` and provides a repeatable workflow for reverse-engineering starter design systems from existing websites.

Nuxt UI v4 is a production-ready component library with 125+ accessible, Tailwind v4-based UI components, 3 specialized agents, 4 slash commands, and MCP integration for building dashboards, forms, chat interfaces with AI reasoning, editors, and page layouts. The plugin includes pre-built templates for SaaS, documentation, portfolios, and provides deep-dive guides, semantic color theming, and WAI-ARIA compliance built on Reka UI.

Glif is a creative agent that generates images, video, and audio from natural language descriptions, picking appropriate models and chaining multi-step media jobs. The plugin connects the hosted Glif MCP server and bundles 11 skills for web visuals, logos, app promo materials, demo videos, game assets, and continuing saved projects.

This plugin integrates Adobe Creative Cloud tools directly into Claude Code, enabling multi-asset editing, platform adaptation, and complete creative workflows for images, vectors, design, and video. It provides 15 skills and connects via a dedicated MCP server to Adobe's creativity API.

Domscribe is a pixel-to-code development tool that enables bidirectional communication between running UI elements and coding agents via MCP, allowing agents to query live DOM snapshots with runtime context (props, state, CSS) and receive direct UI-to-code instructions from developers. It works framework-agnostic (React, Vue, Next.js, Nuxt) with build-time stable IDs and supports any MCP-compatible agent like Claude Code, GitHub Copilot, Gemini, and Cursor.

This Claude Code plugin provides 14 curated agent skills for CesiumJS v1.143 development, covering ~551 public symbols across domains like 3D tiles, imagery, terrain, camera control, and spatial math. The skills integrate with Claude Code and follow the open Agent Skills standard for browser-based iteration via Chrome DevTools.

ref2game converts a single reference image (screenshot, concept art, or mood image) into a playable 2D game prototype with AI-generated art and code-based animation, rigs, physics, and game feel running in a WebGL2 engine. The skill supports any 2D genre and art style, includes live hot-reloading preview, independent critic agents that validate assets and motion, and delivers a static playable build with sources.

Bridge compiles natural-language design descriptions into Figma output that is guaranteed design-system compliant by construction, enforcing 26 Figma API rules automatically through a local deterministic compiler. It provides Claude Code skills for iterative design generation (`make`/`fix`/`done`), maintains a synchronized knowledge base of design system registries via cron, and executes designs in Figma through MCP.

Oh My Cassette enables editing of local project media through an MCP runtime that integrates directly with Cassette video editor. Users can chat with Claude to transform raw video clips into finished cuts using natural language commands.

Vibes is a GUI framework for Claude Code that lets non-programmers build multi-user web apps as single HTML files with embedded TinyBase databases and real-time sync. Users describe their app idea, and Claude generates a complete, deployable application without requiring backend setup or server management.

This standalone Agent Skill reverse-engineers motion references (videos, GIFs, screen recordings) into production animation code through frame-by-frame dissection, covering both timeline choreography and interaction-driven animations. It analyzes reference material and outputs React/TypeScript implementations using framer-motion, with framework-agnostic analysis phases.

This standalone Agent Skill teaches developers how to build Solana applications using Phantom Connect SDK and Helius infrastructure, covering React/React Native integration, transaction signing, NFT minting, and crypto payments. It provides patterns for token gating, secure frontend architecture, and real-time updates via Helius APIs.

This plugin integrates Claude with Canva via an MCP server to create, edit, review, resize, and brand-check designs directly within Claude. It provides 6 skills for design operations on the Canva platform without requiring external API keys.

A comprehensive Claude Code plugin that integrates Remotion with a full suite of video production tools—including video analysis, TTS voiceovers, music/SFX generation, stock footage search, AI image/video synthesis, animated captions, and professional transitions. It automates the entire pipeline from concept to render through MCP servers and command-driven agents powered by ElevenLabs, TwelveLabs, Pexels, KIE, and Replicate.

A standalone Agent Skill that provides a complete system for building high-converting landing pages, including intake questions, page structure, layout selection, conversion copywriting, SEO, and strict visual rules for typography, spacing, colors, and motion. This example demonstrates the skill applied to Arko restaurant's landing page, which features a scroll-synced video walkthrough of the venue built with Astro, GSAP ScrollTrigger, and Lenis.

motiscope analyzes screen recordings of animations to extract precise timing, easing curves, and keyframes, then generates working code in GSAP, CSS, Framer Motion, or Lottie. The tool runs locally with ffmpeg and Python standard library, requiring no cloud accounts or external services, and works as a Claude Code plugin or portable agent skill.

libreuiux-hooks registers three Claude Code hooks that provide UI project context at session start, confirm before editing secret files, and flag accessibility and design issues after UI file edits. The hooks parse stdin JSON with jq and return findings to Claude via the documented hook output format, without requiring file system configuration.

libreuiux-hooks registers three Claude Code hooks that inject UI best practices into your workflow: a SessionStart hook outputs stack context and relevant plugins for frontend projects; a PreToolUse hook confirms before editing secrets files; and a PostToolUse hook highlights accessibility and design issues after UI file edits. All hooks read JSON from stdin and return Claude-formatted context without requiring external APIs or writing files.

mcp-excalidraw enables creation of hand-drawn diagrams with streaming animations, fullscreen editing, and the ability to save checkpoints and export to excalidraw.com. It connects to a remote Vercel endpoint without requiring API keys, providing tools to render, store, and share visual diagrams.

Funnel Architect transforms Claude into a full-stack sales funnel architect, generating production-ready pages, conversion copy, and deploying to Vercel, Netlify, or Cloudflare using 5 specialist agents and 29 skills covering 13 funnel types. It automates strategy, design, copywriting, performance optimization, and deployment with integrated payment processing via Stripe.

Livepilot is an agentic production system for Ableton Live 12 that provides 474 tools across 57 domains including device control, Splice integration, spectral analysis, and advanced music theory (neo-Riemannian harmony, species counterpoint, Euclidean rhythm). The plugin includes a Creative Director skill, technique memory, MIDI I/O, and an MCP server for semantic music composition and production workflows.

Agent-Media provides a unified interface to generate and edit images, videos, and audio using models like seedance-2.5, seedance-2.0, gpt-image-2.5, gpt-image-2.5-flare, gpt-image-2, and elevenlabs-tts, with support for references, character reuse, and optional user image uploads. It operates via OAuth sign-in with no API key required, tracks costs via quote tools, and offers a make_ugc shortcut for complete vertical video workflows.

This Claude Code plugin provides 20 agent skills and 3 MCP servers for building location-aware applications with Mapbox across web (React, Vue, Svelte, Angular, Next.js), iOS (Swift, SwiftUI, UIKit), Android (Kotlin, Jetpack Compose), and Flutter platforms. Skills cover geospatial operations, search integration, style management, performance optimization, cartographic design, and security best practices with expert decision-making guidance and production-ready implementation patterns.

This skill collection teaches Claude Opus 5.5 to generate complete procedural videos in two distinct visual styles: hand-painted watercolour-and-ink animation (p5.js + p5.brush) and kinetic typography with WebGL generative layers (three.js). Every frame is rendered in headless Chrome and encoded with ffmpeg, with no external image, video, or audio generation models involved.

Arxitect is an agentic coding plugin that enforces best-practice software design and architecture by providing specialized reviewers that validate API Design, Object-Oriented Design, and Clean Architecture standards. It includes implementation agents and review skills that help coding agents build robust, maintainable software while reducing context burn and improving code quality.

The divi5-toolkit is a Claude Code plugin that assists Divi 5 developers with CSS validation, code generation, accessibility auditing, and performance optimization for Core Web Vitals. It provides 10 commands, 5 agents, and 3 skills including setup auto-detection, selector lookup, and project health diagnostics across the latest Divi 5.13 modules and features.

Molten OS Core is a suite of 6 AI agent skills that compress product validation, brand strategy, design systems, and landing page creation into a reusable pipeline—turning a raw idea into a testable landing page in an afternoon. Each skill (molten-validate, molten-brand, molten-design, molten-landing, molten-search, molten-skill-manage) runs in sequence to guide users through discovery, positioning, visual design, and conversion optimization.

Buildable is a local-first product-structure compiler and quality gate that transforms vague prompts into runnable Next.js or Expo prototypes by selecting archetypes, design systems, and build-verified starter templates. It includes 15 golden starters and 61 recognized archetypes with micro-blocks and UI/UX guidance, plus a review loop that validates build, layout, accessibility, and state coverage without requiring a hosted platform or API keys.

This standalone Agent Skill generates conceptual process flow diagrams (PFDs) as editable SVGs along with the Python script that created them, triggered when a user describes a process and asks to visualize it or mentions P&IDs, control loops, or cascade control. It encodes chemical manufacturing engineering standards to help Claude produce diagrams that practicing engineers would accept, explicitly disclaiming replacement for issued-for-design P&IDs.

Memi is the design layer for agentic AI, providing 5 skills and an MCP server integration to enable structured design workflows for AI agents. The plugin connects to the Memi external tool to deliver design-focused capabilities for agent development and coordination.

wigtn-plugins is an AI-native development plugin with 11 agents, 6 commands, and 7 skills for rapid end-to-end design-to-deployment workflows. It includes team-based parallel build capabilities, screen specification generation (IA/User Flow/Wireframe HTML), and WIGTN-brand PowerPoint generation across 20 design styles.

A Claude Code skill that interactively co-builds C4 architecture diagrams (Context, Container, Component, Code levels) through mode-aware dialogue, automatically detecting whether you're designing greenfield, documenting existing code/prose, reviewing, or updating. Outputs negotiable formats (Mermaid, Structurizr DSL, PlantUML) with validation at each level before writing to local filesystem or connected MCP destinations.

svelte-grab runs an MCP server inside your Svelte 5 dev app to give coding agents precise visibility into page elements, components, source locations, and accessibility—with locators that work with Playwright and Chrome DevTools MCPs. Agents can inspect what's rendered, identify component files and line numbers, check props and state, and verify changes look correct after edits.

OPEN VIDEO EDIT is a local AI video editing framework with six modular skills for turning talking-head clips, scripts, or reference videos into animated vertical shorts and long-form YouTube content. Each skill combines motion graphics, kinetic captions, real logos/faces, and hyper-cut editing timed to the spoken word, with no timeline, templates, or paid generation required.

This standalone Agent Skill generates hand-drawn animated architecture and workflow diagrams in a sketch style with ink lines, beige paper, and flowing motion that traces the topology — exporting as self-contained single-file HTML (SVG+CSS) or seamless-loop GIF. It automatically matches a fixed design system of palette, stroke, and spacing, checks its own work by re-rendering, and supports CJK text with bundled OFL handwriting fonts.

A design director plugin that generates production-ready UI/UX for marketing websites, web apps, iOS, and Android—producing HTML/CSS directly for web targets and device-framed mockups plus handoff specs for mobile. Enforces a rigorous design method covering briefs, signature elements, anti-AI-slop principles, design systems with OKLCH tokens, motion profiles, UX copy, and a deterministic review gate aligned with WCAG 2.2.

fuse-shadcn-ui is a Claude Code plugin that analyzes and assists with shadcn/ui components, Radix UI, Base UI detection, and component patterns through five specialized skills and two hooks for pre/post tool use. It supports theming configuration and migration scenarios for component library integration, requiring bun as an external dependency.

A Claude Code plugin providing expert guidance on Tailwind CSS v4.1 with CSS-native configuration, custom directives (@theme, @utility, @variant), and the faster Oxide engine. It includes 16 specialized skills covering layout, styling, utilities, responsive design, and new v4.1 features like OKLCH colors and container queries.

Impeccable Lite is a standalone agent skill that delivers frontend design guidance, visual direction, and UX judgment for interfaces without commands or live editing. It helps design, build, and refine websites, dashboards, components, and application UIs with strong visual coherence and production-ready standards.

clawd-video is a standalone Agent Skill that generates short animated cartoon videos in hand-painted watercolor style by writing p5.js code and rendering frames with Puppeteer and FFmpeg, complete with synthesized original music and sound effects. Users describe a character and story, and Claude writes the animation timeline, paints backgrounds, animates the character with squash-and-stretch physics, renders the MP4, and generates a synced soundtrack.

RocketSmith is an end-to-end model-rocket toolchain that orchestrates OpenRocket (flight simulation), build123d (parametric CAD), and PrusaSlicer (FDM slicing) to let agents design, simulate, and build rockets. It closes the loop by feeding real printed-part weights back into the simulation for post-build stability verification.

SpriteCook gives Claude access to a hosted MCP server for generating pixel-art sprites, tilesets, character animations, and game assets with guided workflows. Users can create and manage game-art assets, check credit balance, and export Godot-ready files directly from Claude.

Roast-my-design-system scans your repository to audit design system health, generating a deterministic score backed by detailed findings on colors, spacing, component duplication, and inline styles. It benchmarks your repo against 119 public repositories and 10 reputable design systems, then produces a shareable HTML report with ranked fix recommendations.

roast-my-design-system scans your codebase to measure design system health with a deterministic score, identifying color duplicates, spacing inconsistencies, and inline styles against real benchmarks from 112+ public repos. It generates a shareable HTML report and prioritized fix recommendations tailored to your tech stack (MUI, Mantine, Chakra UI, Ant Design, Tailwind, or custom systems).

This standalone Agent Skill repository delivers a five-step workflow to create agency-grade motion-design launch videos (30–60 s, 16:9, voice-over, word-by-word captions) using Claude Code and HyperFrames, HeyGen's open-source video engine, without coding. Users author scripts with Claude, generate voice, validate storyboards, and Claude animates sequences, adds music and sound effects, then verifies the final film before delivery.

Nano Banana 2 generates and edits images directly in Claude Code using Google Gemini 3.1, supporting text-to-image, inpainting, style transfer, 4K output, search grounding, and multi-image composition through a single /genimage command. The plugin automatically selects between Gemini 3.1 Flash for standard work and Gemini 3 Pro for high-resolution output, requiring only a free Google Gemini API key.

The readable plugin injects a SessionStart hook that makes Claude format replies as styled HTML cards, with automatic tier selection (MCP Apps card server, inline widget kit, or BiDi-safe text) based on available host tools—no configuration needed. Each card loads only the CSS it uses, supports Persian/RTL with per-block direction resolution, and can include charts, tables, figures, screenshots, and looping animations that stay embedded in a single offline file.

A customizable status bar plugin for Claude Code that displays real-time session metrics (model, cost, duration, git status, token usage) at the bottom of your terminal with 20+ widgets, 3 layout options, and a pixel art mascot. It uses pure Node.js with zero external dependencies, file-based caching, and targets sub-80ms execution time.

Converts Google Stitch designs into pixel-perfect Next.js components with exact CSS values, fonts, and images preserved through a 7-phase extraction pipeline. It auto-detects your Tailwind version, downloads assets, maps design tokens, and validates output against the original design screenshot.

Visual Stack adds a Figma-like feedback layer to Claude Code, enabling designers and developers to create and iterate on screens by clicking elements and leaving feedback directly on the UI. It maintains a timeline of revisions with attached comments tied to specific elements and routes, while supporting desktop, tablet, and mobile layout previews all contained as self-contained HTML files in your project.

Design Library is a Claude Code plugin bundling 58 brand design systems (Stripe, Linear, Vercel, Figma, Google, Anthropic, and more), 7 curated design skills covering UI/UX, web guidelines, accessibility (WCAG 2.2), motion design, visual taste, and Lighthouse/Core Web Vitals audits, plus a bundled Playwright MCP for in-browser UI verification. The plugin auto-detects your project type and activates relevant skills via slash commands and natural language integration.

F-MCP Bridge connects Figma designs directly to Claude and other AI assistants through 26 skills and 8 commands, enabling bidirectional design workflows like extracting design tokens, generating React code, and performing accessibility checks—all without sending design data to the internet. Runs locally on Claude Code, Claude Desktop, or Cursor with optional Figma API token support for advanced features like version history and comments.

excalidrawer is a code-first diagram generation tool that turns structured specs or agent intent into hand-drawn-style Excalidraw diagrams (flowchart, timeline, architecture, sequence) and exports them to .excalidraw, SVG, or PNG—no browser needed. The Claude Code plugin auto-registers an MCP server with five built-in skills and works entirely via CLI, programmatic API, or in-context agent commands.

This standalone Agent Skill provides two design tools: cyxj-poster generates professional poster and cover designs using 33+ designer styles and 10 photography styles with AI prompt optimization and image-to-image capabilities, while cyxj-video-cover handles video and YouTube thumbnail generation via the cyxj-release-kit. Both skills support multiple platform aspect ratios and style comparison features.

A standalone Agent Skill that provides Claude with comprehensive reference documentation for building Mintlify documentation sites, covering components, configuration, navigation, and API documentation setup. The skill intelligently routes to detailed reference files only when needed, including syntax for callouts, cards, steps, tabs, accordions, code groups, and full docs.json schema reference.

A design audit plugin that scores projects across 12 dimensions—color, typography, accessibility, layout, and more—using WCAG and APCA standards, reporting exact file locations, measured values, and specific fixes for each issue. It works as a Claude Code plugin, Agent Skills, or standalone CLI tool with zero runtime dependencies and no external keys required.

Agent Grid by Anima is an MCP server that lets AI agents build, host, publish, and edit web apps from prompts, URLs, Figma designs, or custom code. Every app is stored as a real git repository on the Agent Grid platform and can be deployed to live URLs.

cc-meme is a Claude Code Hook plugin that displays floating animated overlays during coding sessions via communication with the meme-overlay desktop application through POSIX named pipes. It listens to eight different Claude Code events (session start, tool use, errors, etc.) and automatically manages the overlay process lifecycle.

Claude Code plugin that provides a production-grade library of 58 security-reviewed Blender skills through a single MCP server, with task classification and workflow profiles that scale planning and render budgets to the job. It lets Claude build, materialize, light, and render 3D scenes in Blender 4.2+ with checkpoints and planning at each stage.

Claude WP Builder automates the conversion of demo HTML mockups into production WordPress themes with ACF/SCF fields, bilingual support, and SEO — processing section-by-section or entire sites in one pass via command-line workflows. It transcribes client-approved static designs into fully functional themes, never inventing design and always starting from an approved demo.

ftk is a frontend development toolkit providing 18 skills and 4 agents for UI/UX design, shadcn/ui components, browser automation, JSON rendering, and Remotion explainer videos. It includes 11 commands for design workflows, prototyping, and integration with Google Stitch AI for AI-powered UI generation.

The researcher plugin creates distinctive, print-ready HTML and Markdown one-pagers with five curated aesthetic presets (Terminal, Editorial, Corporate, Industrial, Fresh) designed to avoid generic AI design patterns. It converts HTML documents to PDF using Chromium-based browsers and provides shell commands for batch PDF generation.

Rueca wraps prototypes and existing code in a professional design tool with inspector, timeline, layers, and export capabilities, shipping as an agent skill, Claude Code plugin, and React component registry. It connects any runtime or framework through a minimal bridge or React components, letting coding agents automatically build the harness around your prototype.

Ultimate Frontend Skills ships a complete design system and build pipeline for creating cinematic, editorial websites with WebGL mesh gradients, three-plane parallax, procedural 3D views, and professional typography—replacing generic AI-generated layouts. It provides 23 commands covering reference research, asset management (CC0 PBR materials, HDRI lighting), Blender integration, scroll choreography tools, and verification gates across nine build stages from brief to ship.

This plugin provides 17 editing skills for the BashCut video editor, covering workflow planning, footage surveying, rough cuts, beat-based editing, audio mixing, captions, color grading, effects, and visual planning. It integrates with BashCut's MCP server and includes specialized agents for surveying and reviewing that run on cheaper models.

brand-forge generates on-brand logos, social templates, and marketing graphics as scalable SVG assets with zero required keys or accounts; AI imagery via Gemini or OpenAI is opt-in and off by default. It stores a versioned visual brand profile and enforces accessibility checks (contrast, clear-space, palette) on all generated assets before output.

A floating Pokémon or Digimon companion that appears in Claude Code, reacts to your coding sessions in real-time with animations, and evolves through levels as you complete tasks. The pet battles random challengers, maintains a persistent dex of creatures you've encountered, and adapts behavior based on tool success or failure throughout your day.

fig is a Claude Code plugin that automates the non-drawing half of Figma work—preparing design files, maintaining consistency, and generating handoff documentation through 14 skills like setup, lint, prep, and code generation. It reads and enforces team conventions from a shared configuration file, supports design tokens and flow arrows, and integrates with front-end code and QA workflows.

A Claude Code plugin that organizes scattered AI usage into a reusable, team-owned design practice through a five-layer harness: Context, Skills, Orchestration, Rubrics, and Knowledge. Four skills enable learning, setting up, maintaining, and reviewing the harness across Notion, Figma, and version-controlled repo artifacts.

Nopekit is a Claude Code plugin for exploring and validating physical designs—hardware, enclosures, PCBs, boats, thermal systems, and more—by extracting design claims and gating them with validators that can fail and report what is verified versus assumed. It uses the Grounding by Falsification approach to wrap AI-generated proposals with trusted checks (math, physics, simulations) so you can track evidence and keep designs grounded as they evolve.

pptx-craft provides 7 agent skills and a CLI to build native, layered, animated PowerPoint decks with staged quality gates that block progress until content and design pass checks. The plugin generates editable `.pptx` files with real text boxes, separate image layers, and native PowerPoint motion graphics, plus optional MP4 video export with frame-accuracy verification.

Trident is an unofficial Claude Code plugin that wraps the Tripo 3D API to generate, texture, rig, animate and convert 3D models from text, images, or multiview inputs. It includes 28 MCP tools for mesh creation, UV unwrapping, segmentation, Gaussian splats, and format conversion, with a workflow skill that estimates credit costs before spending.

This standalone Agent Skill repo provides two skills for working with SAP's UI Theme Designer and design tokens: ui-theme-designer-help answers how-to and conceptual questions about setting up, managing, and using UI theme designer on SAP BTP, while ui-theme-designer-design-tokens answers questions about SAP Design System themes, Fiori design token values across theme variants, and which tokens UI5/Web Components/Fundamental Styles controls consume.

This plugin enables Claude to create and manage flowcharts, mind maps, wireframes, sequence diagrams, and sticky notes directly in Whimsical through an MCP server connection. Users can iterate on diagrams, search their Whimsical workspace, and edit existing boards without leaving the conversation.

apple-hig ships a complete on-disk reference of Apple's Human Interface Guidelines (iOS, iPadOS, macOS, watchOS, tvOS, visionOS) and automatically designs and reviews UIs to match them, with a router skill that loads only the files relevant to the current task. It includes verified design tokens, typography, color palettes, layout rules, and accessibility minimums from the current Liquid Glass/Golden Gate generation, all without fetching Apple at runtime.

The Doom Design System plugin equips AI agents with comprehensive knowledge of a neubrutalist React component library, including component APIs, design tokens, theming, and coding standards. It includes 4 agents, 3 commands, 1 skill, and 1 hook that intercept pre-tool-use events to guide component selection and implementation.

miadi-stateloom is a Claude Code plugin that bundles the stateloom design loom—an MCP server and 8 integrated skills—to let agents design system data (ERDs), behaviors (state machines), and usage scenarios (sequences) as a single coherent model. It automatically validates cross-model consistency, replays scenarios through machines, reconciles updates in propose or auto mode, and generates RISE rispecs from the complete system design.

Showtime is a local video production studio that generates motion graphics, voiceovers, music, sound design, captions, and platform-ready video exports entirely on your machine from natural language descriptions. It integrates with Claude Code and other coding agents through Agent Skills, requiring only Node.js and uv, with no cloud services or API keys needed.

slide-forge is a Claude-first agent-driven system for generating Google Slides presentations using 25 reusable skills covering templates, diagrams, sales workflows, and analysis frameworks. It provides an end-to-end pipeline from spec authoring through validation, generation, visual QA, and optional PowerPoint export with no external API keys required.

UI/UX Pro Max is a Claude Agent Skill providing design intelligence with 67 styles, 96 color palettes, 57 font pairings, and 25 chart types across React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, and shadcn/ui. It supports actions like planning, building, designing, implementing, reviewing, and optimizing UI/UX code for websites, dashboards, e-commerce, SaaS, mobile apps, and more.

This standalone Agent Skill transforms Chinese or multilingual SRT subtitle files into animated 9:16 vertical videos using a Notion-minimalist card-led style with centered 3:4 modules, and converts oral presentation SRT subtitles paired with MP3 audio into synchronized "indicative animation" explainer videos with dark or Gumroad-style light themes using abstract shapes rather than text overlays. Both skills support semantic scene segmentation, storyboard review, frame-by-frame animation authoring, and rendering to 4K MP4 output, with the latter backed by a 540-animation reference library and a v2 design specification for speech-driven dark animations.

adr-creator helps developers document architectural decisions by generating Architecture Decision Records (ADRs) through Claude Code. The plugin includes one skill and one MCP server, requires npx, and supports tiers from free (50 req/day) to enterprise plans.

Agent Critter is a desktop pet plugin for Claude Code that displays real-time AI work status through animations synchronized via webhook hooks. It supports 2700+ customizable spirits from Petdex with drag, scale, and pet-switching capabilities.

ai-brainmap visualizes Claude Code's reasoning in real-time as an interactive 2D/3D mindmap, with every user prompt, tool call, and response rendered as a glowing node that grows additively as Claude works. The plugin runs a local Python HTTP server that receives events via Claude Code hooks and streams live updates to a Three.js + D3 frontend in your browser, with optional LLM-powered topic clustering that defaults to local endpoints only.

animation-helper generates CSS and Framer Motion animations through an integrated MCP server and skill. It supports both free and paid tiers, with the free plan offering 50 requests per day.

Transforms a project repository into a narrated, edited demo video by reading the codebase to write a storyboard, driving the UI with Playwright and recording clips (via Playwright video or OBS), generating ElevenLabs voiceover with measured duration, and rendering the final output with Remotion or exporting as a Final Cut Pro project. The plugin enforces deterministic pipelines with JSON contracts, audio-led timelines, and multiple quality gates to ensure consistent demo video production.

Get Design Done is an agent-orchestrated 5-stage design pipeline (Brief → Explore → Plan → Design → Verify) with 35 specialized agents, 58 skills, and 12 tool connections (Figma, Refero, Preview, Storybook, Chromatic, Figma Writer, Graphify, Pinterest, Claude Design, paper.design, pencil.dev, 21st.dev, Magic Patterns) that grounds design work in verified references, system inventory, and the original brief. It embeds NNG heuristics, WCAG compliance checks, dark-mode verification, motion-system consistency, and anti-pattern detection with a self-improvement loop (reflector agent, telemetry-driven feedback, global-skills layer) and CI/CD pipeline (Node 22/24 × Linux/macOS/Windows), targeting 50–70% per-task token-cost reduction.

This Claude Code plugin provides a structured 5-stage ideation pipeline—intake, generate, review, UI concepts, and prototypes—orchestrated through an integrated agent and complementary skills. It processes creative ideation workflows locally using bash without requiring external API keys or third-party services.

This plugin enables Claude Code to generate and manipulate diverse media assets—images, videos, GIFs, music, and text-to-speech—alongside data visualizations using Google Gemini, D3.js, Mermaid, and Draw.io. A visual-planning gate and media-prompt-craft workflow ensure every asset is clarified, styled, and reviewed before production.

This plugin lets you build and publish web apps directly from your computer to Ovenlight, then receive user feedback from the iPhone app in Claude. It integrates with the Ovenlight connector via MCP to enable local development and remote publishing workflows.

This Claude Code plugin automates the full PCB design workflow from circuit ideas to manufacturable KiCad projects, handling part selection, schematic generation, placement, autorouting, and electrical/noise validation. It outputs production-ready files including Gerbers, BOMs, and pick-and-place files, while keeping all designs as editable KiCad 9 projects.

This plugin transforms design briefs into production-ready React/Vite websites by orchestrating design direction, content architecture, AI-powered media generation, and parallel per-page implementation with visual testing. It enforces an opinionated workflow to eliminate low-quality outputs and automates the entire path from concept to deployable code.

Arkitect generates and edits native Draw.io and Excalidraw diagrams from JSON specifications, creating cloud architectures, system designs, data pipelines, and network views with 6,000+ bundled icons entirely on your machine. The agent validates diagrams and renders local previews, supporting both formal architecture visualizations and hand-drawn sketches with no external dependencies or uploaded data.

The bestax plugin provides 7 Agent Skills and an MCP server for building React applications with @allxsmith/bestax-bulma components and Bulma v1, including tools for forms, layouts, icons, theming, migration, and optimization. The MCP server answers questions about component props, examples, and CSS variables without making external network requests.

This plugin guides users through a five-phase brand creation workflow—discover, strategy, verbal, visual, and guidelines—with compliance auditing at each stage via a phase-gate shell script. It enforces structured brand development practices and validates outputs before progression.

Buildable is a local-first product-structure compiler for Claude Code and other coding agents that turns vague prompts into polished prototypes by selecting appropriate app archetypes, golden templates, reusable UI/UX blocks, and design systems before generation. It runs locally as a file-based skills package with a CLI planning and review loop, offering build-verified starters and quality gates without requiring hosted infrastructure.

The Car Image plugin generates studio-quality, transparent-background vehicle renders in 8 camera views and any paint color, plus free VIN decoding and 3D model generation for any car make, model, and year from 1990–2027. It integrates with Claude Code, Codex, and Cursor via OAuth or API key, delivering signed URLs optimized for web display and supporting PNG/WebP/JPG formats up to 1024px.

This Claude Code plugin implements a five-phase design thinking process for component design, with nine skills that write outputs to a Figma canvas via an MCP server, covering empathize, define, ideate, prototype, test, accessibility audit, design review, token export, and system overview. It requires a Figma access token and the `@metapowers/figma-mcp` MCP server to enable live integration with Figma.

Design-playbook provides declarative UI generation for Claude Code agents through a six-layer spec-to-evaluation pipeline, composing component templates and CJK-first design contracts. It includes 9 skills and 8 commands for orchestrating product UI from baseline discovery through craft validation and acceptance review.

Skill is a standalone Agent Skill suite with 38 entrypoints across design, engineering, and research domains, offering both structured SOPs (standard operating procedures) and open-ended heuristics for creative thinking and reproducible workflows. It combines practical execution workflows with exploratory lenses for frontend development, visual design, security reviews, testing, maintenance, and research experimentation.

This standalone Agent Skill generates chunky low-res pixel-art game sprites for characters, monsters, and bosses with consistent style across rosters using Google Gemini and a deterministic post-process snap pipeline. Output is engine-agnostic PNG files (chars, monsters, background sets) ready for 2D game engines like Godot, Unity, Pico-8, and raylib.

Phyll walks through your AI-built app as a first-time user would, collecting screenshots and interaction data to identify UX anti-patterns like excessive form fields, template defaults, and accessibility issues, then generates a detailed report with fixes. The plugin runs in Claude Code using your own plan with no additional AI token charges, and includes a source scanner, browser, and review engine.

This Claude Code plugin integrates PluginOS MCP server to enable token-efficient Figma automation, bridging Claude directly to Figma without dumping raw node data. It includes a procedural skill that teaches Claude to use PluginOS operations effectively.

This plugin ships the Webflow MCP server (remote HTTP with OAuth) plus a `webflow` skill, enabling projects to read and edit Webflow sites including pages, CMS, assets, components, styles, variables, custom code, comments, localization, and publishing from a single dependency. Authentication uses OAuth at mcp.webflow.com with no API key required.

A Claude Code plugin that displays an animated robot face on your screen, showing Claude's state in real-time—idle, thinking, writing, running commands, waiting for approval, or done. It integrates via hooks to track Claude's actions and displays different facial expressions and actions that correspond to what Claude is actively doing.

Draw and annotate elements on a running localhost page, then send all markups and notes into Claude Code for editing—the plugin captures element details, DOM structure, React component tree, and cropped screenshots, then reports progress back to the page as Claude works. Everything runs locally with no cloud, requiring only Node.js and a Chrome window.

CADBuildr provides 4 AI skills and an MCP server for 3D CAD workflows, enabling design, rendering, export, and broker/viewer operations within Claude Code, Cursor, Codex, and Mistral Vibe. It connects via the CADbuildr API key and MCP endpoint at mcp.cadbuildr.com.

A collection of four vendored Claude Code skills—find-skills, stop-slop, task-observer, and ui-ux-pro-max—packaged together for convenient installation into any project via shell scripts. Each skill addresses a specific workflow: discovering capabilities, eliminating AI writing patterns, observing multi-step work, and designing interfaces with design system and accessibility guidance.

cupertino applies a fixed, sequenced eight-stage design lifecycle discipline rooted in documented Steve Jobs decisions, running in order from backwards-compatibility checks through prototyping, council review, and ship-time stages rather than as a menu of individually-selectable techniques. It includes four handbook skills to embed design decisions durably across code, design, testing, and documentation domains, plus a post-ship cannibalization stage for continuous improvement after launch.

design-drift is a Claude Code plugin that prevents AI-generated UI from drifting away from your design system by enforcing constraints in real time on every write via PostToolUse hooks. It supports 121 brands with dynamic token extraction from constraint layers (SKILL.md) and visual guidelines (DESIGN.md), surfacing violations with inline fix hints.

This plugin integrates your React design system as ground truth for Claude via MCP, exposing components, props, variants, and tokens. It includes a PostToolUse hook that lints every UI file Claude writes to enforce compliance with your design system constraints.

Desk Studio integrates a multi-agent design workflow into Claude Code and other coding agents, running design jobs through a pipeline of specialized agents (roughs, pick, polish, proof, sign-off) without external dependencies. It generates professional design assets like social cards, brand kits, dashboards, and presentations using local model calls, with all output files saved locally.

Easing Wizard generates professional CSS easing curves and provides animation auditing through an expert agent, offering 7 MCP tools for Bezier, Spring, Bounce, Wiggle, and Overshoot curves with 68 presets. Three skills let developers describe animation feels and get curve recommendations, upgrade existing easings, or audit entire projects for animation improvements.

The Figma plugin integrates the Figma MCP server with 9 skills to enable AI agents to generate code from design files, extract design context, and write native Figma content directly to the canvas. It provides workflows for code generation, design system integration via Code Connect, and variable/component extraction.

This skill converts design images (Figma exports, mockups, wireframes, screenshots) into clean, semantic, accessible HTML/CSS code with SEO best practices. It activates when users provide an image of a page or component and request code generation.

The iris Claude Code plugin gives Claude a reliable camera for capturing screenshots of live websites with full-page, element-level, mobile/desktop preset, dark mode, and batch capabilities via a CLI and bundled MCP server. It includes skills for `/screenshot`, `/responsive-audit`, and `/visual-diff` along with a `@visual-reviewer` subagent for proactive visual QA after UI changes.

DJclaude generates 30-second clips or full 2–3 minute songs from text prompts using Google Lyria 3, with control over genre, BPM, instruments, and mood entirely through natural language. The skill is completely free and runs on the Gemini API's free tier.

MakerLine Idea turns a product concept into a validated go/no-go decision by conducting discovery interviews, competitive analysis, accessibility checks, and design direction—delivering an Idea Pack with a brief, evaluation, competitor analysis, wireframes, PRD, and one-pager, all without writing code. It integrates with GitHub, Figma, and Notion to enhance research and collaboration, relying on Claude's built-in search and local validation scripts.

Marvelous UI is a framework-agnostic Web Components library providing 21 free UI components (badges, buttons, dialogs, menus, toasts, and more) accessible through a local MCP server that searches, installs, and documents components for Claude Code agents. The plugin includes a skill that teaches agents how to use the library, hooks that encourage searching before hand-writing UI, and runs entirely locally with no external dependencies or network requests.

Matrize derives a master design system from reference exemplars, assigns explicit purpose and rules to every recurring element, and emits to platform-neutral DTCG token files that generate byte-stable output across CSS, Tailwind, VitePress, and other targets. Measurement and interpretation are kept as separate artifacts; sources are read-only, and values are graded for trustworthiness and reproducibility rights before any token is created.

Modellix plugin provides a unified CLI and REST API interface for AI-powered image, video, and audio generation workflows with automatic preflight checks, task management, and persistent safety rules. It includes slash commands for prompt engineering, model discovery, and result download, plus optional hooks to prevent repeated paid submissions and remind users to retrieve generated assets.

Motif is a suite of ten Agent Skills that measure design inconsistencies in a codebase, help you establish a design system with standardized spacing, type, and color values, apply those tokens throughout your code, and enforce them via linting. It works across frameworks (React, Vue, Svelte, Astro) and can also beautify UIs, apply transitions, choose icon libraries, and generate empty states once your design system is in place.

This plugin creates AI-powered marketing videos through a complete pipeline that takes a brief and automatically generates storyboards, images, video clips, background music, and lipsync effects using MuAPI's generative media APIs. Users can request videos directly from Claude Code (e.g., "Create a 30s TikTok for our coffee brand") and receive clip and music URLs ready for final assembly in a video editor.

Onsystem keeps Claude aligned with your React design system by reading components, props, variants and tokens, then catching and correcting invented UI elements via a post-edit hook and MCP server. It runs locally with zero config, integrates seamlessly alongside @shadcn/lint, and makes no network requests or API calls.

This plugin generates production-ready Pendo in-app guides (walkthroughs, announcements, alerts, polls, promotions) as HTML/CSS/JS based on a conversational intake form. It connects directly to Pendo's platform to streamline the creation of user engagement content without manual coding.

PhotoCraft is a creative photo editing plugin providing 22 independent skills for image manipulation, restoration, and composition through an MCP server with Node.js. The development candidate (0.1.0-dev) includes pinned editor workflows for macOS and Windows, with comprehensive test coverage but incomplete host acceptance and real-world quality validation.

rs-dl-architect is a Claude AI skill that designs, analyzes, and reviews deep learning architectures specialized for remote sensing and satellite imagery tasks. It covers segmentation, change detection, multi-modal fusion, temporal analysis, foundation models (SatMAE, Prithvi, GeoSAM), object detection, and uncertainty quantification, with production-ready code templates in PyTorch and TensorFlow.

A Claude Code plugin that lets you describe a website concept and automatically publishes it to simple-host.app with pages, backend services for saves and sign-ups, visitor analytics, and custom domain support. The plugin integrates with Simple Host's infrastructure through 3 skills and an MCP server to handle site deployment and management.

Stunt Double is a standalone Agent Skill that deploys AI user personas to validate user journeys and find UX friction points before real users encounter them. The skill provides five agents to create actor personas, run design reviews, execute QA suites, validate workflows, and triage feedback—all integrated with Claude through MCP at a hosted endpoint.

Supericons enables semantic SVG icon search across 20,000+ free icons from 11 libraries, allowing agents to find icons by meaning, visual description, and tags rather than file names. It provides icon retrieval, visual comparisons, and consistent icon set recommendations for UI components.

UI-Evaluator is a Claude Code plugin that audits and fixes web UIs against verifiable standards including WCAG 2.2 AA accessibility, usability, craft quality, and absence of generic AI patterns. It runs isolated evaluator subagents that perform deterministic browser checks, heuristic evaluations, and cognitive walkthroughs, then fixes issues one at a time with verification.

This plugin connects Claude to Unbounce's MCP server, enabling authors to create, manage, and publish landing pages directly through the Unbounce platform. It provides three skills for interacting with Unbounce landing page assets and workflows.

Vulca is a visual control layer for Claude Code that transforms fuzzy creative intent into structured direction cards, design specifications, and cultural evaluations through a 7-skill workflow. It coordinates provider-routed image generation, editing, and VLM-backed evaluation while maintaining auditable artifacts like discovery.md, design.md, and evaluation.json.

Accents for UI5 is an open design framework for building business applications on OpenUI5, providing a shell, 16 page patterns, and 70 pre-built elements with consistent design rules for planning, analytics, forms, reporting, and workflow. The Claude Code plugin includes a skill that teaches the framework's rules and an MCP server that helps find entries, read examples, launch apps, and validate implementations.

This agent skill helps implement and troubleshoot native window materials and effects in Tauri 2 desktop applications, including macOS vibrancy/Liquid Glass and Windows Mica/Acrylic. It provides guidance on translucent sidebars, titlebars, transparent WebView content, and platform-specific opaque fallbacks.

This Claude Code plugin integrates the Antigravity CLI (agy) to create PNG images from text descriptions and translate content into Emirati (UAE) dialect Arabic. It provides three tools: image generation, Emirati text translation, and poster creation with translated Emirati captions.

This plugin turns your photos into photo mosaics (one image composed of hundreds of your photos) or photo collages (photos arranged in shapes like hearts, numbers, or words) without generating AI images. It provides a watermarked preview in chat and delivers full-resolution files on collager.ai.

AIGUI is an SDK that lets Claude Code render streaming LLM responses as live interactive UIs with charts, diagrams, 3D scenes, topologies, molecules, and custom cards in React, Vue, or plain DOM. The Claude Code plugin provides an MCP server and guidance for integrating the @ai-gui/core SDK and its plugin ecosystem to turn fenced code blocks into rich visualizations.

This plugin integrates Claude Code with seven open-source ArtCraft applications (PhotoCraft, VectorCraft, FilmCraft, LightCraft, PdfCraft, EffectCraft, DesignCraft) through their built-in MCP servers, enabling image editing, vector design, video, lighting, PDF manipulation, and visual effects workflows. Each app has a tested skill that allows Claude to drive the corresponding ArtCraft tool for design and media creation tasks.

A PMPO-driven iterative refinement engine with five agents and twenty domain-specific skills for refining logos, UI components, content, images, code, and A2UI specifications across Claude Code and 12+ other supported IDE agents. It uses bash execution, optional e2b sandboxing, and vendored Rust tools (rust-mcp-filesystem, template-forge) with cross-session state management and multi-agent deployment support.

autoimage detects missing or placeholder images in frontend files (JSX, TSX, HTML, CSS, Vue, Svelte, Astro) and generates brand-aligned assets by calling either OpenAI gpt-image-2 or Google gemini-3.1-flash-image-preview, with automatic brand palette detection from project configuration. The plugin includes a PostToolUse hook that scans edited files for missing assets and slash commands to audit projects, regenerate specific assets, and configure brand settings.

Blueprint Studio is a Claude Code plugin that lets you generate branded AI assets, manage team members, and customize styles through natural conversation—no API keys required. It connects to tools.blueprintstudio.ai via MCP server and provides tools for asset generation, brand/team management, custom styles, and automation.

Buoy is a Claude Code plugin and MCP server that gives coding agents access to your design system tokens so they look them up before writing styles, then automatically flags hardcoded values and design drift after each edit. It works with CSS custom properties, Tailwind themes, tokens.json, SCSS variables, and DESIGN.md files with no configuration needed.

This Claude Code plugin teaches Claude to create and manipulate collaborative whiteboards and diagrams using Canvs.io through an integrated MCP server. It enables users to request flowcharts, wireframes, org charts, and other visual content directly through Claude, which leverages Mermaid as its primary diagramming strategy.

This plugin packages IBM's official carbon-builder skill with a hosted Carbon MCP server to enable component/variant/prop search, docs lookup, accessibility guidance, charts source, labs access, and code-compliance audits for IBM Carbon Design System UIs. An IBM-approved account is required to access the server; unapproved sessions fall back to a bundled public-docs index.

Character Prompt Builder converts character ideas, design briefs, or existing character states into complete image-generation packages—prompts, negative prompts, and reference materials—that can be sent to an image service while maintaining a studio of every generated image alongside its source request. The plugin uses local Python tools to manage production knowledge, validate inputs, track character state across revisions, and keep a versioned record of all approvals and results without requiring API keys.

An Agent Skill providing architectural guidance and code review automation for C# / .NET projects using Vertical Slice Architecture, CQRS, and modern C# idioms (C# 12–14). It includes reference documents on architecture patterns, code quality guidelines, a 100+ item review checklist, and anti-pattern detection to enforce aesthetic architecture principles.

CurlShot is an MCP server and agent skill that lets Claude take screenshots of public web pages in multiple formats (PNG, JPEG, WebP, PDF, or scrolling video). The plugin connects to the hosted CurlShot service via API key to render pages with customizable viewports, device presets, and capture options like dark mode, ad blocking, and element selectors.

This plugin provides 7 classical image processing skills including format conversion, SVG rendering, resizing/cropping/rotating, color adjustment, filters, edge detection/segmentation, and compositing/blending operations. Claude automatically selects the appropriate skill based on user requests to perform the image manipulation task.

darkroom-claude automates measured RAW photo development by diagnosing images with quantified metrics, safely editing darktable XMP sidecars, and framing photos for social media export without GUI automation. It includes skills for tonal analysis, XMP rule enforcement, social media composition, and tools for rendering, verification, and database synchronization.

DataInk provides six modular AI skills for clear data communication, including chart design, infographic creation, dashboard layout, table design, data storytelling, and visualization review grounded in Tufte, Few, and Knaflic methodologies. It runs as a Claude Code plugin with built-in accessibility checks, WCAG compliance validation, and color-blind-safe palette recommendations.

A Claude Code plugin that guides you through product design from initial idea to launch, applying stage-specific frameworks while tracking decisions, killed ideas, and reasoning in a persistent project brain. It encodes one designer's concrete rules and case library, triggering just-in-time guidance based on problem size and development stage rather than applying generic frameworks universally.

Designless is an agent orchestrator that connects coding agents to brand design intelligence and Prism, an agent-native canvas, enabling them to build with consistent brand context instead of generic defaults. It detects user intent from natural language and automatically routes to the appropriate capability—from brand creation and design token generation to visual editing and pull request generation—without requiring specific sub-commands.

This plugin sets up, audits, fixes and gates a web project's design system using W3C Design Tokens (DTCG) and rules documents, so AI coding agents stay on-brand. It installs gates that enforce design compliance via token checks, ESLint rules, git hooks, and CI jobs, with a built-in Terrazzo + Tailwind CSS v4 profile for compatible projects.

A routed agent skill that guides website creation, product design, brand systems, messaging, and design audits through progressive disclosure, loading specialist knowledge only for the current phase. It distinguishes itself from webdesign-excellence by focusing on strategy, content architecture, and UX planning rather than concrete page and component implementation.

This plugin provides 2 agent skills and an MCP server for building and maintaining dotCMS sites, handling content types, pages, templates, containers, VTL, and headless Next.js delivery. Both skills include verification steps to ensure pages render correctly, addressing dotCMS's characteristic of returning HTTP 200 even when content fails to display.

This Claude Code plugin enables building, previewing, and publishing web apps directly in your drobek workspace through the drobek MCP server, generating a shareable preview URL after each build. It supports both drobek.app and self-hosted drobek servers, with OAuth authentication and real-time compile checking as files are written.

DS Bridge measures design-system adoption, health, and drift over time by recording metrics in CI and analyzing them across repositories, then uses token drift detection, design-system-aware linting, and pre-handoff QA to find and fix off-system code within Claude Code. It integrates with Figma Professional+ to validate designs against token files and exports analytics to dashboards, manager reports, and BI tools.

EasySociable is an MCP server that lets Claude agents turn prompts and markdown into branded, multi-page social media carousels optimized for TikTok, Instagram, LinkedIn, Threads, and Xiaohongshu. It provides 36 MCP tools and 4 agent skills to manage brands, templates, slideshows, and design assets with an in-browser Studio for final review and one-click multi-platform PNG export.

This Claude Code plugin provides an MCP server that integrates emaki.ai's AI video and image generation capabilities directly into Claude, supporting Seedance 2.5, Seedance 2.0, and other models for text-to-video, image-to-video, and text-to-image workflows. Users can generate videos (4–30 seconds, up to 1080p) and images by asking Claude in chat, with results returned as URLs using their own emaki account and credits.

This plugin integrates the eModely Engine for cooling system design and simulation, enabling users to model building cooling loads, design chiller and district cooling plants, and run annual simulations with real weather data. It requires an active eModely account and connects to the eModely service via an MCP server.

figma-handoff orchestrates a full Figma-to-dev readiness pipeline, dispatching 7 specialized agents to rebuild component structure, apply tokens and auto-layout, enforce business-semantic naming, add a11y annotations, and guard every mutation with structural diffs. It produces a versioned handoff/ folder with tokens, code-connect mappings, screens, audit results, and human-readable summaries — all on a working copy while keeping the original Figma file untouched.

The Flint plugin for Claude Code enables building and managing websites through natural conversation by running background agents that add pages, update content, and redesign sections. It connects to Flint's AI website builder, allows checking agent progress with preview URLs, listing sites across organizations, and publishing to production.

Foreigner is a designer-founder partner plugin that guides you from vague ideas to shipped products by applying stage-aware thinking, remembering past decisions and killed ideas, and checking what already exists before building. It encodes one designer's concrete rules and case library rather than generic frameworks, and stays aware of problem size and launch stage to apply the right thinking at the right time.

This Agent Skill generates images locally using FLUX.2 Klein 4B via mflux on Apple Silicon, producing PNG outputs without any external API calls. It activates when users request image creation, generation, or visual content like illustrations, photos, thumbnails, or banners.

This MCP server lets Claude draw and edit plane-geometry figures live on GeoGebra® Calculator through an interactive loop of commands, error inspection, property verification, and screenshots. It supports the full GeoGebra command set including advanced prover and scripting commands, with tools for running commands, inspecting state, styling objects, taking screenshots, and managing undo/snapshots.

A standalone Agent Skill that guides design and implementation of distinctive, high-craft game UIs in Godot 4.7, combining art direction, interaction design, native implementation, and visual review without requiring external tools or dependencies. It includes 31 focused knowledge modules, reusable templates, two worked briefs, optional local validation scripts, and 12 evaluation cases to help produce original visual grammar rather than copying reference aesthetics.

Gradients Studio generates custom gradient backgrounds for website heroes, OG images, launch posts, and deck slides based on plain-language descriptions. Free previews work without authentication; exact-size exports require a free API key (5/month) or a Pro subscription for unlimited.

This Claude Code plugin generates single-file HTML pages that explain agent outputs with plain language, meaningful visuals, and accessibility features designed for readers with ADHD or limited working memory. Each page follows a consistent structure with an up-front answer, visual elements per section, and optional decision-making components, all validated by an automated checker before delivery.

This plugin enables AI coding agents to share work-in-progress code for design review and implement structured feedback from reviewers. It auto-detects deployment providers (Vercel/Netlify), collects feedback via element pins, polls, and recordings, then helps agents triage and implement changes.

interface-craft guides you through a structured design workflow by interviewing you about your project goals and constraints, then generating multiple design readings as visual probes before building, exploring variants, and gathering feedback through blind reviewer agents. It uses OpenAI image generation for design exploration and runs locally with Node.js, adding styling rules and pattern checks throughout the Claude Code session.

This plugin converts Claude Design prototypes into hosted web applications on kainoapp.com and enables iterative updates through new work packages without leaving the conversation. It manages the full lifecycle from design validation to deployment, with explicit user confirmation required before any infrastructure changes.

Builds interactive kepler.gl maps from CSV, Parquet, GeoJSON, or shapefile data, rendering them as locally-editable web pages that can optionally be uploaded to a server. Includes tools for inspecting data schemas, creating and managing maps locally, and authenticating with a server to persist map configurations and data as Parquet files.

This Claude Code plugin integrates with the Klox MCP server to enable building and editing AI videos on Klox canvases. It adds a Klox skill that allows you to create and manipulate video content directly within Claude.

This plugin provides AI skills for formatting landing page copy into LandingRabbit-ready markdown, with an MCP server that connects to the LandingRabbit API to create, edit, and manage pages directly. It supports a comprehensive set of landing page section types (hero, testimonials, pricing, FAQs, etc.) with customizable layouts and content fields.

lawha opens React frontends in a real browser at six screen widths, light/dark modes, LTR/RTL, and reduced motion, then audits layout, tap targets, accessibility (axe), animations, RTL CSS hazards, and visual design (alignment, spacing, type scale, contrast). It indexes the project's design system (Tailwind tokens, shadcn, TanStack routes) and proposes fixes, or builds pages from Figma designs and design directions, measuring pixel-perfect fidelity against the specs.

Lindo AI enables Claude to create websites, pages, and blog posts, while managing clients, credits, and custom domains through natural conversation. The plugin provides six skills for website creation, content management, and client administration, backed by the Lindo AI API.

Logospell generates cohesive sets of AI images—icons, game assets, UI elements—on solid or transparent backgrounds with precise control over style, size, and framing. The plugin connects via a hosted MCP server and includes free tools to resize, re-frame, and export sets as web, iOS, Android, and Flutter icons.

This Agent Skill converts articles into 1–5 minute landscape video essays using a fully local Remotion project with React components, local voice cloning, Pexels stock footage, kinetic typography, burned-in subtitles, and chapter transitions. Install it with `npx skills add` to turn written content into narrated explainer videos on demand.

This plugin integrates the Mailtea MCP server and three skills (email, email design, and website design) to let AI agents send emails, design newsletters, and build publication websites through natural language requests. It connects via browser sign-in to api.mailtea.app and requires a Mailtea account with a verified sending domain.

This plugin provides access to five MCP servers for open-source and cloud-based design and media tools: Penpot for design, ComfyUI for local AI image/video/audio generation, Blender for 3D, Figma for design context, and fal for paid frontier image/video models. Prerequisites include Node 20+, uv, local installations of Penpot/ComfyUI/Blender, and optional API keys for Figma and fal cloud services.

This plugin converts Markdown slides (slides.md) into polished Keynote decks by populating the theme's native title and body placeholders, so presentations automatically inherit the theme's fonts, colors, and bullet styles. It supports three workflows: writing content directly, writing notes for Claude to expand, or requesting a fully generated deck, with smart update logic to preserve manual edits in Keynote.

Media-gen orchestrates an intake-to-delivery pipeline for AI-generated media (character sheets, backgrounds, photo transformations, shorts), managing cost estimation in credits/USD/KRW with a free tier option and enforcing approval gates before Higgsfield MCP calls execute. The plugin validates genre-specific inputs, applies identity-locked prompts across review checkpoints, and maintains job records while delegating actual generation to Higgsfield MCP or user web UI.

Metamorfiles Studio is an AI agent that designs on-brand social posts, ads, and A/B test variants in every platform size, then renders them as pixel-exact images on your computer. It bundles templates, batch processing, visual control panels, and optional image generation via OpenRouter.

A Claude Code plugin that enforces frontend conventions for React/Next.js projects through three skills covering UI rules, component discipline, and PostToolUse hooks for locale parity, translation keys (next-intl), and localised metadata titles. The plugin integrates with project profiles to validate screen states, component structure, internationalisation keys, and accessibility patterns during development.

Muser is a local-first semantic image search plugin that indexes folders of images and retrieves them by natural-language description using on-device SigLIP/CLIP embeddings and LanceDB, with zero API keys required for core search functionality. It provides three interfaces—a CLI, a browser-based search UI, and an MCP server with an interactive results gallery—plus optional cloud integrations for image captioning and generation.

This plugin connects Claude to NICESHOT, a hosted service for generating product photography using your own products, models, and backgrounds. It provides four skills to set up authentication, run photoshoots with styled lookbooks, generate or edit images, and manage a library of characters and scenes.

OODS Foundry is an object-oriented design system plugin that provides an MCP server and skill enabling Claude to register custom objects, traits, and brands, then compose screens, preview them in React or Vue, generate code, and render certified charts. It works locally in Claude Code with no external service dependencies, downloading and running a ~344 MB runtime on first use.

Orvey is an image generation studio plugin that connects to your own API key and MCP server to create multiple design concepts from a single brief using GPT Image, Nano Banana, and other image models. It displays result cards and concept boards directly in chat, tracks token costs, and organizes all outputs in your personal orvey library.

This Claude Code plugin codifies a Rails app's UI into a design system documented under docs/design-system/, with per-section role tokens, component specs, page patterns, and drift auditing. It enforces the design system during Claude Code sessions via hooks, runs audit checks on view edits to catch token violations, and ships a design-reviewer agent for spec compliance.

A plan/build/review workflow for Claude Code that structures React feature development across separate sessions—/analyze writes PLAN.md and API contracts from your OpenAPI spec, /implement builds the plan in order, /review checks the diff. Includes self-loading React 19, TanStack Query, and shadcn/ui skills, plus Figma agents that extract components without payloads entering your session.

This skill converts a resume (PDF, DOCX, or plain text) into a unique, self-contained HTML portfolio website by analyzing the candidate's personality, tone, and background to choose a fitting visual aesthetic. The output is a single deployable file that works on GitHub Pages, Netlify, or Vercel with no additional setup required.

This Claude Code plugin connects to Rubiic's MCP servers to create and render videos from plain-language briefs, with support for exporting to MP4, GIF, stills, carousels, and captions. The plugin manages API authentication and teaches Claude how to orchestrate video creation through Rubiic's agent and rendering services.

Santa Claude is a festive holiday-themed plugin that adds seasonal commands, ASCII art, and animations to Claude Code, including Santa-themed code reviews and a holiday welcome screen. The plugin provides four interactive commands (`/santa`, `/naughty-or-nice`, `/snowfall`, `/christmas-countdown`) plus optional animated status line and wrapper features.

ScoreStarling transcribes audio recordings, images, PDFs, MIDI, MusicXML, and other music formats into editable, playable scores, supporting multiple input and output formats across instruments and notation systems. The plugin combines hosted MCP tools with workflow skills for audio/video transcription and sheet music conversion, plus an arrangement skill for adapting pieces to specific instruments and difficulty levels.

senzu-front is an all-in-one frontend and design plugin featuring UI/UX Pro Max (design systems, 79 styles, 192 color palettes, 22 framework stacks), GSAP ScrollTrigger, and Three.js, with Spanish language support and specialized profiles for Laravel+Inertia+Vue, Next.js, Astro, and Vue 3. It includes 15 skills covering design system management, project planning, code quality, deployment operations, marketing SEO, 3D graphics, and framework-specific tooling.

Critiques designs, writes interface copy, reviews accessibility, synthesizes research and prepares developer handoff notes by connecting to Figma, Linear, Asana, Atlassian, Notion, Slack, and Intercom. The plugin includes seven skills for design critique, accessibility audits (WCAG 2.1 AA), UX copy writing, design system documentation, user research planning and synthesis, and developer handoff specifications.

shipui is a Claude Code plugin that enforces a 10-step production workflow for building web UIs with Next.js, Tailwind v4, shadcn/ui, and Motion, auto-activating on UI requests and gating delivery through a 61-rule QA checklist. It includes two skills and a SessionStart hook that inject design discipline and opinionated stack guidance directly into Claude's reasoning.

A Windows helper program that opens a drawing pad with Ctrl+Alt+D, lets you sketch by hand or with a graphics tablet, and copies the drawing to the clipboard for pasting into Claude or other applications. On macOS and Linux, a simple offline HTML drawing board is available in the browser instead.

Softlight generates and implements design directions for product design problems by exploring alternatives and making code changes directly. The plugin wires up the app so designers can see results immediately through its 7 integrated skills and hook-based architecture.

A verification and documentation system for modular electronics designs that turns a parts list and board definition into a built and simulated design while catching mismatches between schematics, layouts, vendors, and fabrication files. It provides five deterministic checks (vendor pins, footprints, physics, BOM, design rules), reverse-engineering support for existing boards, and a parts library with full provenance tracking—refusing to guess where data is missing rather than generating potentially wrong values.

Squint is a UI/UX and branding art director for Claude Code that audits web, iOS, and Android products against monthly design trends and your personal aesthetic taste learned from Pinterest boards and screenshots. It generates before/after design mockups and detailed reports for approval before making any changes to your product.

A Claude Code plugin that enforces premium quality standards for WebGL/three.js sites built on the ether engine, providing a slop checklist, technique recipes, audit commands, and a read-only review agent that gates ships with measured evidence. It teaches Claude to defer to ether's runtime diagnostics, avoid stock patterns, cite techniques from the repo, and claim nothing unmeasured before shipping.

This standalone Agent Skill enables full component development workflows from Figma designs to tested React components, with capabilities to convert Figma designs to JSX/Astro components using Tailwind CSS and generate Vitest Browser Mode tests. It provides intelligent component classification for testing (Simple/Complex) and integrates with the Figma MCP server for design-to-code conversion.

This standalone Agent Skill enables full component development workflows from Figma designs to tested React components, with capabilities for converting Figma designs to JSX/Astro code using Tailwind CSS and generating Vitest Browser Mode tests with intelligent component classification. The skill operates as a cohesive system for design-to-implementation automation without requiring external API keys or paid services.

tabby assigns each Claude Code session an AI-generated name, a distinct color, and live status indicators (working/your turn/needs you) visible in your terminal tab bar and an optional macOS Dynamic Island overlay. It provides one-line control via the /tab command for renaming, recoloring, theming, and window tiling across multiple concurrent sessions.

TaleBuilder creates personalized children's picture books by generating stories, drawing characters, and illustrating pages based on user descriptions and grade levels. It integrates as an MCP server across multiple AI assistants (Claude, ChatGPT, Gemini, Grok) with free story previews and paid page illustration.

This MCP server enables Claude to control TouchDesigner by exposing tools for project creation, node manipulation, parameter configuration, and visual inspection via a TCP connection to the TouchDesigner application. The plugin automatically installs and manages the underlying touchdesigner-cli tool, handling communication with TouchDesigner instances over a local network interface.

ui-consistency is an AI-aware design system that analyzes your existing codebase to extract design patterns, then guides Claude to write new pages consistently with your project's established conventions without requiring any configuration or additional tools. It works through four phases—finding patterns, planning, implementing, and verifying—allowing the coding agent to match your UI conventions by reading how pages are already built rather than relying on external design tokens or catalogues.

A Claude Code plugin that integrates the @annondeveloper/ui-kit component library, giving Claude awareness of 147 zero-dependency React components with Aurora Fluid design patterns, physics animations, and OKLCH color system. It provides skills for component discovery, generation, design-system guidance, accessibility auditing, and layout architecture through an auto-connected MCP server.

UXMachine opens your site in a real browser at multiple viewports and returns verifiable observations about visual state, measurements, and how to verify changes. The plugin provides an MCP connector and a Claude Code skill that prompts your agent to measure pages before completing tasks.

UX Superpowers is a Claude Code plugin that conducts user-centered design discovery before development, capturing personas, jobs-to-be-done, user journeys, and telemetry planning through 8 specialized skills. It integrates with Superpowers to ground technical decisions in real user data and structured research artifacts.

This MCP server generates AI images without requiring an API key or account by connecting to Veida's anonymous tier, offering tools to discover available models, list free-tier limits, and access image editing capabilities. The plugin includes image generation (40–120 seconds), model listing, tool browsing for editors and upscalers, and free-tier information, with a daily limit of approximately 7 images per IP address and 1K watermarked output.

This Claude Code plugin compiles text, documents, URLs, and video clips into reproducible short videos with platform-specific packages (TikTok, Reels, YouTube Shorts, LinkedIn, Facebook), complete with captions, thumbnails, and source citations. It uses local-first processing with optional paid voice and video generation APIs, requiring no core LLM keys while supporting Claude-written motion design and intelligent beat-snapped editing.

The VideoZero plugin connects Claude Code to the VideoZero engine for video generation, revision, and engagement tracking through likes. It provides MCP server integration to enable video creation and editing workflows directly within Claude.

This skill provides coherent web art direction and implementation guidance with 12 distinct visual styles and 18 techniques, routing tasks through brief analysis, style selection, and verification without enforcing any specific framework or library. It covers marketing pages, commerce, portfolios, applications, and data visualization while maintaining semantic integrity and accessibility.

The Webly plugin enables building, previewing, and publishing typed React websites with integrated quality gates and human approval workflows. It connects Claude to Webly's platform via an MCP server, handling session initialization and shell execution for development tasks.

This skill enhances Claude's frontend design capabilities to create production-grade UI/UX with distinctive aesthetics, bold typography, color palettes, and high-impact animations that avoid generic AI-generated interfaces. Claude automatically applies it for frontend work, enabling context-aware implementation of dashboards, landing pages, and other design components with meticulous visual detail.

UI UX Pro Max is a searchable local database of 79 UI styles, 192 color palettes, 74 font pairings, 25 chart patterns, and 22 implementation stacks (covering React, Vue, Svelte, Flutter, Tailwind, and more) designed to assist with page layouts, components, color schemes, typography, and accessibility. The plugin includes an AI-powered Design System Generator that analyzes project requirements and generates complete, tailored design systems with recommended patterns and styling guidance.

Taste Skill is a collection of 13 portable Agent Skills that enhance AI-generated frontend interfaces with refined design principles like brutalist, minimalist, and soft aesthetics, covering layout, typography, motion, and spacing. It also includes image-generation skills for creating reference boards that can be paired with AI image generators and handed to code assistants for implementation.

The ruflo-music plugin wraps the Cognitum Music MCP server to compose lyrics, generate tracks, separate stems, extract MIDI, and master audio through a remote GPU inference service authenticated with a personal access token. It exposes 2 agents and 7 skills for the full music production pipeline, with production metadata cached in AgentDB for fast recall.

Impeccable provides design fluency for AI-assisted frontend development through 23 specialized commands and 59 deterministic anti-pattern detection rules. It guides code agents on layout, typography, color, animation, accessibility, and UI polish while enforcing a design system context initialized once per project.

HyperFrames is an open-source framework that converts HTML, CSS, media, and seekable animations into deterministic MP4 videos, available via CLI, AI coding agent skills, or hosted authoring workflows. The plugin provides 21 skills for agents to plan, write, animate, and render videos with support for compositions, GSAP animations, captions, voiceovers, audio-reactive visuals, and website capture.

The AAS Accessibility & Inclusive UX bundle packages 8 skills for Claude Code that help developers build more accessible and inclusive user experiences. The plugin provides guidance and tools for implementing best practices in accessibility standards and inclusive design.

This Claude Code plugin bundles 10 agent skills for building mobile applications, providing a collection of tools to streamline app development workflows. It requires no external API keys or services, making it a self-contained solution for mobile app builders.

This Claude Code plugin bundles 10 skills for product design workflows, enabling designers to streamline design processes and decision-making within their development environment. The bundle operates entirely within Claude Code with no external API dependencies or tool requirements.

This plugin bundles six design skills for Apple platform development, providing editorial guidance and best practices for creating native iOS, macOS, tvOS, and watchOS applications. It requires no external API keys or third-party services, making it immediately usable within Claude Code.

This bundle delivers 5 pre-built skills for architecture and design workflows within Claude Code, curated from the Agentic Awesome Skills collection. No external API keys or third-party services are required.

Creates editorial-quality diagrams including architecture, flowcharts, sequences, state machines, ER models, timelines, swimlanes, quadrants, radars, loops, trees, org charts, Venn diagrams, pyramids, Gantt charts, and Wardley maps, outputting self-contained HTML+SVG files with minimal styling and optional motion. The plugin converts existing draw.io, Mermaid, or Excalidraw diagrams to chosen formats and detail levels while maintaining semantic pattern separation from layout.

A Claude Code skill that guides developers through structured brand discovery interviews and iteratively generates landing page designs via Stitch, translating brand preferences into deployment-ready HTML. It handles design decisions across color palette, typography, and layout while capturing user feedback to refine the output through multiple variants.

This plugin automates C4 architecture documentation by analyzing code from the bottom up to identify components, map containers, and generate context diagrams. It orchestrates multiple agents to synthesize architectural insights and produce comprehensive architecture diagrams and documentation.

This plugin provides cloud architecture design and infrastructure management across AWS, Azure, GCP, and OCI, with specialized support for Kubernetes configuration and Terraform infrastructure-as-code. It includes multi-cloud cost optimization and hybrid cloud networking capabilities through 7 agents and 8 skills.

This plugin provides frontend UI development and mobile application implementation capabilities across platforms through 2 agents and 4 reusable skills. It supports cross-platform mobile development workflows without requiring external tools or API keys.

This plugin provides security best practices for frontend and mobile development, covering XSS prevention, CSRF protection, content security policies, and secure storage patterns. It includes one command and three agents to help developers implement these security measures in their applications.

A Claude Code plugin that enables JavaScript and TypeScript development with ES6+, Node.js, React, and modern web frameworks through 1 command, 2 agents, and 4 skills. It provides built-in support for contemporary JavaScript tooling without requiring external API keys or services.

This plugin orchestrates AI image generation workflows with parallel multi-direction output, prompt engineering, and access to a 1,300+ curated inspiration library through the MeiGen MCP server. It supports multiple providers (MeiGen Cloud, local ComfyUI, and OpenAI-compatible APIs) with free features including gallery search and prompt enhancement available immediately.

This Claude Code plugin coordinates cross-platform application development across web, iOS, Android, and desktop using 1 command and 6 specialized agents. It provides guidance and orchestration for building consistent implementations across multiple platforms without requiring external dependencies or API keys.

This plugin creates editable, production-ready PowerPoint decks from a specification and source materials using a coordinate-explicit workflow with quality gates. It provides native shape, text, table, and image support while performing read-only analysis of reference decks and OOXML integrity validation.

A comprehensive UI/UX design plugin providing guidance on mobile and web application design, including design systems, accessibility compliance (WCAG 2.2), and modern interaction patterns across iOS, Android, React Native, and web frameworks. It offers design reviews, component creation, accessibility audits, and design system setup through multiple agents and skills.

This plugin enables Claude to generate production-grade frontend interfaces with distinctive aesthetics, bold typography, custom color palettes, and high-impact animations instead of generic AI-generated designs. Claude automatically applies this skill when working on UI/UX tasks, choosing a clear aesthetic direction and implementing meticulous production code.

Playground plugin creates self-contained interactive HTML files with visual controls, live preview, and copy-able prompt output for topics with large or complex input spaces. It includes templates for design decisions, data exploration, concept mapping, and document review workflows.

A curated library of 500+ reverse-engineered prompts and 20+ industrial templates for GPT-Image 2 image generation, organized by use case and style with a searchable web gallery. The plugin includes two agents that help users explore, refine, and apply these prompts to create images using the GPT-Image 2.5 Sunburst and Flare models.

frontend-slides is a zero-dependency HTML presentation generator that creates professional slideshows with bold template-library styles and built-in PowerPoint conversion. It emphasizes clean, anti-AI-slop design principles and requires no external services or API keys.

This plugin guides developers through Apple's Human Interface Guidelines with specialized knowledge of 2026 Liquid Glass aesthetics, offering design validation and auditing for iOS, macOS, and visionOS applications. It includes a hig_checker Python tool that validates tap targets, contrast ratios, and accessibility compliance across Apple platforms.

This Claude Code plugin generates premium single-file HTML landing pages with GSAP 3D animations, scroll-triggered reveals, and mouse-parallax effects, using a structured intake flow to lock down product positioning, audience, branding, and tone before output. It outputs a fully self-contained .html file with inline CSS/JS and only CDN externals (Google Fonts and GSAP), distinct from the conversion-optimized Next.js landing-page-generator.

Converts long markdown files into single-file, self-contained interactive HTML with five specialized converters: long-form documents with sticky TOC and search, code reviews with 2-column diffs and annotations, and slide decks with presenter mode and keyboard navigation. A one-time design-system onboarding captures your brand palette and typography, ensuring consistent rendering across all conversions with WCAG-AA contrast enforcement.

This plugin bundles 13 production-ready product skills—including RICE prioritization, OKR cascading, persona generation, competitive teardown, landing page scaffolding, and SaaS boilerplate—each implemented as Python automation tools with zero dependencies. It equips product managers, strategists, UX researchers, and team leads with deterministic workflows orchestrated across four specialized agents and accessible via slash commands.

This agent skill converts complex terminal output like system architectures, diffs, and comparisons into styled, interactive HTML pages with dark/light themes and Mermaid diagrams instead of ASCII art. It provides commands for generating visual explanations, plans, and slides that open directly in your browser without requiring any build dependencies.

An agent skill that generates immersive scroll-scrubbed "fly through the world" landing pages with AI-rendered isometric scenes and seamless camera flights. The skill interviews the user for content and branding, generates cohesive scene stills and continuous camera clips via GPT Image 2 and Seedance, then wires a portable vanilla-JS scrub engine that works with any web framework.

A collection of 11 agent skills that help build great product interfaces by addressing typography, colors, layout, accessibility, UI polish, and product writing. Skills include reviews of existing interfaces, component variant generation, UI stress testing, and targeted improvements across design and accessibility domains.

The show-me plugin generates visual explanations of topics through concise diagrams, code-shape sketches, and focused HTML artifacts. It provides a single skill that helps clarify concepts by rendering them in diagram and code visualization formats.

AI media generation skill for QuickDesign CLI that generates images (Nano Banana, GPT Image) and videos (Sora 2, Kling, Seedance 2.0 R2V) with multi-segment voice continuity and reference composition support. Includes Smart Ad Creator for parallel concept generation, Spy Brands competitor library queries, and Brand DNA extraction from websites.

designlang extracts complete design systems from live websites—DTCG tokens, Tailwind/shadcn configs, Figma variables, motion tokens, and layout patterns—then grades consistency, generates brand-guidelines books, and measures visual fidelity against clones. Fourteen slash commands enable whole-site analysis, design-space positioning, head-to-head battles, theme recoloring, and shareable graded report cards with pixel-perfect diff scoring.

A portable Agent Skill providing expert guidance on SwiftUI state management, view composition, performance optimization, and modern SDK APIs including Liquid Glass adoption. The skill loads reference material on-demand to assist code review and SwiftUI development workflows without inflating context size.

nateherk-design provides a skill for building scroll-driven interactive landing pages with comprehensive design control over typography, spacing, colour, depth, motion, and accessibility. The skill enables premium scroll-craft implementation without relying on animation libraries, using a full design floor approach.

terminal-browser is a Claude Code plugin that embeds a fully functional web browser directly into the Claude Code interface using the kitty graphics protocol, allowing users to preview websites and HTML documents. The plugin exposes an API for other Claude Code plugins to programmatically open URLs in the embedded browser, enabling custom integrations like slash commands for opening pull requests or design tools.

Anima-pack is a Claude Code plugin with 18 skills for automated design-to-code workflows, converting Figma designs and websites into React or HTML output using the Anima SDK 0.27.0. It includes standard workflows for generation and testing, plus pro skills for CI/CD integration, deployment, webhooks, and performance tuning with built-in security and review gates.

Axiom is a collection of 13 production-ready TDD-tested Claude Code skills for iOS and Apple platform development, covering SwiftUI performance, debugging, UI testing, Liquid Glass design, and advanced topics like concurrency and data persistence. Skills are automatically suggested in Claude Code or can be invoked directly to assist with modern iOS 26+ development workflows.

The B12 Website Generator plugin automatically creates a professional website by collecting a business name and description from the user, then generating a pre-populated B12 signup link that drafts a production-ready site. Claude handles the entire process without requiring external API keys or tools.

CLI UX Tester provides expert UX evaluation for command-line interfaces and developer APIs using an 11-criteria scoring framework and parallel evaluation agents. It executes real commands, captures output, generates comprehensive reports with remediation plans, and tracks patterns across projects using persistent memory.

Generates production-grade engineering design diagrams as self-contained dark-themed HTML with inline SVG, grounded in real repository topology by reading package manifests, docker-compose, Kubernetes, Terraform, and import graphs. Supports four modes: generate diagrams from live repos, diff structural changes in PRs, convert stack traces to sequence diagrams, and detect architecture drift against stored fingerprints.

A 30-skill Claude Code plugin pack that provides production-grade wrappers around the Figma REST and Plugin APIs, enabling design-to-code pipelines, design token extraction, asset export, webhooks, and enterprise features. Skills range from authentication setup and core workflows to advanced patterns like multi-environment configuration, observability, load testing, and architectural decision guidance.

framecraft generates polished 1920x1080 demo videos from a text prompt by orchestrating Playwright for browser automation, FFmpeg for video compositing, and Edge TTS for neural voice synthesis. The skill auto-activates when users request demo videos, product walkthroughs, or feature showcases, handling voiceovers, transitions, and CSS animations end-to-end.

Claude Code skill pack providing 18 integrated skills for Framer Plugin SDK, Server API, Code Components, and Code Overrides development. Covers setup, local development, core workflows, debugging, production deployment, and CI/CD integration with real framer-plugin and framer-api code examples.

This skill generates ADHD-friendly visual organizational tools using Mermaid diagrams, automatically detecting whether to use neurodivergent or neurotypical cognitive modes based on user language patterns. It includes accessibility modes for colorblind and monochrome viewing, with templates for task breakdown, decision trees, project planning, and energy management.

The anti-ui-slop Skill helps AI coding agents build product-specific UI by reading design systems, user context, and required states before making changes, then validating the rendered result. Optional full UIZZE adds live search across 800,000+ real web and iOS screens for visual reference and implementation validation.

designer-toolkit provides 7 skills and 4 commands to help designers document and communicate their work through case studies, presentations, design rationale, and adoption strategies. It includes utilities for UX writing, design negotiation, token audits, and design system enablement—all without requiring external API keys or tools.

This design operations plugin provides frameworks and workflows for design teams, including critique sessions, handoff specifications, sprint planning, review processes, and team collaboration rituals. It offers nine skills and three commands to streamline design workflows from specification through implementation review.

This plugin provides 14 user research skills for designers, including personas, empathy maps, journey maps, interview scripts, usability testing, and card sorting analysis. It bundles research synthesis tools into 4 commands that help designers conduct full research cycles from discovery through analysis.

This plugin provides 11 skills and 3 commands to help build, document, and maintain scalable design systems across tokens, components, accessibility, and theming. It requires no external APIs or tools and works standalone to establish design governance, define tokens and naming conventions, and audit existing systems for consistency.

This plugin provides 22 interaction design skills covering animation principles, state machines, gesture patterns, error handling, and feedback mechanisms to craft meaningful user experiences. It includes 5 commands for designing forms, interactions, onboarding flows, error recovery, and component state models.

This plugin guides designers through design validation by providing skills and commands for prototyping strategies, usability testing, heuristic evaluation, and A/B experiments. It covers the full range of testing approaches from parallel concept exploration and click tests to accessibility testing and quantitative A/B experiments.

The ui-design plugin provides 19 design skills and 5 commands for crafting polished interfaces, including layout grids, color systems, typography scales, responsive patterns, and visual hierarchy informed by design psychology principles. It covers end-to-end design workflows from color palette generation to platform-specific audits, with no external dependencies or paid services required.

ux-strategy provides 12 skills and 3 commands for shaping product direction through competitive analysis, design principles, experience mapping, and strategic alignment. It helps teams define vision, resolve design trade-offs, prioritize opportunities, and build stakeholder alignment without requiring external API keys or services.

Visual critique skills for designers that analyse screens across seven dimensions — hierarchy, brand consistency, composition, typography, colour, affordance, and information density — then compile a prioritised fix list. Includes two commands for running full critiques or focused UX-only reviews, plus individual skills for targeted feedback on specific design dimensions.

Modern Web Guidance is a set of 2 expert-curated skills that embed web platform best practices, modern browser APIs, and compatibility data into coding agents to steer them toward contemporary solutions over legacy patterns. The plugin covers 212 modern web features across CSS layout, performance, accessibility, forms, UX animations, and built-in AI, delivered as token-efficient guidelines optimized for LLM context windows.

This plugin provides a comprehensive skill for building complex HTML artifacts with React, Tailwind CSS, and shadcn/ui components, supporting state management and routing. It enables developers to create elaborate multi-component interactive interfaces directly within Claude.

This plugin creates museum-quality visual art directly in PNG and PDF documents by applying design philosophy principles. Use it to generate posters, art pieces, and static visual works without requiring external tools or API keys.

This plugin provides a single skill for generating distinctive, production-grade frontend interfaces with high design quality and polished code. It helps avoid generic AI aesthetics by focusing on creative design patterns and best practices.

This agent specializes in building and optimizing user interfaces using React, Vue, and Angular, handling tasks like component implementation, state management, and responsive design. It excels at creating performant, accessible web applications and fixing UI/UX issues across all device sizes.

This plugin provides a frontend development skill for React, Next.js, TypeScript, and Tailwind CSS projects, offering component scaffolding, bundle analysis, and performance optimization tools. It includes accessibility best practices guidance to help developers build production-ready, performant web applications.

Theme Factory provides a single skill that applies professional, pre-configured styling to artifacts like slides, documents, reports, and HTML landing pages. It includes 10 preset themes with coordinated colors and fonts, eliminating the need for manual design work.

This Claude Code plugin generates or edits images by delegating to the Google Gemini API through the nanobanana service. It integrates Gemini's image capabilities directly into Claude's workflow.

This plugin provides 11 integrated skills for product strategy, UX audits, design systems, and visual direction work. It guides users through interface design decisions, brand expression, and usability improvements without requiring external tools or APIs.

This plugin bundles three skills for creating distinctive user interface designs and writing effective interface copy. It helps developers craft cohesive, user-friendly frontends with clear communication and visual design.

A collection of 5 skills providing React, Next.js, and React Native best practices guidance plus web design guidelines for developers. No external dependencies or API keys required.

Ultralytics brand guidelines plugin provides a skill that enforces brand consistency across presentations, documents, marketing emails, social posts, and web designs. It includes colors, the Archivo font, naming conventions, and tone standards for maintaining a cohesive brand identity.

This Claude Code plugin integrates the Salesforce Open Code storefront library into B2B Commerce sites, enabling developers to map and replace out-of-the-box commerce definitions within Experience Builder metadata. It provides skills for library integration, definition mapping lookups, and swapping storefront components in site configurations.

The experience-cms plugin provides 5 skills to author and manage Salesforce Experience Cloud content, including CMS branding, content generation, and media search across Salesforce CMS and Data 360. It enables developers to render accessible CMS-managed media assets (images, video, audio, documents) in React experiences and source ethically licensed stock imagery through Salesforce media-management tooling.

This plugin scaffolds, generates, and deploys React (and Angular) UI Bundle applications for Salesforce Digital Experience Sites, with built-in support for component creation, styling via shadcn/ui and Tailwind CSS, and metadata configuration. Use it to create new React UI bundle starter projects, edit pages and components, manage layouts and branding, and deploy to Salesforce orgs.

This plugin generates custom Lightning Types and widget components for Salesforce Lightning UI, including Apex-backed widget coordination and rich display widgets for Agentforce/MCP agent actions. It provides 4 skills to build and configure Lightning Type definitions and their associated UI components.

This React Native library provides lightweight declarative animations using native platform APIs (Core Animation on iOS, Animator on Android) with zero JavaScript overhead. It includes a migration Agent Skill that scans and automatically converts existing react-native-reanimated or React Native Animated code to use react-native-ease.

Brand Guardian is an agent that helps establish brand guidelines, maintain visual consistency across touchpoints, and evolve brand identity. It enables rapid development of cohesive brand experiences by managing brand assets and ensuring design uniformity.

The code-architect agent helps design scalable architecture and folder structures for new features or projects, including microservice boundaries and component hierarchies. It assists with initial planning of authentication systems, feature organization, project structure conventions, and code refactoring.

This plugin provides an expert Flutter development agent for analyzing code, creating widgets, debugging issues, and optimizing mobile app architecture. It handles navigation problems, widget design, performance tuning, and other Flutter-specific development challenges.

This agent specializes in building user interfaces and implementing React/Vue/Angular components with expertise in state management and responsive design. It handles frontend development tasks from UI component creation to performance optimization and accessibility improvements.

This plugin provides comprehensive animation and component libraries including React Spring, Magic UI, React Bits, AOS, Anime.js, and Lottie, offering developers 10 commands and 6 agents for implementing animations and interactive components in React applications.

This plugin provides a professional 3D authoring and motion graphics pipeline integrating Blender, Spline, Rive, and Substance 3D through 10 commands and 5 agents. It enables streamlined workflows for 3D modeling, animation, interactive design, and material creation without requiring external API keys or services.

This plugin integrates a complete 3D and animation stack combining Three.js, GSAP, React Three Fiber, Framer Motion, and Babylon.js through 9 commands and 6 specialized agents. It provides tools for building complex 3D visualizations, animations, and interactive web experiences without requiring external API keys or services.

This plugin provides extended 3D graphics and smooth scrolling effects using A-Frame, PlayCanvas, PixiJS, Locomotive Scroll, and Barba.js, integrating lightweight animation libraries for interactive web experiences. It includes 12 commands, 7 agents, and 6 skills to help developers implement 3D scenes, scroll-triggered animations, and page transitions.

This plugin provides integration patterns and modern web design guidelines for developers building cohesive 3D and animation experiences. It includes 4 commands, 3 agents, and 2 skills to support frontend design workflows without external dependencies.

claude-persona enables building AI-powered persona panels to simulate and pressure-test product concepts through agent-separated simulation with theme synthesis and cross-tabs analysis. It generates verbatim research insights inspired by TinyTroupe, helping teams validate concepts before conducting field research.

This plugin generates accurate UI designs directly from live source code and data models, reading actual JSX and queries to create faithful HTML mockups rather than guessing at component structure. Once verified, it produces a locked design document ready for implementation handoff.

This agent helps developers build native iOS and Android applications, implement React Native features, and optimize mobile performance for smooth, native-feeling user experiences. It provides guidance on platform-specific integration including push notifications, biometric authentication, and cross-platform code reuse patterns.

This Claude Code plugin provides mobile-first UX optimization for UI components and interfaces, helping developers adapt desktop designs for mobile usability and analyze existing design themes. It enables teams to ensure their components follow mobile-first principles and maintain consistency with established design systems.

This Claude Code plugin generates creative non-Olympian Greek god names with rich backstories and mythological authenticity for storytelling projects. It uses an agent to provide modern accessibility and lore-building support for narrative development.

This Claude Code plugin provides expert assistance for React Native development, including code analysis, component creation, debugging, performance optimization, and architectural decisions. It uses an AI agent to guide developers through navigation setup, component design, and codebase-specific patterns.

This Claude Code plugin provides a dedicated agent for creating user interfaces, designing components, and building design systems with a focus on beautiful, functional aesthetics. The agent is optimized for rapid implementation within 6-day sprints.

The ux-researcher agent helps conduct user research, analyze user behavior, and create journey maps to understand user needs, pain points, and design decisions. It specializes in validating design choices through testing within rapid development cycles to inform product decisions.

A Claude Code agent that provides expert guidance on vision models, OCR systems, barcode detection, and visual AI tasks using the latest models and techniques. It proactively assists with image processing, document analysis, and visual AI workflows without requiring external API keys or tools.

The visual-storyteller agent transforms data and concepts into compelling visual narratives for presentations, infographics, and complex idea communication. It specializes in creating engaging visual stories that help users and stakeholders understand information through imagery.

This Claude Code plugin provides expert assistance for web development tasks including React and Next.js component creation, code analysis, debugging, and performance optimization using TypeScript and Tailwind CSS. It helps developers with routing issues, component design, architectural decisions, and other modern web framework challenges.

The whimsy-injector agent proactively enhances UI/UX implementations by adding playful, delightful elements to user experiences, including animations, microinteractions, and personality to error states, loading screens, and new features. It is designed to be triggered automatically after design updates or feature implementations to inject joy, surprise, and memorable moments that improve user satisfaction.

lemo-opuscar is a Claude Code plugin that enables your agent to create films using code-rendered visual styles from an integrated library, handling directing, animation, scoring, and audio mixing autonomously. The plugin provides a single skill that orchestrates the entire filmmaking workflow through procedurally generated visuals and sound.

This Claude Code plugin provides four markdown-to-HTML publishing skills for converting and managing markdown documents: document rendering, slide deck generation, pre-publication review validation, and a shared design-token system for consistent styling. All functionality operates locally without external dependencies or API keys.

This plugin provides 5 expert-level product skills covering product management, agile delivery, strategy, UX research, and UI design systems. It includes 15+ Python automation tools and ready-to-use templates for PRDs, user stories, OKRs, personas, and design tokens.

This plugin provides 14 comprehensive skills for building cross-platform UI applications with Makepad 2.0, covering design patterns, app structure, layout, widgets, events, animation, shaders, theming, and performance optimization. Skills include entry-point design judgment anchors and detailed guides for DSL syntax, GPU rendering, vector graphics, and migration from Makepad 1.x.

Superdesign is an AI product design agent skill that gives coding agents design judgment to create high-quality UI, presentations, and graphics on an infinite canvas without leaving the terminal. It reads project context, gathers style references, and produces branchable design drafts that you can refine across sessions.

McKinsey-style PPTX generator that automatically creates production-ready presentation decks from natural language requests, selecting from 40 professional templates and building real .pptx files with a built-in subagent that explains template choices. Accepts data from Excel, Word, PDF, and other sources in the working directory, generating charts, matrices, roadmaps, and multi-slide decks in Korean or English within seconds.

This Claude Code plugin provides two skills for analyzing and designing modular software architectures using the Balanced Coupling model: `/modularity:review` analyzes existing codebases for coupling imbalances and recommends improvements, while `/modularity:design` creates modular architectures from functional requirements with integration contracts and test specifications. Both skills ground recommendations in concrete coupling dimensions (integration strength, distance, volatility) rather than heuristics.

Six skills orchestrate Chinese-language video recaps by extracting visual content via Xiaomi MiMo's ASR and VLM, composing narrative with story plans and shot-level sound assignments, then rendering final video with narration, subtitles, and mixing—all with local ffmpeg and optional Fish Audio TTS. The plugin outputs editable timelines, QC reports, and CapCut-compatible drafts while requiring only a MiMo API key and ffmpeg installation.

Genjutsu is a Claude Code plugin offering 20 creative coding skills for building animated and visually polished interfaces across Web (React, Vue, Svelte, Astro, vanilla CSS, Three.js, Canvas), Android (Jetpack Compose), and Apple (SwiftUI) platforms. It provides three scaled tools—cast for single-interface interactions, paint for complete product designs, and bunshin for multi-agent whole-site redesigns—without requiring external API keys or third-party services.

This plugin provides a collaborative design dialogue skill that guides users through structured brainstorming from initial ideas to design approaches and planning. It leverages a single skill to facilitate ideation and design thinking workflows.

This Claude Code Skill generates cinematic video prompts for AI video generators (Sora, Kling, Veo, Seedance, 可灵, 即梦) using a 5-stage methodology and 21 genre templates. It transforms creative ideas into model-ready video prompts with specific camera, lens, and aesthetic specifications rather than generic praise keywords.

The xilinx-suite plugin provides comprehensive assistance for Xilinx's full embedded design toolchain, including Vivado, Vitis HLS, Vitis Unified IDE, and PetaLinux workflows from high-level synthesis through boot image generation. It functions as a single integrated skill to guide users through FPGA and embedded system development pipelines.

Epic Infographics teaches AI agents to design publication-quality infographics by composing HTML/CSS+SVG scenes in one of ten design languages (blueprint, dark-glass, naturalist-plate, isometric-world, retro-print, editorial, hand-drawn, swiss, corporate-clean, neo-brutalist), rendering to PNG across six canvas presets from social square to A4 print. The skill enforces scene-first design with computed chart geometry, colorblind-validated palettes, and a mandatory render-review-fix loop where the agent inspects its own output before delivery.

This Claude Code plugin scaffolds and deploys a professional portfolio website tailored for GRC engineers, capturing certifications, compliance frameworks, audit experience, and projects through an interactive questionnaire. It handles the complete deployment pipeline to AWS—including S3 static hosting, CloudFront CDN, Route 53 DNS, Lambda contact forms, and GitHub Actions CI/CD integration.

Tastemaker equips AI coding agents with a real design system, generating on-brand palettes with verified contrast compliance, sourced assets, and structural variety to avoid generic AI-generated UI. All design memory persists locally in your project and personal profile files, with no external APIs or hosted backend required.

This plugin renders Mermaid diagrams to SVG and PNG formats using the Beautiful Mermaid library when users request diagram visualization. It operates as a standalone skill with no external API dependencies or paid services.

Generate images from text prompts or edit existing images using OpenAI's GPT Image 1.5 model, supporting both text-to-image generation and image editing with optional masking. The plugin handles image modification requests directly without requiring the user to read or pre-process image files.

This skill generates and edits images using Google's Nano Banana 2 (Gemini 3.1 Flash Image Preview) API, optimized for fast iteration with explicit control over aspect ratios and resolution from 512px to 4K. It integrates with Claude Code as a single skill for image creation and modification tasks.

Generates and edits images using Google's Nano Banana Pro (Gemini 3 Pro Image) API, supporting both text-to-image creation and image-to-image editing with configurable resolution options (1K default, 2K, or 4K). The plugin automatically detects requests to create, modify, or alter images and applies changes directly without requiring the original image to be read first.

Generates beautiful code snippet images using ray.so, converting raw code into visually polished images suitable for sharing and documentation. The skill saves images locally to the current working directory or a user-specified path.

tldiagram is a software architecture diagramming tool with a standalone binary, web UI, and agent skill for automatically analyzing and visualizing codebases. It supports C4 model-inspired diagrams, markdown integration, codebase analysis via tree-sitter, and features like git diff visualization and bi-directional sync with YAML files.

BrandDocs is an agent-skill bundle that extracts a company's existing Word, PowerPoint, or Excel templates into a reusable Brand Profile, then generates unlimited on-brand DOCX, PPTX, and XLSX documents while preserving brand, structure, styles, and formulas by construction. It works offline, supports multi-template blending, and includes deterministic verification to ensure off-brand output is impossible.

A Claude Code plugin that organizes design thinking by syncing three markdown layers (sources, ideas, and output) on a visual canvas where the human makes decisions and Claude handles execution tasks. It enables designers to transform scattered research and preliminary concepts into a defensible design document through collaborative human-agent iteration.

Aceternity UI is a skill that provides 100+ production-ready animated React components for Next.js applications, installed via shadcn CLI with full Tailwind CSS and Framer Motion support. It helps developers quickly build modern landing pages, portfolios, and SaaS interfaces with features like animated backgrounds, 3D cards, parallax scrolling, text effects, and interactive UI elements.

AutoAnimate (@formkit/auto-animate) is a zero-config, 3.28 KB animation library that automatically smooths DOM transitions for added, removed, or reordered elements in React components. The skill provides 7 production templates, SSR-safe patterns, and solutions for 10+ common issues like Next.js import errors and flexbox conflicts.

Base UI React provides 27+ unstyled, accessible React components with a render props API and Floating UI integration for smart positioning. It's designed for full styling control, Radix UI migration, and edge-ready deployments with 10+ documented beta workarounds.

Conducts systematic 7-phase frontend design reviews covering interaction flows, responsiveness, visual polish, accessibility (WCAG 2.1 AA), robustness, code health, and console errors using browser automation. Automatically triggers on PR design checks, UI audits, accessibility concerns, responsive issues, and contrast problems to provide evidence-based feedback prioritized by impact.

This Claude Code skill helps establish and document comprehensive design systems with typography, colors, and component libraries for consistent UI development across teams. It provides structured standards and templates to ensure design consistency without requiring external integrations.

This skill guides the creation of distinctive, production-grade frontend interfaces that avoid generic AI aesthetics by providing frameworks for bold design decisions, typography, color strategy, motion, and spatial composition. It works with any frontend framework to produce polished, intentional web components, pages, and applications with high visual impact.

This plugin optimizes images for web performance by applying modern formats, responsive techniques, and lazy loading strategies. It helps improve page load times and prepare optimized assets for production deployment.

This skill enables Claude Code to implement Inspira UI's 120+ animated Vue/Nuxt components powered by TailwindCSS v4, motion-v, GSAP, and Three.js through a copy-paste model with built-in setup, troubleshooting, and pattern guidance. It prevents 13+ common mistakes like CSS variable misconfigurations, missing motion-v setup, and WebGL resource leaks.

The interaction-design plugin provides design guidance for creating intuitive user experiences through feedback patterns, microinteractions, and accessible interaction design principles. It helps developers implement loading states, error handling UX, animation guidelines, and touch interactions through a single integrated skill.

This plugin assists in designing effective KPI dashboards by providing guidance on metric selection, visual hierarchy, and data visualization best practices. It helps teams build executive dashboards and analytics views that clearly present business metrics.

Maz-UI is a production-ready Vue 3 and Nuxt 3 component library providing 50+ standalone components, 14+ composables, directives, theming, i18n support, and an 840+ icon library—all with TypeScript-first design and SSR capability. The Claude Code plugin includes autonomous agents for component scaffolding, form generation, and theme customization, plus code snippets and production-ready templates for both Vue and Nuxt frameworks.

This skill provides comprehensive guidance on designing microservices architectures, including service decomposition, inter-service communication patterns, data management strategies, and resilience techniques for distributed systems. It covers synchronous communication (REST, gRPC, GraphQL), asynchronous messaging (Kafka, RabbitMQ, SQS), saga patterns for transactions, and patterns like Circuit Breaker, bulkhead isolation, and service discovery.

This plugin provides design guidance for building responsive interfaces using mobile-first principles, with progressive enhancement strategies for larger screens. It helps developers create adaptive layouts that prioritize mobile user experience while maintaining functionality across all device sizes.

Motion (Framer Motion) is a production-ready React animation library providing declarative animations, gesture controls, scroll effects, spring physics, layout animations, and SVG manipulation for complex interactive experiences. This skill prevents 29+ common issues including AnimatePresence failures, performance problems, and framework compatibility errors across React, Next.js, and Vite.

This Claude Code plugin builds Progressive Web Apps with service workers, web manifests, offline support, and installation prompts. It enables developers to create installable web experiences, implement offline functionality, and add push notifications to web applications.

This skill provides 7 production-tested React composition patterns from Vercel Engineering covering component architecture, state management, and implementation strategies. It guides developers on building scalable components through composition, avoiding boolean prop proliferation, and implementing compound components with context patterns.

This Claude Code plugin provides a skill for building responsive web interfaces using Flexbox, CSS Grid, and media queries with a mobile-first approach. Use it to create multi-device layouts, implement flexible UI systems, or ensure cross-browser compatibility without external dependencies.

This skill guides developers through RESTful API design by enforcing proper resource naming conventions, HTTP method semantics, status code usage, and response formatting standards. It helps establish consistent API conventions for building scalable, developer-friendly interfaces.

shadcn-vue provides a Vue/Nuxt adapter for shadcn-ui with Reka UI components, Tailwind CSS styling, and 50+ accessible, customizable UI elements including Auto Form (Zod schemas), Data Tables (TanStack), Charts (Unovis), and dark mode support. This skill guides setup, configuration, component usage, TypeScript path aliases, accessibility features, and troubleshoots common issues like missing imports, styling problems, and CSS variable errors.

This skill automates setup of production-ready Vite + React projects with Tailwind CSS v4 and shadcn/ui, including dark mode with ThemeProvider and CSS variable architecture. It prevents common v4 migration pitfalls like tw-animate-css errors, duplicate @layer blocks, and color theme failures through tested templates and step-by-step guidance.

This TanStack Router skill provides type-safe, file-based routing for React applications with compile-time route validation and built-in route loader support for data fetching. It includes templates, setup guides, and troubleshooting for common devtools, Vite bundling, and Cloudflare Workers deployment scenarios.

This plugin generates comprehensive technical specifications for software projects, including requirements analysis, system architecture, API design, and testing strategies. It helps teams document system designs and create architecture decision records during the planning phase.

This skill integrates TheSys C1 Generative UI API to convert LLM responses into streaming, interactive React components like forms, charts, and tables instead of plain text. It provides pre-built components, tool calling support, and production-ready templates for Vite+React, Next.js, and Cloudflare Workers.

This Claude Code plugin provides comprehensive Three.js knowledge base with 10 detailed topic references, API signatures for Three.js r160+, and working code examples for building 3D web experiences. It covers fundamentals, geometry, materials, lighting, textures, animation, loaders, shaders, postprocessing, and interaction patterns.

This skill provides standardized UI text and copy guidelines for WooCommerce projects, covering capitalization rules, element-specific examples, and exception handling for proper nouns and acronyms. It helps developers write consistent, production-ready user-facing text across buttons, labels, messages, and documentation.

filetree is a Claude Code mod that displays an IDE-style file tree in the sidebar, showing Claude's real-time activity (reads, writes, commits) and git status with branch information and file change counts. It provides interactive navigation with search, file selection context passing, and visual indicators for Claude's operations across the working directory.

Excalidraw Toolkit is an AI-powered diagramming plugin for Claude Code that automatically visualizes codebases as architecture diagrams by analyzing project structure and mapping components and connections. It supports user-described diagrams with agentic self-critique for layout validation, geometric correction, and exports to PNG, SVG, and shareable Excalidraw URLs.

Claude Code plugin that enforces Design System compliance in Figma by ensuring AI-generated designs use library components, token bindings, and automated QA verification instead of hardcoded values. It provides 4 skills covering preflight checks, component lookup, style binding, and reference interpretation to keep generated designs on-spec.

reimagine-it redesigns existing HTML pages by extracting and analyzing their content, then applies one of 17 visual design directions to create a beautiful, usable standalone HTML file without CDN dependencies. The plugin runs as a CLI tool with four commands (generate/auto, variations, lock, audit) and includes seven agent skills, all working entirely offline.

A skill pack of 40 specialized tools for Claude Code that automates staff-level design system work including auditing, governance, documentation, validation, and stakeholder communication. It provides structured processes and prioritized findings for token health, component specs, deprecation planning, and migration, rather than generic AI advice.

This plugin provides seven AI agent skills for the Symfony UX frontend stack, covering Stimulus controllers, Turbo navigation, TwigComponent and LiveComponent UI development, Icons, and Map integration. The skills use progressive disclosure (descriptions, quick references, and deep API docs) to teach Claude how to apply each tool accurately for client-side behavior, partial page updates, reusable components, reactive UIs, and interactive maps.

This plugin designs conversation patterns, turn-taking mechanics, and mixed-initiative flows between humans and AI models, including generative UI, multimodal orchestration, and frustration detection from text signals. It provides skills for context-window design, progressive disclosure, and user feedback loops alongside commands to design, audit, and map AI interactions.

This Claude Code plugin provides agents access to Spectrum design tokens, component schemas, and design-system data through a skill that wraps the @adobe/design-data CLI. It is a pure-skills plugin with no build dependencies that can be installed directly in Claude Code or Cursor.

This Claude Code skill provides spec-conformant design token lookup, validation, diffing, and authoring for any design dataset through an in-process WebAssembly interface to the design-data agent. It includes tools for token resolution, querying, suggestion, component and guideline description, with optional CLI invocation only for stateful authoring workflows.

The s2-docs plugin provides AI access to Spectrum 2 component documentation through MCP tools for searching, listing, and retrieving design guidelines and usage patterns. It fetches component docs on-demand from the Spectrum Design Data monorepo without requiring a persistent server to remain running.

A Claude Code plugin that teaches deterministic, hash-seeded generative art rendering for onchain platforms like Art Blocks, 256ART, Verse, and others, with built-in verification scripts and reference guides for traits, rarity design, and multi-resolution output. It includes runnable Node.js tools to check determinism, render individual seeds or contact sheets, and measure rarity before minting.

This plugin enables Python scripting and AI-powered image generation within Claude using Google's Gemini models, with inline script dependencies managed through uv. It supports image generation, editing, and arbitrary Python script execution through heredoc-based workflows.

This plugin generates beautiful, self-contained HTML pages with no build step or external dependencies to visually explain systems, code changes, plans, and data through diagrams, tables, and slide decks. It includes seven commands for creating diff reviews, plan reviews, architecture overviews, and implementation plans with customizable themes and Mermaid diagram support.

Perception-First Design is a psychology-backed diagnostic framework that analyzes designs through five cognitive layers—working memory, first impression, processing fluency, perception bias, and decision architecture—to identify perceptual failures before implementation. The plugin auto-activates on design, marketing, copywriting, and communication tasks, using iterative passes to apply cognitive science principles grounded in peer-reviewed research.

This Claude Code plugin provides a single skill that generates paste-ready Power Apps Canvas App YAML from screenshots, mockups, or text descriptions, enforcing Power Apps YAML standards automatically. The skill includes a multi-agent pipeline for layout, controls, and styling, and saves output directly to a local directory for pasting into Power Apps Studio.

FlowForge is a Claude Code skill that generates professional draw.io diagrams from natural language descriptions, supporting 12 layout types (flowchart, architecture, comparison, timeline, etc.) and 5 color themes. It produces editable XML files that can be refined in draw.io editor with no external API dependencies.

Claude Image View is a Claude Code mod that displays thumbnails of pasted images above the prompt instead of bare [Image #n] tags, preserving their aspect ratios and automatically scaling to fit. It works by reading the prompt for image tags, locating cached PNG files, and rendering previews using the kitty graphics protocol in compatible terminals.

motion-video is an agent skill that produces beat-synced 1920×1080 motion-graphic videos with HTML+GSAP scenes, AI voice-overs, karaoke captions, sound effects, and generated music, where scene cuts and reveals align to music beats and spoken words. The pipeline generates voice-over and music through the multix CLI (requiring Gemini and ElevenLabs keys), then uses ffmpeg, Python for beat-grid analysis, and HyperFrames for rendering to produce broadcast-clean video at 30 fps with verified audio balance.

Archetypal Alchemy combines Jungian archetypes and Tarot Major Arcana symbolism to generate UI components, Tailwind color palettes, and design systems with psychological depth. The plugin provides commands to generate archetype-driven components, extract symbolic color palettes, and an agent to recommend archetypes for design projects.

Design Mastery provides timeless design principles from legendary designers and historical movements (Bauhaus, Swiss International Style, etc.) to ground UI/UX work in centuries of design excellence rather than fleeting trends. It includes agents and commands for design audits, style guide generation, brand identity development, and applying core principles like visual hierarchy, typography, color theory, and Gestalt to modern interfaces.

This plugin provides two specialized agents (frontend-developer and mobile-developer) and a component-scaffold command for building React 19+, Next.js 15+, React Native, and Flutter applications with production-ready components and modern architectures. It covers responsive web layouts, cross-platform mobile development, state management, accessibility, testing, and app store optimization.

This plugin extends Claude Code with browser DevTools capabilities via Model Context Protocol, enabling live DOM inspection, CSS analysis, and screenshot-to-code conversion on running web applications. It supports visual debugging, design token extraction, accessibility auditing, and performance measurement through Puppeteer and Chrome DevTools Protocol.

This plugin coordinates a team of six specialized agents across backend, frontend, mobile (Flutter, React Native, SwiftUI), and design to deliver full-stack cross-platform applications from a shared API-first architecture. The multi-platform command orchestrates parallel implementation and testing across web, iOS, Android, and desktop platforms.

This Claude Code plugin provides a single skill for rapid UI prototyping using the "vibe coding" philosophy, teaching developers when to explore fast with disposable code and when to transition to production-ready craft mode. It includes concrete patterns like the 10-Minute Prototype protocol, Variant Explosion for design exploration, OODA loop optimization, and clear decision criteria for switching from prototype to production.

Archetypal Alchemy generates UI components and Tailwind color palettes by combining Jungian archetypes with Major Arcana tarot symbolism to create psychologically coherent design systems. The plugin provides slash commands for component generation and palette extraction, plus an agent for design analysis and archetype recommendations.

Design Mastery provides timeless design principles from legendary designers and historic movements—including visual hierarchy, typography, color theory, and Gestalt principles—integrated into agents and commands for brand identity development, design audits, and style guide generation. The plugin grounds UI/UX work in centuries of design excellence through practical toolkits on hierarchy, typography, color, composition, and perceptual psychology.

This plugin provides two specialized agents (frontend-developer and mobile-developer) and a component-scaffold command for building modern React, Next.js, React Native, Flutter, and native iOS/Android applications with full scaffolding support. It covers frontend architecture, state management, accessibility, mobile development patterns, offline sync, biometric auth, and CI/CD tooling across platforms.

This plugin extends Claude Code with browser DevTools capabilities via MCP for live UI inspection, screenshot-to-code conversion, design token extraction, and visual debugging of running web interfaces. It provides DOM inspection, CSS analysis, accessibility auditing, performance measurement, and network monitoring through natural language commands.

This plugin provides six specialized agents that coordinate cross-platform application development across backend (APIs, microservices), frontend (React 19, Next.js 15), mobile (Flutter, SwiftUI, React Native, Kotlin Compose), and UI/UX design. The multi-platform command orchestrates parallel implementation from a shared API-first architecture across all target platforms.

This plugin provides a skill for rapid, disposable UI prototyping using the "vibe coding" philosophy, covering fast iteration loops, variant exploration patterns, and clear decision criteria for when to switch from prototype mode to production-ready code. It includes concrete protocols like the 10-Minute Prototype, Storyboard Prototypes, Variant Explosion, and AI-assisted prompt patterns, along with guidance on avoiding anti-patterns and transitioning validated prototypes toward craft mode.

Mindful Claude displays guided breathing animations (coherent, box, 4-7-8, and physiological sigh patterns) above the prompt while Claude processes, with configurable styles and spinner integration that automatically appears when work starts and disappears when results arrive. The plugin runs entirely client-side using function hooks with zero token cost and includes a /breathe command for adjusting exercise type, animation style, and display settings.

This plugin provides 10 skills to structure content that works effectively for screen readers, cognitive differences, and diverse literacy levels. It helps create accessible markup and formatting standards without requiring external APIs or tools.

This Claude Code plugin provides 9 skills for building design systems that adapt to individual user preferences and accessibility needs. It enables developers to create responsive interfaces that automatically adjust layout, typography, contrast, and interactions based on user profiles and environment.

This plugin provides 11 skills focused on cognitive accessibility principles including cognitive load reduction, plain language, wayfinding, focus management, memory support, and error recovery. It integrates design guidance directly into Claude Code workflows without requiring external dependencies or API keys.

The inclusive-interaction plugin provides 10 skills for designing multi-modal interactions that adapt to how people move, perceive, and communicate. It requires no external APIs or services, making it a self-contained toolkit for building accessible user experiences.

The inclusive-personas plugin helps teams build user stories, personas, and scenarios that center disability accessibility from the start of product design. It provides nine skills to guide inclusive design thinking throughout the user research and documentation process.

Pix converts Figma designs to frontend code with autonomous pixel-perfect refinement, automatically detecting your tech stack and design system while syncing design tokens and reusing existing components. It integrates Claude Code with Chrome, Figma MCP, and continuous screenshot comparison to iteratively fix UI discrepancies until production-ready.

This Claude Code plugin displays hoverable image previews when you paste images into prompts, showing them in a small window by your pointer or drawn in the terminal depending on your setup. Click to open images in your system viewer, and the preview follows your pointer while you work and continues to display on previously sent prompts.

This Claude Code plugin integrates MagicPath UI component design tools, allowing users to search, preview, install, and author MagicPath components directly from the editor via the magicpath-ai CLI. It supports creating new projects, editing canvas components from local code, applying design-system themes, and managing personal and team workspaces.

The quarto-revealjs skill generates HTML slide decks using Quarto's Reveal.js format, offering pre-built meeting, technical-talk, and minimal templates with clean light and dark SCSS themes, speaker notes, code highlighting, Mermaid diagram support, and PDF export capabilities. It handles the full workflow from template selection through content filling, rendering, and syntax guidance for advanced features like fragments, auto-animate, and presenter mode.

A Claude Code plugin that audits front-end interfaces against 15 established UX design principles, producing severity-rated findings with concrete code fixes for accessibility, visual hierarchy, consistency, and interaction patterns. It evaluates HTML, CSS, JavaScript, React, Vue, and Svelte code, then optionally implements improvements across affordances, error recovery, and design system standardization.

This plugin generates short procedural animations in multiple built-in styles (explainers, histories, product reels, stories) as single-file canvas MP4 videos, with support for custom styles, beat-mapped music, product screenshots, and multiple output formats. The workflow includes intake, story/look/storyboard check-ins, and a measured build to final MP4.

Comprehensive code review plugin for iOS development covering Swift, SwiftUI, SwiftData, animations, and Apple frameworks like HealthKit, CloudKit, WidgetKit, and watchOS. Provides 16 specialized skills for code review, animation design/implementation, and framework-specific analysis, designed to pair with beagle-core for complete workflows.

The LittleJS plugin scaffolds complete, playable HTML5 games in Claude Code by describing a game concept and generating a project with the LittleJS engine (WebGL rendering, physics, particles, audio) pre-bundled. Four built-in skills handle game scaffolding, API lookup, code conventions, and sprite generation—everything runs from file:// with no server or npm install.

This skill converts hierarchical Markdown outlines into interactive SVG mind maps using markmap.js, producing a single self-contained HTML file that works offline with built-in zoom, expand/collapse, search-with-context, and export capabilities. The renderer is dependency-free (Python standard library only) and inlines all assets into the output so no external files or CDN access are required.