13,093 tagged Design and UX, measured the same way as everything else here.
Browse within: design-system 184agentic-ai 159agentic 153ai-tools 133ai-design 112skills 111byok 106agent 96desktop-app 95coding-agents 93ai-ppt 88ai-ppt-generator 87aippt 87html-ppt 87
Skill Claude CodeCodex
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides…
Power-Components/livewire-powergrid
Skill Claude CodeCodex
Create or update a PowerGrid v7 theme using the Theme abstract class, per-section token methods (layout/header/table/footer/cols/tabs plus filter/editable/toggleable), config themeoverrides, or ArrayTheme.
Skill Claude CodeCodex
Author Nimbalyst Project Canvas boards (.canvas files) — an infinite canvas whose cards are live editors for real workspace files and shared documents, arranged spatially and wired with edges. Use when the user asks for a canvas, a board, a spatial layout of documents or mockups, a flow of screens, or a workspace…
LottieFiles/motion-design-skill
Skill Claude CodeCodex
Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects…
Skill Claude Code
UI mockups, dashboards, advanced interactivity, generative art, simulations, math visualizations, and design system rules for producing rich generateSandboxedUi output.
Skill Claude CodeCodex
End-to-end user research assistant — qualitative and quantitative. Use this skill whenever the user mentions user research, user interviews, discussion guides, interview guides, research plans, qualitative research, quantitative research, user surveys, survey design, usability studies, participant recruitment…
Skill Claude Code needs its repo ✓ vendor
Consolidated accessibility skill entrypoint for WCAG 2.2, ARIA Authoring Practices, cognitive accessibility, Section 508, EN 301 549, design intent verification, and the Accessibility Planner workflow.
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…
https-deeplearning-ai/sc-agent-skills-files
Skill Claude CodeCodex
CraftedWell brand guidelines for presentations and documents. Use this skill whenever creating or styling documents (docx, pdf) or presentations (pptx) for CraftedWell. Apply warm, artisanal aesthetic with chocolate/caramel color palette, Georgia headings, and Arial body text.
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…
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.
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.
Skill Claude CodeCodex
Create professional architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as standalone animated HTML files with SVG graphics, flowing animation effects, a built-in dark/light theme toggle, and one-click export to PNG / JPEG / WebP / SVG / GIF / WebM. Accepts plain-language descriptions or pasted…
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.
Skill Claude CodeCodex
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
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.
Skill Claude CodeCodex
Use and find Hugeicons icons in any framework — React, Vue, Svelte, Angular, React Native, and Flutter. Covers installation, rendering, props, icon naming, and the full icon catalog. Use whenever a project depends on @hugeicons/, @hugeicons-pro/, or the Flutter hugeicons package and you need to add, render, or pick an…
Skill Claude CodeCodex
Generate and render Mermaid diagrams for architecture docs, READMEs, PRs, terminals, chats, and CI as themed SVG, PNG, or ASCII/Unicode art. Use this skill whenever the user provides Mermaid code or .mmd files; asks for a flowchart, sequence/state/class diagram, ERD, XY chart, or architecture/workflow/data-model…
nevertoday/zhongguo-traditional-colors
Skill Codex
Check and repair Chinese traditional color combinations for readability and accessibility. Use when a user asks whether text, buttons, UI states, charts, light mode, dark mode, or traditional color palettes meet contrast and non-color-cue requirements.
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…
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.
Skill Claude CodeCodex
Shared foundations for building reusable data models in PostHog, on either of two stacks: PostHog-native data-warehouse views / materialized views (HogQL, via the view- MCP tools), or an external dbt project (sources.yml + staging/marts + schema tests) run against your own or PostHog's managed warehouse. Read before…
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…
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…
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: