Design
UI/UX direction, visual design, and design systems
thumbnail
by kenneth-liao
Create high-performing thumbnails and cover images for any platform. Uses art:nanobanana for generation, follows proven design patterns for CTR optimization, and integrates with brand guidelines for consistency.
brand-guidelines
by kenneth-liao
Use when users want to define, codify, or update their brand identity and connect it to design systems. Produces a self-contained user-level skill at ~/.claude/skills/{brand-slug}/SKILL.md that enforces brand guidelines whenever visual assets or written content are created.
social-graphic
by kenneth-liao
"Create social media graphics and visual assets for any platform. Handles platform-specific dimensions, safe zones, and design constraints. Integrates with art:nanobanana for image generation and brand guidelines for consistency."
seedance-shot-design
by woodfantasy
Professional-grade virtual film director and prompt engineer for Seedance 2.0 (即梦). Transforms vague ideas into cinematic, production-ready video prompts with Hollywood-caliber shot design. Covers every workflow — text-to-video, image-to-video, multi-modal references, video extension, character swap, dialogue-driven short films, and music-synced edits. Ships with a cinematography dictionary (50+ safe camera-move phrases), a director style library (Villeneuve, Wes Anderson, Shinkai, Wuxia & more), a 3-layer lighting & quality-anchor system that kills the "plastic AI look," and a built-in structured validation checklist so every prompt passes before delivery. Supports bilingual output (Chinese/English) with smart >15 s auto-segmentation for long-form storytelling. Trigger words: Seedance, Shot Design, AI video, storyboard, video prompt, short film, cinematic prompt, 即梦, 视频提示词, 分镜, 视频脚本, AI视频, 短片脚本, 镜头设计, 运镜.
game-architect
by Yuki001
READ this skill when designing or planning any game system architecture — including combat, skills, AI, UI, multiplayer, narrative, or scene systems. Contains paradigm selection guides (DDD / Data-Driven / Prototype), system-specific design references, and mixing strategies. Works as a domain knowledge plugin alongside workflow skills (OpenSpec, SpecKit) or plan mode of an agent.
macos-app-design
by petekp
Use when designing or building native macOS applications with SwiftUI or AppKit. Triggers on menu bar structure, keyboard shortcuts, multi-window behavior, Liquid Glass design system, macOS Tahoe/Sequoia, sidebar navigation, toolbar design, app icons, SF Symbols, or making an app feel like a "good Mac citizen."
design
by howells
Create distinctive, non-generic UI designs with aesthetic direction and ASCII wireframes. Use when asked to "design the UI", "create a layout", "wireframe this", or when building UI that should be memorable rather than generic. Avoids AI slop patterns.
htest
by htest-dev
Use when writing or modifying tests with hTest (htest.dev) — JS-first or HTML-first. Use when a project has htest.dev in devDependencies or uses npx htest to run tests. Use when writing declarative tests as nested object literals, or reftest tables in HTML.
team-create-plan
by mhylle
Team-based implementation planning with adversarial design review. Spawns an Architect, Risk Analyst, and Researcher who explore competing designs and challenge each other before producing a plan. Use when planning complex features, high-stakes changes, or when multiple valid approaches exist. Triggers on "team create plan", "team plan", "deep plan", or when the user explicitly wants team-based planning.
Ask_Why
by maxkura
Use this skill for vague, high-rework planning work that needs iterative human decisions, such as product design, research planning, technical strategy, PRDs, workflow design, agent design, or skill design. Run concise P2A decision rounds, challenge assumptions early, record decisions in PLAN.md, DECISIONS.md, and OPEN_QUESTIONS.md, then produce FINAL_PLAN.md when converged. Do not use for simple factual Q&A, routine coding fixes, direct execution, translation, writing polish, or one-shot requests.
ios-workflow-generator
by neonwatty
Generates, creates, or updates iOS workflow files for testing web apps in Safari on the iOS Simulator. Use this when the user says "generate ios workflows", "create ios workflows", "update ios workflows", or "iterate on ios workflows". Thoroughly explores the web app's codebase to discover all user-facing features, pages, and interactions. Creates comprehensive numbered workflows with substeps that cover the full user experience when viewed on iOS Safari.
free-imagegen
by NimaChu
Fully local free text-to-image skill for OpenClaw and general assets. Generates SVG from prompt, then converts SVG to PNG with local tools only (no online API calls).
neon-ui-skills
by ihlamury
Neon's UI design system. Use when building interfaces inspired by Neon's aesthetic - dark mode, Inter font, 4px grid.
intercom-ui-skills
by ihlamury
Intercom's UI design system. Use when building interfaces inspired by Intercom's aesthetic - light mode, Inter font, 4px grid.
hugging-face-ui-skills
by ihlamury
Hugging Face's UI design system. Use when building interfaces inspired by Hugging Face's aesthetic - dark mode, Inter font, 4px grid.
lattice-ui-skills
by ihlamury
Lattice's UI design system. Use when building interfaces inspired by Lattice's aesthetic - light mode, Inter font, 4px grid.
linear-ui-skills
by ihlamury
Linear's UI design system. Use when building interfaces inspired by Linear's aesthetic - dark mode, Inter font, 4px grid.
stripe
by algoderiv
Stripe payment platform integration guide covering API authentication, webhooks, error handling, testing, Connect platforms/marketplaces, SDKs, and development best practices. This skill should be used when building payment integrations with Stripe, implementing checkout flows, managing subscriptions, handling webhooks, creating Connect platforms, processing payouts, or debugging Stripe API errors.
ai-figure
by hustcc
Generate clean SVG diagrams (flowchart, tree, architecture, sequence, quadrant, gantt, state machine, ER, timeline, swimlane, bubble chart) from a markdown string or a JSON config via fig(). Auto-layout, zero coordinates needed. Works in browser and Node.js.
mnemonica-core
by wentout
Instance inheritance system for JavaScript/TypeScript using prototype chains. Use when the user mentions mnemonica, define(), prototype inheritance, TypeRegistry, lookupTyped, tactica, instance inheritance, or when working with the mnemonica core library. Covers: define() patterns, type-safe lookup with tactica, Proxy-based architecture, hook system, async constructors, strict chain validation, and 100% test coverage requirements.
request-analyzer
by smallnest
Proactively analyze user requests at the start of conversations to determine task type, assess prompt quality, and intelligently recommend which skills to activate. Should activate for ALL user requests to ensure optimal workflow. Evaluates clarity, specificity, and completeness to suggest prompt-optimizer when needed. Identifies UI design tasks for ui-analyzer and component requests for react-component-generator. Acts as intelligent skill coordinator.
frontend-design
by b-open-io
Create distinctive, bold UI designs that avoid generic AI aesthetics. This skill should be used when users want frontend components with strong visual identity, creative typography, intentional color palettes, and production-grade animations - specifically to avoid the bland, safe, homogeneous "AI slop" that plagues most generated interfaces.
ui-ux-pro-max
by JochenYang
"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples."
daub-ui
by sliday
Use when building UI with DAUB, the considered CSS component library from daub.dev. Trigger phrases: "daub", "daub.dev", "considered components", "db- components", "tactile UI kit"