13,362 tagged Design and UX, measured the same way as everything else here.
Browse within: design-system 162agentic-ai 157agentic 152ai-tools 130skills 128ai-design 112byok 106agent 102coding-agents 93desktop-app 93ai-ppt 88ai-ppt-generator 87aippt 87html-ppt 87
Skill Claude CodeCodex
Frontend design and production engineering orchestrator that inventories projects, scales design depth, presents review artifacts, locks executable contracts, implements accessible responsive interfaces, and verifies interactions, visual regressions, and performance. Use when the user invokes design-guide…
shihchengwei-lab/separation-and-audit-claude-code
Skill Claude CodeCodex
A design review guide for words users or players can see, such as interface labels, system messages, errors, stories, and dialogue. It checks those words against a project's design principles and forbidden patterns.
Naimehossein77/claude-flutter-ui-skills
Skill Claude Code
Pixel-perfect Flutter UI — smooth animations, GoRouter navigation, back/forth logic, Riverpod + Provider state management. Use when building Flutter screens, navigation flows, animations, or state-connected widgets.
yasirshabbirservices/Bricks-Builder-MCP
Skill Claude Code
Use when developing for Bricks Builder (WordPress): custom elements, controls, query loops, dynamic data tags, templates/element trees, Style Manager (global variables, color palettes, theme styles, breakpoints), custom fonts, global classes, interactions, popups, query filters, or debugging Bricks rendering/CSS…
sergekostenchuk/mouse-trail-masking-reveal
Skill Codex
Build, repair, tune, and validate interactive cursor-trail mask reveal hero effects in frontend projects. Use when implementing canvas-based base/reveal compositing, soft radial cursor masks, fading cursor trails, reveal debug controls, full-screen hero scenes without site text, or browser smoke checks for cursor…
Skill Claude CodeCodex
A workflow for making shareable materials such as slide decks, posters, code screenshots, infographics, explainer videos, and GIFs for a specific audience.
alexconner-79/high-plains-drifter
Skill Claude CodeCodex
Align a design to your real Storybook components instead of reconstructing it. Use when turning a Figma frame into React built from an existing component library (Build mode), or when pulling scrappy exploratory code into line with the library once a direction feels right (Align mode). Triggers include "build this…
Skill Claude CodeCodex
Generate and edit diagrams with the mcp-diagram-generator MCP server. Use this skill for new diagrams, existing .drawio/.mmd/.excalidraw edits, network topology, architecture, flowchart, swimlane, sequence, class, ER, and Excalidraw whiteboard work. Always use this skill when the user asks to draw, generate, revise…
Skill Claude Code
Analyze the fonts in fonts/ and set up this repo for proofing. Runs the containerized fontTools introspection, writes a human-readable font summary into CLAUDE.md (and machine-precise data into fontinfo.json), then interviews the user about the proof they want — page size, orientation, colors, header/footer, margins…
Skill Claude CodeCodex
After a batch of 2+ user-facing UI changes, produce a before/after verification report to sign off each change while reviewing locally. Invoke on request ('before/after report', 'verification table', 'screenshot diff') or proactively when a finished change set touches ≥2 distinct UI surfaces/behaviors. Captures…
Skill Claude Code
Render a proposed UI change or set of design concepts as real HTML in the project's own design system, serve it locally, and loop on the operator's clicked decisions and inline annotations until they approve. The visual alternative to describing UI in a wall of terminal text or a markdown plan. Use when the operator…
Skill Claude CodeCodex
Use SideSight for screenshots, images, error screenshots, UI mockups, architecture diagrams, charts, OCR, visual comparison, and videos when the host coding model is text-only. Route each visual task to the matching npx sidesight CLI command.
Skill Claude Code
A UX strategy and diagnosis guide for planning how a product should work and how users move through it. UX means the user’s experience of using a product; the guide produces strategy documents rather than visual mock-ups or HTML.
Skill Claude CodeCodex
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
marcinfinitesimal533/Claude-skills-for-Computational-Designers
Skill Claude Code
Panelization strategies, surface rationalization, attractor-based patterning, double-skin facades, kinetic and responsive facades, environmental performance facades, and fabrication-aware facade design for AEC.
Skill Claude Code
Interactive motion brief. Six-section survey (page-load, scroll, text, blocks, micro-interactions, intensity) driven by the user's references from references/animation/ and references/motion/. Outputs brief/animation.md and appends motion tokens to DESIGN-LOCK §5. /build enforces the resulting animations as required…
Skill Claude CodeCodex
Use when building or styling any web UI — landing pages, hero sections, dashboards, components, marketing sites — or when the user asks for beautiful, animated, or polished design, UI animations, animated backgrounds, gradients, icons, smooth scrolling, or design inspiration. Also use before reaching for the web to…
Skill Claude CodeCodex
Integrate with Figma API for design automation and code generation. Use when extracting design tokens, generating React/CSS code from Figma components, syncing design systems, building Figma plugins, or automating design-to-code workflows. Triggers on Figma API, design tokens, Figma plugin, design-to-code, Figma…
Skill Claude Code
Use when building, generating, or reviewing UI for a website, web app, or mobile app to make it look intentionally designed rather than AI-generated. Removes the common AI/template "tells" (default fonts like Inter/Geist, indigo and purple-blue gradients, cream backgrounds, grey low-contrast text, pill/eyebrow over…
Skill Claude Code
Full UX/UI design review panel — 6 opinionated design leaders (Jony Ive, Amir Salihefendic, Jesse Patel, Joe Gebbia, Katie Dill, Notion Designer) critique your design with brutal honesty, deliberate together, score on 5 principles, and implement fixes. Works with .pen files, HTML/CSS/JS projects, and Figma.
kumbajirajkumar123/frontend-design
Skill Claude CodeCodex
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI).…
deveshpunjabi/3d-website-skill
Skill Claude CodeCodex
Expert skill for designing, building, and deploying modern premium websites with advanced animations and 3D interactive experiences using Three.js, React Three Fiber, GSAP, and Framer Motion. Use this skill whenever the user wants to build a website with 3D elements, create an immersive web experience, add interactive…
Skill Codex
Transform existing web application interfaces into Windows 98, Windows XP, Windows 7, or Japanese freeware 2000s desktop styles while preserving behavior. Use for repository-level retro UI conversions, not for greenfield mockups or bitmap-only artwork.
GDvega/super-android-kotlin-firebase-skill
Skill Claude CodeCodex
Use for Android and Compose UI design decisions that must adapt to app domain, target users, data sensitivity, environment, accessibility, performance and platform context after build/tests pass.
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: