Skill Claude CodeCodex
Write keyboard-only test variants and focus management checks using Playwright: navigation patterns, focus expectations, helpers, and file structure conventions.
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
Skill Claude CodeCodex
Write keyboard-only test variants and focus management checks using Playwright: navigation patterns, focus expectations, helpers, and file structure conventions.
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.
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.
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…
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.
Skill Claude CodeCodex
Skill "skill" from cozy/cozy-ui, covering cozy ui, quick start, what this skill provides, quick reference and components.
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.
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…
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…
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.
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…
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…
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…
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.
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"…
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…
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…
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.
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…
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…
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…
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.
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.
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…
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: