17,795 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.
Plugin Claude Code
Bundles 1 skill · 103 tokens together
Translates Figma designs into production-ready code using a three-station component-first workflow. Built for product designers and UI/UX designers. Requires the Figma MCP server.
Skill Claude CodeCodex
Grill an app idea before any code is written — two waves of hard product questions, each with a recommended answer the user edits or accepts — then hand off to the BEFOREVIBE MCP connector for the visual storyboard, production-ready PRD, logo and screen mockups. Use when the user shares a new app or product idea, asks…
Cursor rule Cursor
Advanced Motion UI (AMUI) — Create clean, modern UI with subtle Framer Motion micro-interactions, clear states (idle/loading/success/error), consistent styling via design tokens, and smooth animations. Use when the user wants motion-rich, polished UI with micro-interactions. Triggers: motion, animation, framer motion…
Skill Claude CodeCodex
Full maturity upgrade workflow for an existing app. Runs polish-audit → grill-me (against audit) → design-brief (with baseline) → design-tokens (additive) → brief-to-tasks (with regression guards) → frontend-design → design-review (baseline diff) → MATURITYREPORT.md. Use this for upgrading vibe-coded apps, not…
Skill Claude Code
Generate favicon.ico and a complete icon set from a source PNG. Optimised for Next.js App Router but works for any web project.
Skill Claude CodeCodex
Analyze email HTML for accessibility issues, combining mechanical rule-based checks (lang/dir attributes, alt text, contrast ratios, heading structure, VML, tables, landmarks) with judgment-based analysis (alt text quality, semantic structure, link text quality, visual/interaction concerns like touch targets and font…
Skill Claude CodeCodex
A production design agent that brings craft, polish, and precision to design outputs. Use this skill when the user wants to refine, polish, or finalize a design — including improving typography, spacing, layout structure, visual hierarchy, color systems, component quality, responsive behavior, or overall design craft.…
Skill Claude CodeCodex
Analyze a design or screen for clarity — whether a stranger can read the intent in five seconds. Use this whenever the user asks about hierarchy, what stands out, what gets noticed first, whether a CTA is obvious, whether labels make sense, why users miss something on a screen, or why a layout feels cluttered or…
Skill Claude Code
Design production-grade UI from scratch in Penpot, acting as a senior visual designer. Use when an agent needs to create an interface from a brief, concept, or description — without an existing design system or codebase to translate from. This skill makes real aesthetic decisions, builds a coherent design language…
ariel-lee-1023/Color-Matching-Consultant
Skill Claude CodeCodex
Color matching, palette construction, and pigment-mixing advice that starts with value, context, and material. Use to build or critique a palette, mix a target in a specified medium, troubleshoot muddy color, compare colors, or develop a period or culturally situated palette. Distinguishes perceptual interaction…
Jonathangadeaharder/AgentBible
Skill Claude CodeCodex
Build, redesign, or critique presentation slides and decks that are grounded in cognitive science — Assertion-Evidence structure, minimal cognitive load, Picture-Superiority, strict visual hierarchy, WCAG accessibility — and free of generic "AI-slop." Use this whenever the user wants to make a presentation, build or…
Skill Claude CodeCodex
Implements "Architectural Constructional Interface Design" (ACID) — the dark, technical-blueprint/engineering-schematic UI aesthetic used by dev portfolios and component registries such as chanhdai.com (full-bleed hairline rules, diagonal-stripe section dividers, bordered panel grids with persistent vertical rail…
Skill Claude CodeCodex
Design-decision guide for intentional product UI and marketing surfaces. Use when creating, reviewing, or refining interface hierarchy and craft, especially when a screen feels generic, noisy, inconsistent, or lacks a clear primary action. Routes to focused references by task; use the full checklist only for broad or…
shahid0/mobile-development-ai-skills
Skill Codex
Quality-first agy UI operator for rough user intent: inspect product/code context, gather web or pwm research when useful, write decisive creative briefs, run agy, review harshly, and refine until the visible Flutter, SwiftUI, or web UI is genuinely strong. Use for premium UI generation, redesigns, design systems…
Skill Claude CodeCodex
Design and edit UI layouts in Pencil.app .pen files. Use when working with .pen design files, creating UI mockups, generating code from designs, or when user mentions Pencil app. Supports reading designs, creating/editing layouts, taking screenshots for validation, and extracting design tokens.
Skill Claude CodeCodex
Use when the user provides a URL to a web product and wants to reverse-engineer it, analyze its UI/UX, discover its tech stack and API surface, and produce a comprehensive report plus actionable design document for building a similar product. Triggers on requests like "analyze this product", "reverse engineer this…
Skill Codex
A coordinator for the full user-interface design process, from choosing an approach through review and self-assessment. It connects these stages into one workflow and produces a shared report.
aws-samples/sample-aidlc-design-reviewer
Skill Claude Code ✓ vendor
Run a full AIDLC design review (Critique → Alternatives → Gap Analysis) over a project's aidlc-docs and write Markdown + HTML reports. Use when the user asks to review their design, run a design review, critique their AIDLC design artifacts, or check design completeness. Replaces the legacy single-agent reviewer.
Agent Claude Code
Use this agent when you need a comprehensive UI/UX audit, design review, or visual refinement of the app's screens and components. This agent focuses exclusively on visual design, layout, spacing, typography, color, motion, accessibility, and responsiveness — it does not touch functionality or application…
rugvedtech1/user-psychology-skill
Plugin Claude Code
Agent settings configuring listing, features, useCases, stats, installation, screenshots and 1 more.
Skill Claude Code
Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like…
Skill Claude CodeCodex
Guia designers sem experiência em código desde a instalação do Storybook até visualizar componentes do Figma funcionando como um catálogo interativo. Use esta skill quando o designer chamar explicitamente com /ds-to-code ou pedir para iniciar o fluxo de configuração do Storybook com o Figma.
Agent Claude Code
Reads design-system.json and writes CLAUDE.md enforcement rules and .dsys/STYLE-GUIDE.md.
Skill Claude Code
Mandatory constraint layer enforcing 21 frontend design standards on all UI output.
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: