Design and UX

hamen/material-3-skill

Plugin Claude Code

Lists 1 plugin

Material Design 3 (Material You) implementation skill for Jetpack Compose, Flutter, and web.

daymade/claude-code-skills

Skill Claude CodeCodex

A rulebook for choosing and reviewing data visualizations before they are made. It covers the intended conclusion, chart type, summary statistics, aggregation, axes, colors, legends, and table columns across web pages, dashboards, presentations, and charting libraries.

kylezantos/design-motion-principles

Skill Claude CodeCodex

Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes — build interactive components with purposeful motion, or audit existing animations to catch AI-slop motion patterns (audit emits a branded HTML report with looping demos). Use when creating, adding…

lgazo/drawio-mcp-server

Plugin Claude Code

Bundles 2 commands · 27 tokens together

Draw.io MCP: built-in editor, page/layer tools, AWS/GCP/Azure/Cisco stencils.

icebird1998/drawio-scientific-illustrator

Skill Codex

Recreate, trace, revise, inspect, or export static scientific figures and schematic illustrations live inside the visible draw.io desktop canvas through draw.io's own graph API. Use when the user wants to watch an MCP draw a reference figure step by step in draw.io, explicitly rejects XML-first generation or…

better-auth/better-icons

Skill Claude CodeCodex needs its repo

Use when working with icons in any project. Provides CLI for searching 200+ icon libraries (Iconify) and retrieving SVGs. Commands: better-icons search to find icons, better-icons get to get SVG. Also available as MCP server for AI agents.

yetone/kill-ai-slop

Skill Claude CodeCodex

Find and remove AI slop — the generic, machine-default visual and copy tics of vibe-coded products — from a web project. Use when the user asks to "kill AI slop", "de-slop", "remove the AI look", "make this not look AI-generated", or clean up a landing page / UI / docs that feels templated. Detects and fixes the…

desko27/react-call

Skill Claude CodeCodex

Reach for the react-call library (createCallable) when building UI that resolves a value back to its caller — confirmations, dialogs, form modals, toasts, notifications, context menus, pickers. Use when a React task involves any such "await the UI" interaction, when code imports createCallable, useMutationFlow…

open-gsd/gsd-pi

Skill Claude CodeCodex

UI/UX best practices for web interfaces. Use when reviewing animations, CSS, audio, typography, UX patterns, prefetching, or icon implementations. Covers 11 categories from animation principles to typography. Outputs file:line findings.

joeseesun/qiaomu-mondo-poster-design

Skill Claude CodeCodex

An AI image-design skill for creating posters, book covers, album covers, and similar artwork in a Mondo-inspired style. It can produce image prompts and generate designs in formats such as posters, social-media images, and covers.

matlab/simulink-agentic-toolkit

Skill Claude CodeCodex

Create and register Simulink block icons programmatically. Use when asked to create an icon, generate a block icon, design an SVG icon for a Simulink block, register an icon, or help with IconEditor features like visibility conditions, layout constraints, parts, port labels, dynamic text, or block frame shapes (e.g. a…

awdr74100/figwright

Skill Claude CodeCodex

Generate framework-aware code from a Figma design. Reads the project's stack profile and emits code matching the existing framework (React/Vue/Svelte/Next/etc.) and styling (Tailwind/CSS/CSS-in-JS), reusing existing components and design tokens instead of regenerating from scratch. Triggers whenever the user wants a…

AIPexStudio/AIPex

Skill Claude CodeCodex

WCAG 2.2 Accessibility Audit skill that systematically evaluates web pages against 8 core Success Criteria (1.1.1, 1.4.3, 1.4.11, 2.1.1, 2.1.2, 2.4.3, 2.4.7, 4.1.2) using accessibility tree inspection and visual analysis. Use this skill when you need to perform accessibility testing/auditing on a live webpage.

Anionex/agent-vision-toolkit

Skill Codex

Local vision CLIs: glance (describe/ask/OCR an image), ground (locate a target, pixel box), detect (element inventory), trace (image to SVG geometry), crop (cut a pixel box to a file), and scripts/htmlshot.py (HTML file to image). Use for any task involving an image — questions, text, splitting and transcribing long…

AGenUI/AGenUI

Skill Claude CodeCodex

Design and generate A2UI updateComponents and updateDataModel payloads for three modes (DTO component, non-DTO component, non-DTO page). Use when asked to create or refine A2UI cards, components, or pages from DTO/JSON/business data, generate Python transformer code for DTO-driven components, iterate on existing A2UI…

hugeicons/hugeicons

Cursor rule Cursor

Hugeicons rules for any UI work that needs icons. Covers choosing the icon library, resolving real icon names, keeping one style, and never hand-drawing an icon as inline SVG.

adamlyttleapps/claude-skill-app-onboarding-questionnaire

Skill Claude Code

Design and build a high-converting questionnaire-style onboarding flow for your app, modelled on proven conversion patterns from top subscription apps.

nevertoday/zhongguo-traditional-colors

Skill Codex

Turn vague visual direction into a practical Chinese traditional color brief. Use when a user has mood words, client feedback, audience positioning, references, or an unclear Chinese traditional color direction that must become palette constraints before choosing colors.

johnpapa/vscode-peacock

MCP server Claude CodeCodexCursor +2

Lets the agent drive a real browser: open pages, click, type, take screenshots and read the accessibility tree, using Playwright. Runs locally from the @playwright/mcp npm package.

Formsmith746/SketchForge-3D

Skill Codex

Control a live local SketchForge editor through its MCP server. Use when Codex needs to list currently open SketchForge editor tabs, target a tab by editorNumber/projectName, read the current scene, list or select objects, create boxes/cubes/cylinders/sketch extrusions, update dimensions/position/rotation, align…

PostHog/posthog.com

Agent Claude Code

Use when English text must be parsed without a human to resolve ambiguity — tool descriptions, error messages, inter-agent instructions, system prompts, status reports — and misreading has a real cost, or when text reads as dense, hedged, or easy to misparse. Triggers: disambiguate, STE100 rewrite, apply Simplified…

KroMiose/nekro-agent

Cursor rule Cursor

Frontend theme-system rules for NekroAgent, covering the theme architecture, core file structure, design principles, and usage guidance. A theme system controls shared visual choices such as colors, typography, and layouts.

pengjunchi0/codex-visio-paper-figure-skill

Skill Codex

Rebuild or restyle editable Microsoft Visio diagrams from reference images and existing .vsdx files, then export deliverables as .vsdx, PNG, SVG, PDF, or PPTX. Use when the user asks Codex to open Visio, recreate a diagram from a PNG/JPG/screenshot/reference image, match a scientific model figure, update…

silships/figma-cli

Plugin Claude Code

Bundles 1 skill · 149 tokens together

Build and edit designs directly in Figma Desktop from your terminal — render frames/components/variants, manage design tokens & variables (shadcn/Tailwind/DTCG), extract & import whole design systems, gradients, Figma Motion, and accessibility audits. Controls Figma live over a local connection, no API key.