Design
UI/UX direction, visual design, and design systems
product-analysis-styling
by tara-shopos
Analyze product images to extract attributes (category, style, materials, colors, design details) and generate appropriate styling recommendations for photography. Use when preparing product shoots, fashion photography, or creating styled product compositions.
brand-consistent-visuals
by tara-shopos
Generate professional brand visualizations that maintain consistent brand identity across all creative assets using multi-step AI analysis and brand guidelines.
chart-designer
by bluewaves-creations
Brand-consistent chart design system for matplotlib. Provides load_theme(), theme.apply(), and named figure sizes — brand guardrails that get out of the way. Use when the user asks to create charts, graphs, plots, data visualizations, or any visual representation of data. Standard matplotlib code works as-is; the theme handles colors, typography, and sizing. Pairs with brand-* kits for branded output and pdf-factory for PDF embedding.
design-consistency-auditor
by fefogarcia
Audit and maintain design system consistency, UX/UI patterns, color palettes, and design best practices across frontend applications
ux-design-tips
by dereknex
Use when asked for UX strategy or behavior guidance on landing pages, onboarding, pricing, CTAs, social proof, personalization, login, permissions, or brand memorability.
managing-plans
by Git-Fg
"Orchestrates project plan state management and execution. Manages ROADMAP.md state tracking, task dispatch, phase transitions, and handoff protocols. PROACTIVELY Use when managing project plans, executing phases, or coordinating task workflows. MUST Use for all plan-related operations (creation, modification, execution). Do not use for architecture design, system analysis, or creating new projects without a plan → see designing-architecture skill."
forge-ux
by fwehrling
FORGE UX Agent — Generates UX design, wireframes, design system, and accessibility guidelines. Usage: /forge-ux
brand-analyzer
by nguyendinhquocx
This skill should be used when the user requests brand analysis, brand guidelines creation, brand audits, or establishing brand identity and consistency standards. It provides comprehensive frameworks for analyzing brand elements and creating actionable brand guidelines based on requirements.
tui-review
by gpu-cli
Critically review terminal user interfaces for UX quality, responsiveness, visual design, and interactivity. Use when asked to "review my TUI", "test my TUI UX", "audit my terminal UI", "check TUI responsiveness", "review TUI keybindings", "check interactivity", or any request to evaluate the user experience quality of a ratatui/crossterm/ncurses-based terminal application. Launches the TUI in tmux, systematically tests 10 dimensions (responsiveness, input conflicts, visual clarity, navigation, feedback loops, error states, layout, keyboard design, permission flows, visual design & color), and produces a graded report with screenshots and specific findings. Benchmarks against Claude Code, OpenCode, and Codex — the three best-in-class AI terminal UIs.
drawio
by hb12devtn
Generate draw.io diagrams from user requests using Python code execution to produce clickable URLs that open in the draw.io web editor. Use this skill whenever the user asks to create any kind of diagram, flowchart, architecture diagram, org chart, sequence diagram, ERD, mind map, network topology, wireframe, UML diagram, BPMN, state machine, Gantt chart, or any other visual diagram. Also trigger when the user says "draw", "diagram", "chart", "visualize", "flowchart", "architecture", "draw.io", "mermaid diagram", or requests any visual representation of a process, system, or hierarchy. This skill generates privacy-friendly draw.io URLs where all data stays client-side via hash fragments.
web-interface-guidelines
by dereknex
Use when designing, reviewing, or implementing web UIs and you need concrete MUST/SHOULD/NEVER rules for accessibility, interaction patterns, forms, layout, animation, performance, content, or visual design decisions.
figma-to-jira
by digitalspeed
Orchestrates Jira ticket creation from Figma designs using Atomic Design principles. Use this when initializing a project or syncing design specs to Jira for development.
Puppet Mockup Generator
by mmcmedia
Generated arrows are license-free (Nano Banana = we own it)
remotion-synced-video
by xdrshjr
Create synchronized videos with Remotion, TTS, and real web images - professional-grade videos with real imagery from Google Images, Bing, and Unsplash, perfect audio sync, rich content support and polished visual design.
frontend-expert
by kcinay055679
You are a Senior Front-End Developer and an Expert in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS and modern UI/UX frameworks (e.g., TailwindCSS, Shadcn, Radix). You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.
new-and-imported-projects
by WebSmartTeam
Initialise new or imported projects. New projects get a private git repo created in the website/app subfolder. Imported projects are cloned into that subfolder. Project root contains Claude config (CLAUDE.md, STYLE_GUIDE.md) - git repo lives in subfolder only. Triggers: new project, import project, clone project, take over project, setup project, initialise project.
web-design-guidelines
by cybertechajju
Advanced web design patterns with AI-powered suggestions
google-stitch-ai
by dmonteroh
"Create DESIGN.md summaries from Google Stitch projects or offline assets for UI design workflows, and refine Stitch-ready UI prompts using extracted design tokens."
remotion-synced-video
by xdrshjr
Create synchronized videos with Remotion, TTS, and Unsplash images - professional-grade videos with real imagery, perfect audio sync, rich content support and polished visual design.
spec-interview
by huminglong
深度访谈以完善技术规格或用户指定的文档说明书。当存在 plan.md 或者用户指定文档需要通过系统性提问来完善需求时使用，涵盖技术实现、UI/UX设计、边缘情况、风险考量、权衡取舍和架构决策。触发词包括"帮我完善这个plan"、"问我关于项目的问题"，或当草稿规格需要全面细化时。
macos-hig-designer
by designnotdrum
Design native macOS apps following Apple's Human Interface Guidelines and Liquid Glass design system. Use when building SwiftUI/AppKit macOS apps, validating designs, or implementing macOS-specific patterns.
frontend-design
by dereknex
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. Generates creative, polished code that avoids generic AI aesthetics.
human-interface-guidelines
by zanwei
Apply Apple's Human Interface Guidelines (HIG) to design, review, and specify UI/UX for iOS, iPadOS, macOS, watchOS, tvOS, and visionOS. Use when choosing platform-native patterns, reviewing a design against HIG, converting PRD to HIG-aligned UI specs, or finding the right HIG page quickly.
vercel-design-guidelines
by tylergibbs1
Check web interfaces against Vercel's design guidelines. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", "check my site against best practices", or "apply Vercel design guidelines".