Design
UI/UX direction, visual design, and design systems
frontend-design
by derKlinke
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
ui-design-system
by hieutrtr
Generates consistent UI components, layouts, and design tokens following a design system. Enforces spacing, color, typography, and accessibility standards across React/TypeScript projects. Use when creating new UI components, building page layouts, choosing colors or typography, setting up design tokens, or reviewing UI code for design consistency. Covers 8pt spacing grid, Tailwind CSS token usage, shadcn/ui primitives, WCAG 2.1 AA compliance, responsive breakpoints, semantic HTML structure, and TypeScript component interfaces. Does NOT cover backend implementation (use python-backend-expert), testing (use react-testing-patterns), or deployment (use deployment-pipeline).
dashboard-ui
by macaron-software
"Next.js 14 dashboard components for Finary-style wealth management. Dark theme design system extracted from Finary production CSS. Covers net worth, portfolio, budget views with Recharts, TanStack Query, Zustand, Tailwind CSS."
Anthropic-brand-guidelines
by Jst-Well-Dan
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
mobbin-ux
by rohunvora
Research-driven UI/UX improvement using Mobbin. Use when user explicitly requests design pattern research ("use Mobbin", "research design patterns", "find UX patterns for X"). Requires Mobbin account and browser automation (claude-in-chrome MCP). Searches Mobbin for relevant UI patterns, extracts design principles, generates a spec document for approval, then implements. NOT for general UI work—only when user wants research-backed design.
html-style
by rohunvora
Apply opinionated styling to barebones HTML. Use when user has plain/unstyled HTML and wants to apply consistent visual styling. Triggers: style this HTML, apply styling, make this look good, /html-style, or when user shares HTML that needs CSS. Transforms tables, lists, status indicators, buttons, and layouts into a cohesive design system.
ai-loading-ux
by rohunvora
Design AI loading, thinking, and progress indicator UX. Use when explicitly asked to improve AI waiting states, add thinking indicators, or design loading UX for AI interfaces. Covers reasoning display (chain-of-thought), progress steps, streaming states, and the "elevator mirror effect" for reducing perceived wait time.
ui-audit
by tommygeoco
"AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco."
design-system-foundations
by KentoShimizu
"Define scalable design-system foundations with clear ownership and adoption boundaries. Use when multiple teams need shared component standards, foundational patterns, and ownership rules to deliver consistent UI across products; do not use for backend data-model or deployment pipeline decisions."
frontend-design
by truongnat
God-Tier UI/UX Engineering skill for world-class, agency-level interfaces. Transcends AI-generated aesthetics by enforcing monochromatic sophistication, SVG grain texturing, Lucide-integrated iconography, and performance-first motion physics. This is the "Final Boss" of frontend engineering standards.
a4-report
by Pysamlam
Generate professional A4 paper style consulting reports and analysis documents in McKinsey/BCG/Bain aesthetic. Creates print-optimized HTML reports that look like consulting deliverables. Unique Features: - A4 paper format (210mm × 297mm), print-to-PDF optimized - McKinsey/BCG/Bain consulting firm visual styles - CSS-based charts without external dependencies - Professional report structure: Executive Summary → Findings → Analysis → Recommendations When to use this skill (Triggers): - "写报告" / "生成报告" / "帮我写一份报告" - "麦肯锡风格" / "BCG风格" / "贝恩风格" / "咨询风格" - "A4报告" / "打印报告" / "PDF报告" - "分析报告" / "市场分析报告" / "竞品分析报告" / "战略报告" - "consulting report" / "A4 report" / "professional report" / "business report" - "帮我写一份...的分析报告" (当需要专业格式的报告时) NOT this skill (use analysis-finrpt instead): - Financial report parsing/visualization (财报解读) → use analysis-finrpt - "财报分析" / "10-K" / "10-Q" → use analysis-finrpt Examples: - "帮我写一份中国新能源汽车市场分析报告" - "生成一个麦肯锡风格的战略报告" - "Create an A4 format consulting report for market entry strategy"
flutter-ai-ui-skill
by rantlieu-blip
A master-level Flutter UI/UX design skill that equips AI coding assistants with curated design intelligence, colour palettes, typography pairings, animation patterns, component blueprints and actionable checklists for building beautiful, accessible, production-ready Flutter applications. Covers Material 3, Cupertino, adaptive layouts, animations, theming, state management integration, accessibility and performance optimization.
design-review
by KentoShimizu
"Run structured design reviews that produce actionable findings and clear approval decisions. Use when a design artifact needs formal review for usability, accessibility, consistency, and implementation readiness before handoff or approval; do not use for backend data-model or deployment pipeline decisions."
css-tokens
by schalkneethling
Provides foundational CSS design tokens (custom properties) for typography, spacing, colors, borders, z-index, and transitions. Use when setting up a base token system for a web project.
bash-style-guide
by KentoShimizu
"Style, review, and refactoring standards for Bash shell scripting. Trigger when .sh files, files with #!/usr/bin/env bash or #!/bin/bash, or CI workflow blocks with shell: bash are created, modified, or reviewed and Bash-specific quality controls (quoting safety, error handling, portability, readability) must be enforced. Do not use for generic POSIX sh, PowerShell, or language-specific application style rules. In multi-language pull requests, run together with other applicable *-style-guide skills."
design-tokens
by KentoShimizu
"Design token architecture workflow for semantic, scalable, implementation-ready token systems. Use when multiple screens or products need consistent color/type/spacing/motion decisions and token definitions before component implementation; do not use for backend data-model or deployment pipeline decisions."
visual-testing
by serkan-ozal
Visual testing, UI verification, and design comparison using screenshots and Figma integration. Use when the user wants to verify UI appearance, compare with Figma designs, test responsive layouts, check for visual regressions, or validate design implementation.
Brand Voice Coach
by jmsktm
Maintain consistent brand voice across all marketing communications
terminal-ui-design-system
by chyinan
Create terminal-inspired UI interfaces with macOS-style window decorations, monospace typography, and a warm color palette. Use this skill when building developer tools, code marketplaces, technical documentation sites, or any interface that benefits from a terminal/command-line aesthetic. Provides complete design system specifications including color palette, typography, spacing, components, and CSS implementation details.
design-sprint
by wdavidturner
Use when asked to "run a design sprint", "5-day sprint", "prototype in a week", "test ideas before building", or "Jake Knapp sprint". Helps teams go from problem to tested prototype in five days. The Design Sprint framework (created by Jake Knapp at Google Ventures) compresses months of work into one focused week.
dan-koe
by kluless13
Channel Dan Koe's philosophy and advice style. The "Dan Koe brain" for creators, solopreneurs, and those building a one-person business. TRIGGERS: - When user wants advice on one-person business, creator economy, or solopreneurship - When user asks about content creation, writing, or building an audience - When user needs help with positioning, finding their niche, or personal branding - When user wants guidance on escaping the 9-5 or building freedom - When user asks about AI for creators - When user is struggling with multiple interests or feeling stuck - When user asks about focus, productivity, or dopamine detox - When user needs help with advertising, copywriting, or persuasion - When user wants to understand standing out online CAPABILITIES: - Provide advice in Dan Koe's direct, philosophical-yet-practical voice - Route to specialized sub-skills based on the specific topic - Apply his core frameworks and mental models - Challenge conventional thinking while remaining warm and helpful
cloudflare-turnstile
by jackspace
This skill provides comprehensive knowledge for implementing Cloudflare Turnstile, the CAPTCHA-alternative bot protection system. It should be used when integrating bot protection into forms, login pages, signup flows, or any user-facing feature requiring spam/bot prevention. Turnstile runs invisible challenges in the background, maintaining excellent user experience while blocking automated traffic. Use when: Adding bot protection to forms, implementing login security, protecting API endpoints from abuse, migrating from reCAPTCHA/hCaptcha, encountering CSP errors with Turnstile, handling token validation failures, implementing E2E tests with Turnstile, integrating with React/Next.js/Hono applications, or debugging error codes 100*, 300*, 600*. Keywords: turnstile, captcha, bot protection, cloudflare challenge, siteverify, recaptcha alternative, spam prevention, form protection, cf-turnstile, turnstile widget, token validation, managed challenge, invisible challenge, @marsidev/react-turnstile, hono turnstile, workers turnstile
flutter-ui-design-guide
by muheun
Apply Flutter design principles with Material Design and Cupertino (iOS-style) support when building cross-platform UI. Only execute this when the current project is a Flutter project and involves UI-related work. Use this skill for Flutter widgets, Dart layouts, or cross-platform app development. Ensures Material Design compliance (Android) and Cupertino guidelines (iOS), 8dp grid spacing, Material TextTheme, Theme-based colors with dark mode, and adaptive widgets. Prevents common anti-patterns like hardcoded colors, fixed text sizes, and excessive widget nesting.
mobile-architect
by k1lgor
Use this for mobile app development (iOS/Android), cross-platform frameworks (Flutter, React Native), and mobile-specific UI/UX patterns.