Design and UX skills

13,158 tagged Design and UX, measured the same way as everything else here.

Browse within: design-system 179agentic-ai 158agentic 152ai-tools 131skills 129ai-design 112byok 106agent 101coding-agents 94desktop-app 93ai-ppt 88ai-ppt-generator 87aippt 87html-ppt 87

AmadeusITGroup/otter

Skill Claude CodeCodex

Write keyboard-only test variants and focus management checks using Playwright: navigation patterns, focus expectations, helpers, and file structure conventions.

not rated 58 +1 yesterday A SkillSpector: warn 34 tokens original BSD-3-Clause

verify-ui

410

ThisIsSadeghi/KMPilot

Skill Claude Code needs its repo

Verify UI implementation against Stitch design via a token audit (HTML ↔ Code, with X-component default-render checks) and an X-components compliance check.

not rated 58 +2 1mo ago A SkillSpector: warn 30 tokens original MIT

ux-designer

411

szilu/ux-designer-skill

Skill Claude CodeCodex

UX/UI design principles for building and critiquing interfaces. Use for accessibility audits (WCAG, EAA), microcopy, forms, navigation, onboarding, internationalization and RTL, voice and AI interfaces, and design systems.

not rated 58 +2 27d ago A 50 tokens original MIT

boredape874/mcbejsonuimasterAI

Skill Claude CodeCodex

Use when the user asks for layout, positioning, alignment, symmetry, equal spacing, or pixel-correct sizing of Bedrock JSON UI elements. Translates the user's intent (prompt or annotated image) into the IR YAML described in docs/41-ir-spec.md and schemas/ir.schema.json. Pairs with mcbe-json-ui-tools-runner to compile…

not rated 58 +3 changed 5d ago A 85 tokens

cadis-ramaclaw-ui

413

Growth-Circle/cadis

Skill Claude CodeCodex

Use when implementing or reviewing CADIS HUD, RamaClaw UI adaptation, config window, agent rename, theme picker, voice/model settings, orbital HUD, approval cards, screenshot parity, or desktop window behavior.

not rated 57 22d ago A 50 tokens

skill

414

cozy/cozy-ui

Skill Claude CodeCodex

Skill "skill" from cozy/cozy-ui, covering cozy ui, quick start, what this skill provides, quick reference and components.

not rated 57 7d ago A SkillSpector: pass 0 tokens original MIT

ui-patterns

415

lubusIN/frappe-skills

Skill Claude CodeCodex

UI/UX patterns and guidelines derived from official Frappe apps (CRM, Helpdesk, HRMS). Use when designing interfaces for custom Frappe applications to ensure consistency with the ecosystem.

not rated 57 1mo ago A SkillSpector: warn 43 tokens original MIT

clawd-emotes

416

xixicc186/clawd-emotes-skill

Skill Claude CodeCodex

Create original pixel-art "Clawd" crab emotes as pure SVG + CSS keyframe animations (no frame-by-frame GIFs, no raster sprites), and optionally export them to looping GIFs. Each emote is a tiny pixel crab doing an activity — holding a prop, wearing a hat, reacting — built from / / and animated with @keyframes. Use…

not rated 57 +3 1mo ago A SkillSpector: pass 204 tokens original MIT

shadcn

417

productdevbook/shadcn-htmx

Skill Claude CodeCodex

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. 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 file. Also triggers for…

not rated 57 +4 3mo ago A 90 tokens copy · 92% MIT

tufte-xiaohei-fusion

418

quzhi-ai/tufte-xiaohei-fusion

Skill Claude CodeCodex

A design workflow that combines Tufte-style information graphics with a recurring hand-drawn black character called Xiaohei in a tall mobile image. Tufte-style graphics prioritize clear evidence and accurate data displays.

not rated 56 3mo ago A 217 tokens original MIT

design-taste

419

duncan-buildroom/freeskills

Skill Claude CodeCodex

Turn "I don't have taste" into a written design system you own. You name or screenshot 1-3 sites you love, and this reverse-engineers the exact colors, font pairing, spacing rhythm, and rules underneath them, then saves a design file every future build reads so your stuff stops looking like a default template. Use…

not rated 56 1mo ago A 140 tokens

tailwind-plus

420

richardkmichael/tailwindplus-downloader

Skill Claude Code

This skill should be used when the user asks to "add a component", "use a Tailwind Plus component", "build a UI", "create a form", "add a modal", "add a sidebar", "create a landing page", or needs any UI component from Tailwind Plus (formerly Tailwind UI). Use this when building pages, layouts, or UI elements with…

not rated 56 +1 3d ago A 84 tokens

dacnay816y62-hub/regional-culture-poster

Skill Claude CodeCodex

Convert Chinese provinces, municipalities, autonomous regions, cities, counties, ancient cities, and cultural regions into restrained contemporary posters led by one culturally transformed Chinese character. Supports direct one-shot final image generation and layered production. Use when the user asks for a…

not rated 56 +2 5d ago A 158 tokens original MIT

html-report-design

422

Ted0321/kotetsu-work-ai-skills

Skill Claude CodeCodex

A set of rules for making HTML reports, proposals, dashboards, and research documents look like professionally designed consulting documents.

not rated 55 25d ago A SkillSpector: pass 121 tokens original MIT

design-contract

423

Carlos-Dominguez-faber/criterio

Skill Claude CodeCodex needs its repo

Crea el contrato de diseño de un proyecto antes de escribir el primer componente. Corre una entrevista de 8 preguntas, elige un preset visual, y escribe brand.json, voice.json, motion.json y COMPONENTRULES.md (y compila brand.css). Úsala cuando el usuario diga "quiero que se vea bien", "hazme una landing bonita"…

not rated 55 +1 1mo ago A SkillSpector: pass 143 tokens original MIT

thesis-flowchart

424

BAOXI11/thesis-flowchart

Skill Claude CodeCodex

Create, revise, normalize, and validate thesis-ready flowchart figures for undergraduate theses, graduation projects, dissertations, and academic papers. Use when users ask to draw or convert thesis/graduation-project process descriptions, algorithm steps, system workflows, business processes, experimental protocols…

not rated 55 1mo ago A 139 tokens original MIT

red-hat-quick-deck

425

toddward/red-hat-quick-deck

Skill Claude CodeCodex

Create beautiful, shareable HTML-based slide presentations styled to Red Hat brand standards. Generates single-file, self-contained HTML decks with click/keyboard navigation, story-arc-driven narrative structure, and cinematic dark-mode aesthetics. Supports embedded videos (YouTube, Vimeo, direct URLs) and linked…

not rated 55 +1 2mo ago A 199 tokens original MIT

huashu-design

426

itgoyo/hermes-skills

Skill Claude CodeCodex

A design skill for making high-fidelity prototypes, interactive demos, slides, animations, and design variations with HTML. It can also provide design-direction advice and expert reviews.

not rated 55 +1 4mo ago A 503 tokens

bootstrap-from-figma

427

leefanv/omit-design

Skill Claude CodeCodex

Bootstrap a fresh omit-design project's visual theme from an existing Figma file — extract design tokens (colors + spacing) and PUT the result to the dev-server so the workspace can apply it to theme-editor. Use when the user pastes a figma.com URL and wants to seed the project's theme. Patterns are produced…

not rated 54 4mo ago A 84 tokens original MIT

alonf/specrew

Skill Claude Code

Run Specrew's per-lens design workshop and collaborative design-analysis. Use whenever you work the design lenses for a feature: at specify/intake (the lens workshop) and at the design-analysis stop (co-design the architecture), and RE-INVOKE at the start of EACH new lens (architecture, data, ui-ux, security…

not rated 54 yesterday A SkillSpector: pass 193 tokens original MIT

render-style

429

Rustam-Z/hamroh

Skill Claude CodeCodex

House style for the renderhtml tool — dark dashboard / architecture-diagram look with stat tiles, bar rows, numbered timeline steps, two-panel grids, status pills, connector arrows, callout bands, and verdict blocks. Read this skill before calling renderhtml so the output is visually consistent. Provides CSS tokens…

not rated 54 17d ago A SkillSpector: pass 82 tokens original MIT

ppt-orchestrator

430

huangrichao2020/pretty-skills

Skill Claude CodeCodex

A dispatcher for creating presentations, slide decks, long images, and weekly reports. It chooses a visual style and output format, then sends the work to a more specialised add-on.

not rated 54 4d ago A SkillSpector: pass 160 tokens original MIT

toss-tech-design

431

Ilbie/Toss-Design-Skill

Skill Claude CodeCodex

Use when applying Toss Tech Design principles from a 129-article toss.tech design summary to complex product flows, research ops, internal tools, UX writing, accessibility, or brand work with high cognitive load, repeated manual work, trust issues, or inclusion gaps.

not rated 54 2mo ago A 57 tokens original MIT

codex-dream-skin

432

xnydl/codex-dream-skin

Skill Codex

Apply, launch, verify, repair, update, or restore a full decorative skin for the Windows Codex desktop app. Use when the user asks for a Codex theme that goes beyond official color settings, wants the pink-purple Dream/Fiona-style interface, needs the skin reapplied after a Codex update, or needs a safe rollback…

not rated 54 1mo ago A SkillSpector: pass 83 tokens original MIT

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: