Best Design & Frontend plugins for Claude Code

Claude Code plugin that extracts video frames via ffmpeg and processes audio through configurable backends (Gemini API, local Whisper, or OpenAI) to give Claude direct visual and audio understanding of videos. The plugin supports local files and YouTube URLs, automatically adapting frame extraction parameters based on user queries.

A Claude Code skill providing WCAG 2.1 AA accessibility patterns and comprehensive guidelines for TYPO3 v13+ sitepackage frontend development. It includes HTML/ARIA patterns, SCSS examples, TypeScript implementations, and patterns for common UI components like forms, tables, navigation, and notifications.

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 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 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.

A Claude Code skill providing comprehensive Netresearch brand guidelines, color specifications, typography standards, and production-ready templates for consistent brand implementation across web projects. It enables Claude to help developers maintain visual identity and WCAG AA accessibility compliance when creating Netresearch-affiliated digital materials.

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 skill converts Markdown files to styled PDFs using WeasyPrint with a generic, brand-neutral default style that can be overridden via custom CSS for branded output. It integrates with Claude Code, Cursor, GitHub Copilot, and other agent-skills-compatible AI agents.

This plugin reformats Claude Code output for ADHD-friendly reading by leading with actionable next steps, numbering tasks, suppressing tangents, and making progress visible. It uses 10 specific rules—like matter-of-fact tone, capped lists, and concrete time estimates—to eliminate preamble and bury-the-answer patterns.

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 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.

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 skill provides a complete Vite build setup, modular SCSS architecture, and Bootstrap 5 theming configuration tailored for TYPO3 v13+ sitepackage development. It includes reference documentation for Vite configuration, SCSS folder structure with naming conventions, and Bootstrap theme customization.

This plugin generates beautiful HTML pages that visualize diagrams, diff reviews, plan reviews, slides, and data tables with minimal setup. It provides 7 commands for creating interactive visual explanations without requiring external API keys or tools.

A collection of 62 agent skills bundled into 8 topic-focused skill sets covering product strategy, UX design, marketing, sales, innovation, growth, team motivation, and code craftsmanship, plus 12 metaskills that guide step-by-step journeys for building and improving businesses, websites, apps, and code quality. The skills draw from 50 expert frameworks and bestselling books, with persistent state management in a project's docs/ folder for multi-session workflows.

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 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.

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.

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.

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.

The img plugin generates and edits images using OpenAI GPT-4o's image generation or Google's Gemini 3.1 Flash with image preview capabilities, with no automatic provider fallback. It provides both a CLI tool and Claude Code/Codex plugins that support on-brand image workflows for teams managing multiple client projects.