UI/UX, 로고, 슬라이드, 이미지 생성 (7.3천건)
Minimal / clean / Linear / Notion / Vercel / whitespace-heavy UIs. Locked knobs: CRAFT=8, MOTION=3, DENSITY=2. Monochrome + one accent, Inter/Geist, hairline borders over shadows. Trigger on: minimal, clean, Linear-like, Notion-like, Vercel-like, whitespace-heavy.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Reduction pass — cuts content, structure, visuals, and dead code that doesn't answer a user question or drive an action, respecting CRAFT_LEVEL. Use when the UI feels cluttered, has too many CTAs, walls of text, or decorative noise, or when the user says "simplify this" / "it feels too busy". Invoke when the user asks for distill on their UI, or mentions 'distill' alongside design / UI / frontend work.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Refactoring pass — extracts repeated Tailwind class combos and markup into components, and lifts magic values into design tokens. Use when the codebase has obvious duplication, hardcoded hex values or pixel sizes, or when the user says "clean this up" / "extract components" / "tokenize styles". Invoke when the user asks for extract on their UI, or mentions 'extract' alongside design / UI / frontend work.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Front door. Reads the current project (framework, tokens, brief, spec, harness) and reports what ui-craft can do right now, then routes you to the right next step. Run this first if you're new or unsure where to begin. No code changes. Invoke when the user asks for start on their UI, or mentions 'start' alongside design / UI / frontend work.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Responsive layout pass covering breakpoints, touch targets, safe areas, and fluid type. Use when the UI has layout or touch issues on mobile/tablet, when adding a new screen that hasn't been tested across viewports, or when the user says "make it responsive" / "fix mobile layout". Invoke when the user asks for adapt on their UI, or mentions 'adapt' alongside design / UI / frontend work.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Tone down visual noise — lowers variance and motion, simplifies layout and color weight, keeps hierarchy clear. Use when the UI feels loud, busy, or over-designed, or when the user says "quieter", "more restrained", "simpler", or "tone it down". Invoke when the user asks for quieter on their UI, or mentions 'quieter' alongside design / UI / frontend work.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Domain-Driven Design architecture for claude-flow v3. Implements modular, bounded context architecture with clean separation of concerns and microkernel pattern.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Draft Project Manual specification sections from accepted project requirements using CSI MasterFormat identities, three-part sections and review flags. Use for design requirements; use product-cut-sheet for source-faithful product entries and epd-to-spec for EPD requirements.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Prevents 8 documented errors. Use when initializing React projects with Tailwind v4, or fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, v3 migration issues.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
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".
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Propose a new change with all artifacts generated in one step. Use when the user wants to quickly describe what they want to build and get a complete proposal with design, specs, and tasks ready for implementation.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
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.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Build and maintain Core UI with the ReUI registry and authenticated ReUI MCP. Use for new pages/sections/features, ReUI components/examples/Pro blocks, @reui installs, REUI_LICENSE_KEY setup, and ReUI API or documentation research. Preserve exact base-maia/Base UI, packages/ui ownership, existing shared tables, and Core tokens; use live APIs and worked examples.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
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".
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
A relentless interview to sharpen a plan or design.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right. Only runs when explicitly invoked; it does not trigger on its own.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
This skill is for interface design — dashboards, admin panels, apps, tools, and interactive products. NOT for marketing design (landing pages, marketing sites, campaigns).
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Reviews your work across multiple categories like UI, typography, layout, color, writing and accessibility and gives you a detailed analysis of the findings.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.