Are Tailwind-specific skills included?

Yes. Many skills cover Tailwind CSS, NativeWind, and utility-first styling patterns.

Can these skills review existing UI code?

Several skills focus on design review and UX audit workflows rather than greenfield creation.

Do they work for mobile UI too?

Some overlap with the Mobile topic. Browse both for native-specific and web UI coverage.

Design & UI Agent Skills — Tailwind, shadcn & UX

What your agent can do

Apply design systems and consistent visual language
Implement Tailwind and shadcn/ui patterns correctly
Critique and improve UI with structured design review
Handle typography, spacing, and color systems
Build accessible interfaces meeting WCAG guidelines
Create responsive layouts with mobile-first thinking

Skills in this topic

Skill	Description	Source
obra/brainstorming	You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.	obra/superpowers
n8n-io/n8n	Fair-code workflow automation platform with native AI capabilities. Combine visual building with custom code, self-host or cloud, 400+ integrations.	n8n-io/n8n
canvas-design	Design generation and iteration in canvas-based environments	anthropics/skills
frontend-design	Comprehensive frontend design patterns and visual polish guidance	anthropics/skills
shadcn-ui/shadcn	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 "shadcn init", "create an app with --preset", or "switch to --preset".	shadcn-ui/ui
shadcn-ui/ui	A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.	shadcn-ui/ui
browser-use/cloud	Documentation reference for using Browser Use Cloud — the hosted API and SDK for browser automation. Use this skill whenever the user needs help with the Cloud REST API (v2 or v3), browser-use-sdk (Python or TypeScript), X-Browser-Use-API-Key authentication, cloud sessions, browser profiles, profile sync, CDP WebSocket connections, stealth browsers, residential proxies, CAPTCHA handling, webhooks, workspaces, skills marketplace, liveUrl streaming, pricing, or integration patterns (chat UI, subagent, adding browser tools to existing agents). Also trigger for questions about n8n/Make/Zapier integration, Playwright/ Puppeteer/Selenium on cloud infrastructure, or 1Password vault integration. Do NOT use this for the open-source Python library (Agent, Browser, Tools config) — use the open-source skill instead.	browser-use/browser-use
VoltAgent/awesome-design-md	A collection of DESIGN.md files inspired by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.	VoltAgent/awesome-design-md
santifer/career-ops	AI-powered job search system built on Claude Code. 14 skill modes, Go dashboard, PDF generation, batch processing.	santifer/career-ops
agno-agi/agno	Build, run, and manage agent platforms.	agno-agi/agno
addyosmani/api-and-interface-design	Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.	addyosmani/agent-skills
addyosmani/frontend-ui-engineering	Builds production-quality UIs. Use when building or modifying user-facing interfaces. Use when creating components, implementing layouts, managing state, or when the output needs to look and feel production-quality rather than AI-generated.	addyosmani/agent-skills
vercel-labs/web-design-guidelines	Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".	vercel-labs/agent-skills
volcengine/OpenViking	OpenViking is an open-source context database designed specifically for AI Agents(such as openclaw). OpenViking unifies the management of context (memory, resources, and skills) that Agents need through a file system paradigm, enabling hierarchical context delivery and self-evolving.	volcengine/OpenViking
iOfficeAI/AionUi	Free, local, open-source 24/7 Cowork app for OpenClaw, Hermes Agent, Claude Code, Codex, OpenCode, Gemini CLI and 20+ more CLI \| Customize your assistants \| Star if you like it!	iOfficeAI/AionUi
manaflow-ai/cmux	Ghostty-based macOS terminal with vertical tabs and notifications for AI coding agents	manaflow-ai/cmux
Leonxlnx/taste-skill	Taste-Skill (High-Agency Frontend) - gives your AI good taste. stops the AI from generating boring, generic, "slop"	Leonxlnx/taste-skill
ComposioHQ/google-maps-automation-le-maps-automation	Automate Google Maps tasks via Rube MCP (Composio): geocode addresses, search places, get directions, compute route matrices, reverse geocode, autocomplete, get place details. Always search tools first for current schemas.	ComposioHQ/awesome-codex-skills
ComposioHQ/fluxguard-automation	Automate Fluxguard tasks via Rube MCP (Composio). Always search tools first for current schemas.	ComposioHQ/awesome-codex-skills
ComposioHQ/canvas-design	Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.	ComposioHQ/awesome-codex-skills
ComposioHQ/brand-guidelines	Applies OpenAI's brand colors and typography to any artifact that should match the Codex/OpenAI look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.	ComposioHQ/awesome-codex-skills
ComposioHQ/skill-creator	Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Codex's capabilities with specialized knowledge, workflows, or tool integrations.	ComposioHQ/awesome-codex-skills
ComposioHQ/mcp-builder	Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).	ComposioHQ/awesome-codex-skills
ComposioHQ/influxdb-cloud-automation	Automate Influxdb Cloud tasks via Rube MCP (Composio). Always search tools first for current schemas.	ComposioHQ/awesome-codex-skills
ComposioHQ/GroqCloud-Automation	Automate AI inference, chat completions, audio translation, and TTS voice management through GroqCloud's high-performance API via Composio	ComposioHQ/awesome-codex-skills
EverMind-AI/EverOS	Build, evaluate, and integrate long-term memory for self-evolving agents.	EverMind-AI/EverOS
OpenCoworkAI/open-codesign	Open-source Claude Design alternative. One-click import your Claude Code / Codex API key. Prompt → prototype / slides / PDF. Multi-model (Claude, GPT, Gemini, Kimi, GLM, Ollama). BYOK, local-first, MIT.	OpenCoworkAI/open-codesign
ConardLi/garden-skills	ConardLi's open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.	ConardLi/garden-skills
antfu/vitepress	VitePress static site generator powered by Vite and Vue. Use when building documentation sites, configuring themes, or writing Markdown with Vue components.	antfu/skills
antfu/unocss	UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.	antfu/skills
antfu/web-design-guidelines	Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".	antfu/skills
antfu/vueuse-functions	Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.	antfu/skills
antfu/nuxt	Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid rendering.	antfu/skills
Q00/ouroboros	Agent OS: Stop prompting. Start specifying.	Q00/ouroboros
OpenSenseNova/SenseNova-Skills	Modular SenseNova skills for building AI-powered office assistants and productivity workflows	OpenSenseNova/SenseNova-Skills
Manavarya09/design-extract	Extract any website's complete design system with one command. DTCG tokens, semantic+primitive+composite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20+.	Manavarya09/design-extract
Nutlope/hallmark	Anti-AI-slop design skill for Claude Code, Cursor, and Codex.	Nutlope/hallmark
xpf0000/FlyEnv	Lightweight Native Local Dev Toolbox for Windows, macOS & Linux. Run Hermes Agent/OpenClaw/n8n/Apache/Nginx/Caddy/Tomcat/PHP/Node.js/Bun/Deno/Python/Java/Go/Ruby/Perl/Rust/Erlang/MySQL/PostgreSQL/MariaDB/MongoDB/Redis/RabbitMQ/Mailpit/Elasticsearch without Docker. The faster, modular alternative to XAMPP/MAMP/Laravel Herd/NVM/FNM/PHPStudy...	xpf0000/FlyEnv
glincker/thesvg	6,100+ brand SVG icons for developers. Tree-shakeable, typed, open source. npm i thesvg	glincker/thesvg
ningzimu/codex-ppt-skill	Codex skill for generating image-based PowerPoint decks with gpt-image-2	ningzimu/codex-ppt-skill
SnailSploit/Claude-Red	claude-red is a curated library of offensive security skills designed for the Claude skills system. Each skill is a structured SKILL.md file that primes Claude with expert-level methodology for a specific attack surface — from SQLi to shellcode, EDR evasion to exploit development.	SnailSploit/Claude-Red
DenisSergeevitch/agents-best-practices	Provider-neutral Agent Skill for Codex, Claude Code, and agentic harness design.	DenisSergeevitch/agents-best-practices
cloudflare/skills	Skills for teaching agents how to build on Cloudflare.	cloudflare/skills
AvdLee/Swift-Concurrency-Agent-Skill	Add expert Swift Concurrency guidance to your AI coding tool (Agent Skills open format): safe concurrency, performance optimization, and Swift 6 migration.	AvdLee/Swift-Concurrency-Agent-Skill
bergside/awesome-design-skills	List of 67 awesome DESIGN.md and SKILL.md design skill files for agentic tools like Claude Design, Google Stitch, Codex, Cursor, and other AI tools	bergside/awesome-design-skills
greyhaven-ai/autocontext	a recursive self-improving harness designed to help your agents (and future iterations of those agents) succeed on any task	greyhaven-ai/autocontext
skalesapp/skales	Your personal AI desktop agent for Windows, macOS, Linux & Android. Set a goal, it works on its own. Teams (pair two desktops, agents + humans), Agent2Agent, Workflows, Codework, multi-agent orgs, desktop + browser automation. 15+ AI providers, BYOK. No Docker, no terminal. Agent Skills (SKILL.md). Migration importer. Recurring autonomous tasks.	skalesapp/skales
conorluddy/ios-simulator-skill	An IOS Simulator Skill for ClaudeCode. Use it to optimise Claude's ability to build, run and interact with your apps. I mainly use it as an xcodebuild wrapper to save context.	conorluddy/ios-simulator-skill
playwright-ci-caching	Cache Playwright browser binaries in CI/CD pipelines (GitHub Actions, Azure DevOps) to avoid 1-2 minute download overhead on every build.	Aaronontheweb/dotnet-skills
dotnet-devcert-trust	Diagnose and fix .NET HTTPS dev certificate trust issues on Linux. Covers the full certificate lifecycle from generation to system CA bundle inclusion, with distro-specific guidance for Ubuntu, Fedora, Arch, and WSL2.	Aaronontheweb/dotnet-skills

obra/brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

obra/superpowers

npx skills add obra/superpowers

n8n-io/n8n

Fair-code workflow automation platform with native AI capabilities. Combine visual building with custom code, self-host or cloud, 400+ integrations.

n8n-io/n8n

npx skills add n8n-io/n8n

canvas-design

Design generation and iteration in canvas-based environments

anthropics/skills

npx skills add anthropics/skills

frontend-design

Comprehensive frontend design patterns and visual polish guidance

anthropics/skills

npx skills add anthropics/skills

shadcn-ui/shadcn

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 "shadcn init", "create an app with --preset", or "switch to --preset".

shadcn-ui/ui

npx skills add shadcn-ui/ui

shadcn-ui/ui

A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.

shadcn-ui/ui

npx skills add shadcn-ui/ui

browser-use/cloud

Documentation reference for using Browser Use Cloud — the hosted API and SDK for browser automation. Use this skill whenever the user needs help with the Cloud REST API (v2 or v3), browser-use-sdk (Python or TypeScript), X-Browser-Use-API-Key authentication, cloud sessions, browser profiles, profile sync, CDP WebSocket connections, stealth browsers, residential proxies, CAPTCHA handling, webhooks, workspaces, skills marketplace, liveUrl streaming, pricing, or integration patterns (chat UI, subagent, adding browser tools to existing agents). Also trigger for questions about n8n/Make/Zapier integration, Playwright/ Puppeteer/Selenium on cloud infrastructure, or 1Password vault integration. Do NOT use this for the open-source Python library (Agent, Browser, Tools config) — use the open-source skill instead.

browser-use/browser-use

npx skills add browser-use/browser-use

VoltAgent/awesome-design-md

A collection of DESIGN.md files inspired by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.

VoltAgent/awesome-design-md

npx skills add VoltAgent/awesome-design-md

santifer/career-ops

AI-powered job search system built on Claude Code. 14 skill modes, Go dashboard, PDF generation, batch processing.

santifer/career-ops

npx skills add santifer/career-ops

agno-agi/agno

Build, run, and manage agent platforms.

agno-agi/agno

npx skills add agno-agi/agno

addyosmani/api-and-interface-design

Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.

addyosmani/agent-skills

npx skills add addyosmani/agent-skills

addyosmani/frontend-ui-engineering

Builds production-quality UIs. Use when building or modifying user-facing interfaces. Use when creating components, implementing layouts, managing state, or when the output needs to look and feel production-quality rather than AI-generated.

addyosmani/agent-skills

npx skills add addyosmani/agent-skills

vercel-labs/web-design-guidelines

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

vercel-labs/agent-skills

npx skills add vercel-labs/agent-skills

volcengine/OpenViking

OpenViking is an open-source context database designed specifically for AI Agents(such as openclaw). OpenViking unifies the management of context (memory, resources, and skills) that Agents need through a file system paradigm, enabling hierarchical context delivery and self-evolving.

volcengine/OpenViking

npx skills add volcengine/OpenViking

iOfficeAI/AionUi

Free, local, open-source 24/7 Cowork app for OpenClaw, Hermes Agent, Claude Code, Codex, OpenCode, Gemini CLI and 20+ more CLI | Customize your assistants | Star if you like it!

iOfficeAI/AionUi

npx skills add iOfficeAI/AionUi

manaflow-ai/cmux

Ghostty-based macOS terminal with vertical tabs and notifications for AI coding agents

manaflow-ai/cmux

npx skills add manaflow-ai/cmux

Leonxlnx/taste-skill

Taste-Skill (High-Agency Frontend) - gives your AI good taste. stops the AI from generating boring, generic, "slop"

Leonxlnx/taste-skill

npx skills add Leonxlnx/taste-skill

ComposioHQ/google-maps-automation-le-maps-automation

Automate Google Maps tasks via Rube MCP (Composio): geocode addresses, search places, get directions, compute route matrices, reverse geocode, autocomplete, get place details. Always search tools first for current schemas.

ComposioHQ/awesome-codex-skills