CSS and styling plugins

respira-press/respira-wordpress-mcp

Plugin Cursor

Bundles 1 MCP server

Read and edit a live WordPress site in its page builder's own format: Elementor, Divi, Bricks, Gutenberg and 14 more. An edit to a published page lands on a draft copy a person approves, and every write saves a snapshot first. Needs the Respira plugin on the site; there is a free trial.

harshkedia177/design-mode

Plugin Claude Code

Bundles 4 skills · 245 tokens together

Visual Design Mode overlay for annotating, inspecting, and modifying UI elements directly in the browser. Click elements to annotate, hover to inspect box models, and let Claude apply your design feedback to source code.

TaewoooPark/UIForge

Plugin Claude Code

Bundles 4 skills, 6 commands, 1 MCP server · 838 tokens together

Clone any website's design into clean, editable React + Tailwind, with your content. Renders a reference, extracts its full design (every color, gradient, shadow, font, box) into a Tailwind v4 theme, replays a faithful reconstruction, loops a visual diff against the original until it matches, then exports an editable…

uselayout/cli

Plugin Claude Code

Bundles 1 skill, 1 hook · 53 tokens together

Serve and enforce your design system in any agent. Bundles the Layout MCP server (design tokens, component specs, compliance checks) and the layout-md skill for writing on-brand UI code.

xonack/wp-ux-design-claude-skill

Plugin Claude Code

Bundles 1 skill · 59 tokens together

WordPress UX/design enforcement skill covering Core Web Vitals, mobile-first design, typography systems, color management, navigation UX, page builder patterns, and loading/error states.

sodam-ai/SoDam-Design-Kit

Plugin Claude Code

Bundles 1 skill, 5 commands, 1 hook · 251 tokens together

A Claude Code design toolkit that turns Figma designs into shadcn/ui code. It checks the result in a real browser with Playwright and axe-core at three screen sizes.

opensesh/canvas-to-code

Plugin Claude Code

Lists 1 plugin

Single-plugin marketplace for Canvas-to-Code — translates canvas designs (HTML + screenshot) into design-system-aligned code through eleven explicit gates.

karak/karak-claude-plugin

Plugin Claude Code

Bundles 10 skills · 2,167 tokens together

UI/UX and visual design skills: Apple HIG for iOS 26 / Liquid Glass, Material Design 3, icon design, frontend aesthetics, UX psychology, Hi-Fi design quality, mobile auth screen design, design system, Garrett UX analysis (Strategy/Scope/Structure/Skeleton/Surface 5-layer framework), design-to-code Storybook catalog…

ca-who-codes/ultimate.UIUX.design.skills

Plugin Claude Code

Bundles 1 skill, 6 commands, 4 agents · 731 tokens together

World-class, one-stop design intelligence for coding agents across two tracks: interfaces (web/apps, components, design systems, the modern React+Tailwind+shadcn stack) AND visual/marketing design (presentations & decks, social carousels & posts, ads, A4/A3 posters, flyers, business cards, event banners…

robzilla1738/htmlshop

Plugin Claude Code

Bundles 1 skill · 104 tokens together

Local visual editor for HTML design files. Click elements to edit text, fonts, layout, and backgrounds. Layers panel, transform handles, carousel multi-edit, PNG/JPG export.

stephengpope/claude-design-importer

Plugin Claude Code

Bundles 1 skill · 87 tokens together

Convert pixel-exact design mockups (e.g. HTML from Claude's design tool) into production Tailwind / shadcn-on-Radix components that use a real token system instead of arbitrary values like text-[13.5px].

Ideelab/uisandbox

Plugin Claude Code

Bundles 1 skill · 155 tokens together

Play with your app's design, right in the browser: open a built web app in UISandbox, 1:1 and with its own knobs, from the chat; try a change, verify, export the patch. Bundles the /uisandbox skill and the uisandbox MCP server.

gg-mo/stagecraft-agent-skill

Plugin Claude Code

Bundles 1 skill · 81 tokens together

Premium, keynote-style UI skill for coding agents — dark, minimal, cinematic reveals with disciplined motion.

mager/loooom

Plugin Claude Code

Bundles 1 skill · 118 tokens together

Use this skill for frontend UI design tasks — designing or reviewing components, specifying CSS with concrete values, layout and spacing decisions, typography selection, color systems, dark mode, and visual polish.

Schoepplake/framer-motion-skill

Plugin Claude Code

Bundles 1 skill · 135 tokens together

Production-grade animation patterns for React/Next.js using Motion (Framer Motion).

leecyno1/boutique-skills

Plugin Claude Code

Bundles 1 skill · 103 tokens together

Zero-config animations for React, Vue, Solid, Svelte, Preact with @formkit/auto-animate (3.28kb). Prevents 15 documented errors including React 19 StrictMode bugs, SSR imports, conditional parents, viewport issues, drag & drop conflicts, and CSS transform bugs. Use when: animating lists/accordions/toasts…

moderncss/skills

Plugin Claude Code

Bundles 1 skill · 136 tokens together

Opinionated rules for modern CSS, so agents and people write it consistently.

itonys/7onic

Plugin Claude Code

Bundles 2 skills, 1 agent · 193 tokens together

7onic Design System AI Kit — MCP server (token search, component catalog, layout recipes, validatecode rule checking), /7onic-setup and /7onic-design skills, and a design implementation agent. Queries in English, Japanese, and Korean.

Muminur/frontend-design-craft-skill

Plugin Claude Code

Bundles 4 skills, 13 commands · 605 tokens together

Website design plugin for Claude Code. Synthesizes purposeful motion, typographic polish, and anti-AI-slop taste into one design system.

infolog-io/skills

Plugin Claude Code

Bundles 1 skill · 154 tokens together

Audits and refactors web projects against atomic design discipline and brand-token coherence. Detects token drift, scattered components, naming violations, and identity drift. Emits a scored audit, a refactor plan, and (when the system is broken) a build-out plan listing missing tokens and patterns. Web medium first…

lespaceman/athena-workflow-marketplace

Plugin Claude Code

Bundles 1 skill · 241 tokens together

Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.

dnh33/frontend-aesthetics

Plugin Claude Code

Bundles 1 skill · 74 tokens together

Unified frontend aesthetics skill for webshop development. Anti-AI-slop rules, distinctive typography, CSS-var palettes, purposeful motion, layered backgrounds. Optimized for e-commerce conversion with 2026 research data.

navinramharak-rgb/50k-website-builder

Plugin Claude Code

Bundles 1 skill · 138 tokens together

Build cinematic, scroll-animated marketing sites that look like they cost $50,000 or more. A reference-and-taste phase, a design token system, a GSAP motion system, a signature-move library, a brand-to-build workflow, and in-browser QA.

OpaceDigitalAgency/skills

Plugin Claude Code

Bundles 1 skill · 138 tokens together

Accuracy-first cinematic website skill with timeboxed product-film production, reusable scroll media and fail-closed validation.