6,298 mods in this category, of every kind an agent can take. Each one carries what it costs per session, what the scan found, and whether it is the original.
MCP server Claude CodeCodexCursor +2
On-demand drift checks: declared CSS color, radius, spacing & type vs your own tokens or a pack. Remote server at swatchdog-mcp-970396648818.us-central1.run.app.
Skill Claude Code
Build or update a reusable UI component in src/components/ — primitives, composites, landmarks, content components. Trigger whenever the user wants to create or modify any .astro file under src/components/, add a variant or state to an existing component, do a visual refactor (spacing, hover lift, type), or build a…
Plugin Claude Code
Frontend design skill: direction, design system, visual philosophy.
Skill Codex
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states.…
Command Claude Code
A command that examines edits made with VisBug and transfers them into a project's CSS or other styles. VisBug is a browser tool for inspecting and editing web pages.
itsocialist/mcp-config-manager
Agent Claude Code
Use this agent when working on React components, UI/UX improvements, styling with Tailwind CSS, frontend state management, or any visual interface development tasks. Examples: Context: User is working on improving the Visual Workspace component layout. user: 'The drag and drop area needs better visual feedback when…
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.
Skill Codex
Direct, design, implement, animate, critique, audit, polish, and deploy distinctive production frontend interfaces for websites, landing pages, web apps, dashboards, mobile concepts, and desktop shells. Use for new frontend builds, redesigns, bland or visually generic UI, messy interfaces, design systems, Vue Bits or…
Skill Claude CodeCodex
Use when you know what component, flow, or interface you need but not yet the right accessibility approach. Best for turning WCAG 2.2 requirements into an accessible implementation plan with WAI-ARIA APG patterns before code hardens bad interaction and state patterns.
Cursor rule Cursor
Ensure all screens look great and function properly across mobile, tablet, and desktop devices. Follow mobile-first design principles with progressive enhancement.
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.
Plugin Claude Code
Single-plugin marketplace for Canvas-to-Code — translates canvas designs (HTML + screenshot) into design-system-aligned code through eleven explicit gates.
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].
kesslerio/ultimate-frontend-design-openclaw-skill
Skill Claude CodeCodex
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites…
Skill Claude Code
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json…
Skill Claude CodeCodex
Extrai o design system de um HTML/URL/print e gera um design-system.html canônico (11 seções, anatomia replicável, regras do/dont, tokens CSS, classes .ds-, WCAG AA, voz, versionamento) preservando 100% das classes/animações originais. Salva o DS mestre do seu OS em contexto/design-system.html e a referência extraída…
Skill Codex
Orchestrate UI direction, composition, motion provider selection, implementation, and browser-proven quality for polished frontend work. Use when Codex needs to improve a visual surface with animation or interactive polish; when a request mixes design intent, component choice, browser validation, accessibility, or…
Skill Claude Code
CSS, JavaScript, and HTML coding standards for this Kona theme. Covers Tailwind CSS v4 utility-first patterns, Vite build pipeline, island hydration architecture, design tokens via @theme, Web Components, defensive CSS, and progressive enhancement. Use when writing CSS/JS/HTML in .liquid files or theme frontend source…
Skill Claude CodeCodex
Use this skill whenever building interfaces that should feel physically responsive, alive, and polished. Trigger for spring animations, gesture-driven UI, interruptible animations, physics-based motion, drag interactions, momentum scrolling, layout animations, shared element transitions, spatial UI…
Skill Claude Code
Creates dropdown menus with proper click-outside detection and z-index stacking for list contexts. Use when building action menus, context menus, or any dropdown that appears in cards/list items.
Agent Claude Code
Visual QA specialist using Playwright MCP and Figma MCP for pixel-perfect frontend implementation and debugging.
Skill Claude CodeCodex
Audits and implements web accessibility (a11y) following WCAG 2.1 guidelines with ARIA patterns, keyboard navigation, screen reader support, and contrast checking. Use when users request "accessibility audit", "a11y review", "WCAG compliance", "screen reader support", or "keyboard navigation".
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.
kenneives/design-token-bridge-mcp
Instructions file Claude Code
Instructions for kenneives/design-token-bridge-mcp, covering design-token-bridge-mcp, project overview, publishing checklist, key architecture and testing.
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: