Design & UI

Design & UI skills give your agent taste, critique frameworks, and practical UI implementation knowledge for polished interfaces.

500 Skills in diesem Thema

Was Ihr Agent tun kann

  • 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 diesem Thema

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

steipete/clawdis

npx skills add steipete/clawdis

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

steipete/clawdis

npx skills add steipete/clawdis

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

steipete/clawdis

npx skills add steipete/clawdis

steipete/tmux

Control tmux sessions/panes for interactive CLIs: list, capture output, send keys, paste text, monitor prompts.

steipete/clawdis

npx skills add steipete/clawdis

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

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

mattpocock/skills

npx skills add mattpocock/skills

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

mattpocock/skills

npx skills add mattpocock/skills

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

mattpocock/skills

npx skills add mattpocock/skills

shadcn/shadcn

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. 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

nextlevelbuilder/design-system

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

nextlevelbuilder/ui-ux-pro-max-skill

npx skills add nextlevelbuilder/ui-ux-pro-max-skill

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

lobehub/pr

Create a PR for the current branch (targets `canary` by default), including splitting one cross-layer branch into ordered stacked PRs so a lower layer (db / shared package / server TRPC) merges before its callers (desktop / CLI / UI). Use when the user asks to create / submit a PR, or to split a branch because clients call a server contract that isn't on the trunk yet. Triggers on 'pr', 'create pr', 'submit pr', 'open a PR', 'pull request', 'split this PR', 'stacked PR', 'backend should merge first', '提 PR', '提个 PR', '新建 PR', '拆 PR', '后端先合', '分层合并'.

lobehub/lobehub

npx skills add lobehub/lobehub

lobehub/store-data-structures

LobeHub Zustand store data-shape patterns. Use when designing store state, list/detail splits, normalized maps, reducers, messagesMap, topicsMap, or choosing shared type sources.

lobehub/lobehub

npx skills add lobehub/lobehub

lobehub/microcopy

UI copy and microcopy guidelines. Use for user-facing copy, buttons, errors, empty states, onboarding, i18n wording, translation, or copy improvements in Chinese or English.

lobehub/lobehub

npx skills add lobehub/lobehub

lobehub/modal

LobeHub imperative modal conventions. Use when creating or migrating modals, dialogs, popups, confirm flows, ModalHost wiring, createModal, confirmModal, useModalContext, or base-ui modal APIs.

lobehub/lobehub

npx skills add lobehub/lobehub

lobehub/i18n

LobeHub i18n with react-i18next. Use for user-facing strings, locale keys, namespaces, useTranslation, t(), interpolation, zh-CN/en-US previews, hardcoded UI copy, or pnpm i18n.

lobehub/lobehub

npx skills add lobehub/lobehub

lobehub/react

LobeHub React component conventions. Use when editing TSX UI, choosing base-ui vs @lobehub/ui vs antd, styling with antd-style, routing, desktop variants, layouts, or component state.

lobehub/lobehub

npx skills add lobehub/lobehub

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

bytedance/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".

bytedance/deer-flow

npx skills add bytedance/deer-flow

bytedance/frontend-design

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). Generates creative, polished code and UI design that avoids generic AI aesthetics.

bytedance/deer-flow

npx skills add bytedance/deer-flow

composiohq/theme-factory

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

composiohq/awesome-claude-skills

npx skills add composiohq/awesome-claude-skills

composiohq/webapp-testing

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

composiohq/awesome-claude-skills

npx skills add composiohq/awesome-claude-skills

composiohq/artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

composiohq/awesome-claude-skills

npx skills add composiohq/awesome-claude-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-claude-skills

npx skills add composiohq/awesome-claude-skills

leonxlnx/design-taste-frontend-v1

The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

leonxlnx/taste-skill

npx skills add leonxlnx/taste-skill

leonxlnx/stitch-design-taste

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

leonxlnx/taste-skill

npx skills add leonxlnx/taste-skill

leonxlnx/industrial-brutalist-ui

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.

leonxlnx/taste-skill

npx skills add leonxlnx/taste-skill

leonxlnx/minimalist-ui

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

leonxlnx/taste-skill

npx skills add leonxlnx/taste-skill

leonxlnx/redesign-existing-projects

Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.

leonxlnx/taste-skill

npx skills add leonxlnx/taste-skill

leonxlnx/design-taste-frontend

Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.

leonxlnx/taste-skill

npx skills add leonxlnx/taste-skill

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

sickn33/tailwind-patterns

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/multi-agent-brainstorming

Simulate a structured peer-review process using multiple specialized agents to validate designs, surface hidden assumptions, and identify failure modes before implementation.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/tailwind-design-system

Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/interactive-portfolio

Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/api-patterns

API design principles and decision-making. REST vs GraphQL vs tRPC selection, response formats, versioning, pagination.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/ai-agents-architect

Expert in designing and building autonomous AI agents. Masters tool use, memory systems, planning strategies, and multi-agent orchestration.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/react-ui-patterns

Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/backend-architect

Expert backend architect specializing in scalable API design, microservices architecture, and distributed systems.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/shopify-development

Build Shopify apps, extensions, themes using GraphQL Admin API, Shopify CLI, Polaris UI, and Liquid.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/bash-linux

Bash/Linux terminal patterns. Critical commands, piping, error handling, scripting. Use when working on macOS or Linux systems.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/database-design

Database design principles and decision-making. Schema design, indexing strategy, ORM selection, serverless databases.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/frontend-design

You are a frontend designer-engineer, not a layout generator.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/brainstorming

Use before creative or constructive work (features, architecture, behavior). Transforms vague ideas into validated designs through disciplined reasoning and collaboration.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/ui-ux-pro-max

Comprehensive design guide for web and mobile applications. Use when designing new UI components or pages, choosing color palettes and typography, or reviewing code for UX issues.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/mobile-design

(Mobile-First · Touch-First · Platform-Respectful)

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/software-architecture

Guide for quality focused software architecture. This skill should be used when users want to write code, design architecture, analyze code, in any case that relates to software development.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/prisma-expert

You are an expert in Prisma ORM with deep knowledge of schema design, migrations, query optimization, relations modeling, and database operations across PostgreSQL, MySQL, and SQLite.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

Frequently asked questions

No. They give agents structured frameworks for critique and implementation — human judgment still matters for brand and product decisions.

Auch durchsuchen

Alle Themen