Design
UI/UX direction, visual design, and design systems
ui-design-iteration
by ozten
Iterates on data-intensive UI designs to improve scannability, hierarchy, accessibility, and systematization. Use when improving an existing UI, reviewing a design for UX issues, or transforming a functional-but-flat interface into a polished product.
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.
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.
geist-learning-lab
by vercel-labs
Build explorative, interactive learning experiences as Next.js apps using the Geist design system. Use when creating tutorials, explorable explanations, interactive lessons, code sandboxes, quizzes, or any educational UI. Covers the Learning Loop pedagogy, 23+ learning component patterns, progress tracking, spaced repetition, and Bret-Victor-style interactive exploration — all with Geist's dark-first minimal aesthetic.
brand-management
by dmend3z
This skill transforms Claude into a brand management specialist. It helps develop and maintain a strong brand identity, manage online reputation, and create high-quality, personalized content. Use this skill when you need to build, manage, or protect a brand's reputation and image.
learning-design-review
by vishalsachdev
Review educational content against the Four Learning Design Pillars framework. Use when users want to evaluate course materials, lessons, tutorials, e-learning modules, or any instructional content for alignment with evidence-based learning design principles. Provides structured feedback with specific principle references (e.g., 1.1.1, 2.3.4) and actionable recommendations.
human-html
by rhnfzl
Use when creating a human review surface, such as a plan, review, architecture explainer, understanding doc, research synthesis, decision aid, prototype, status report, or incident postmortem. Put the artifact under docs/human-html/ as HTML instead of Markdown. Markdown stays for scratch notes, durable references, ticket notes, drafts, and meetings. Provides scaffolds, validation, index refresh, glossary support, and hooks for Claude Code and Codex.
storytelling-with-data
by AliDujie
数据可视化与数据叙事技能，基于 Cole Nussbaumer Knaflic《Storytelling with Data》 方法论。提供 8 项可执行能力和 11 篇知识库文档，覆盖上下文分析→图表选择→去杂乱→ 注意力引导→设计评估→故事构建→综合诊断→图表改造完整工作流，以及 CEO 决策视角扩展。
gas-review
by whichguy
Unified GAS code review - runs BOTH gas-code-review AND gas-ui-review. ALWAYS PREFER THIS over gas-code-review or gas-ui-review individually. This agent provides cross-file analysis and parallel execution. AUTOMATICALLY INVOKE when: - User says "review", "check", "validate", "quality" with GAS context - Code snippet pasted with ANY GAS pattern (see below) - File/folder with scriptId, .gs files, or .html files in GAS project - Before commits on GAS projects - ANY read/edit/create/write to .gs or .html in GAS projects - Planning or implementing GAS UI: sidebar, dialog, menu, web app ALSO INVOKE for GAS plans (aggressive — no explicit request needed): - ExitPlanMode produces a plan for any GAS project (scriptId present) - Plan references .gs files, .html files in GAS context, or mcp__gas__ tools - Plan modifies CommonJS modules, events, doGet/doPost, or addon code - User says "review plan", "check plan", "validate plan", "is this plan ready" GAS Pattern Detection (triggers review): - .gs code: _main, defineModule, require(), module.exports, events, global - .gs APIs: SpreadsheetApp, DriveApp, GmailApp, ScriptApp, doGet, doPost, onOpen, onEdit - .html code: HtmlService, <?=, <?!=, google.script.run, createGasServer, exec_api - .html patterns: createTemplateFromFile, setXFrameOptionsMode, IFRAME embedding GAS UI/UX topics (with GAS context): - sidebar, dialog, modal, toast, menu, form in GAS projects - Google Picker, file upload, web app deployment - /exec vs /dev URLs, ContentService, CORS NOT for: General JS/TS (use code-reviewer), non-GAS HTML (use standard review)
architect
by whichguy
Design system architecture and make technology decisions. Dispatches to system-architect agent for comprehensive design work. AUTOMATICALLY INVOKE when: - "design architecture", "what tech stack", "system design" - "how should I structure", "architecture for", "design system" - "technology recommendation", "compare frameworks" NOT for: Implementation (use /develop), task breakdown (use /tasks)
atelier
by BrunoVini
Use when building, designing, reviewing, or improving any visual or frontend work — web pages, components, landing pages, dashboards, UI mockups, hi-fi prototypes, interactive demos, slides/decks, animations, narrated/explainer videos — or when the user wants a live preview/demo, design suggestions, a color/typography/style direction, a design review or layout score, a decision between design directions, or a project's design system / DESIGN.md. Triggers (EN): design, prototype, mockup, landing page, dashboard, settings page, form, sign-up, onboarding, wizard, admin panel, component, UI, frontend, slides, deck, animation, explainer, variants, review, score this layout, preview, demo, design tokens, style guide, weigh the options, "make it look good", "does this look right", refine, bolder, quieter, simplify, distill, harden, polish, "make it pop", "tone it down", edge cases, empty state. Triggers (PT): design, protótipo, mockup, página, configurações, formulário, cadastro, onboarding, componente, slides, animação, variantes, revisão, pontuar layout, preview, demonstração, decidir direção, "deixa bonito", estilo, paleta, refinar, mais ousado, mais discreto, simplificar, destilar, endurecer, polir, "deixa mais forte", "suaviza", estados vazios.
way-brand-identity
by way-platform
Write copy and use colors according to the Way brand.
ui-ux-pro-max
by ThrownLemon
"UI/UX design intelligence. 57 styles, 96 palettes, 50 font pairings, 25 charts, 11 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Search and apply design best practices."
tailwind
by display-design-studio
Tailwind CSS v4 best-practices skill covering utility-first patterns, @theme variables, responsive design, dark mode, custom styles, performance, accessibility, and a Figma-to-Tailwind theme generation workflow. Use when the user mentions Tailwind, tailwindcss, @theme, utility classes, Tailwind config, Figma design tokens, or asks to build, configure, audit, or migrate a Tailwind CSS project (including v3 to v4 migrations).
aesthetic
by zircote
Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.
gas-ui-review
by whichguy
GAS HTML/UI pattern reviewer for correctness and layout. AUTOMATICALLY INVOKE when: - Code snippet pasted containing: HtmlService, <?=, <?!=, google.script.run, createGasServer ## HTML File Operations (Highest Priority) - ANY edit/create/write to .html files in GAS projects - Reading .html files for review or understanding - Planning changes to HTML files ALWAYS PAIR WITH: gas-code-review when .gs files are also present (or use /gas-review for both) ## IFRAME & Embedding - IFRAME, embedding, X-Frame-Options, setXFrameOptionsMode - Web app deployment, doGet(), doPost() - External embedding, cross-origin, CORS ## UI Components & Layout - sidebar, dialog, modal, toast, menu, form, button - Layout, positioning, sizing, dimensions, width, height - CSS, styling, responsive, mobile - Template, HtmlService, HtmlOutput, HtmlTemplate ## GAS HTML Patterns - Scriptlets: <?= ?>, <?!= ?>, <? ?>, include() - createTemplateFromFile, createHtmlOutputFromFile, evaluate() - google.script.run, createGasServer(), server.exec_api() - Template literals in HTML, URL strings ## Review & Planning Triggers - "review" + any UI/HTML context - "plan" + sidebar/dialog/menu/UI implementation - "implement" + UI components - "add" + sidebar/dialog/menu/form - "create" + HTML/UI/interface - "update" + sidebar/dialog/layout - "fix" + UI/display/render/layout issues ## Explicit UI Keywords - UI, UX, interface, display, render, show, view - Frontend, client-side, browser-side - User interaction, click handler, event handler (in HTML) ## Advanced Patterns (Trigger on these topics) - Google Picker, file picker, setOrigin, setAppId - File upload, blob, byte array, base64 - CORS, preflight, text/plain workaround - Loading state, spinner, async UI - Polling, active sheet detection - Dynamic menu, global functions - Cache vs Properties, performance - Close sidebar programmatically - Template debugging, getCode() - Session, authentication, getActiveUser, getUserAgent - Webhook response, ContentService, JSON API - Data passing, hidden div, template properties - Internal methods, initTemplate, output. / output.$ ## Web Apps (doGet/doPost) Triggers - Web app, doGet, doPost, deployment - URL parameters, query string, pathInfo - /exec vs /dev, versioned deployment - Execute as me, execute as user, permissions - State token, OAuth callback, usercallback - ScriptApp.getOAuthToken, Authorization header - JSONP, cross-origin, redirect behavior - ContentService, JSON response, MIME type NOT for: Runtime debugging (use gas-ui-debug), .gs syntax validation (use gas-code-review)
ultimate-ppt-master
by kdnsna
终极融合PPT大师 / Ultimate Fusion PPT Master: AI-driven presentation generation system. Converts source documents (PDF/DOCX/XLSX/URL/Markdown) into either editable PPTX decks or editorial/Swiss magazine web slide decks. Use automatically when the user asks to create or transform content into a presentation, slide deck, PowerPoint, PPT, or PPTX, including phrases such as "create PPT", "make presentation", "make a deck", "build slides", "turn this into slides", "生成PPT", "做PPT", "做一个ppt", "做一个 PPT", "做个PPT", "做个 PPT", "制作演示文稿", "生成演示文稿", "把这个做成PPT", "把这份材料做成PPT", "杂志风PPT", "网页PPT", "horizontal swipe deck", "editorial magazine presentation", or mentions "终极融合PPT大师", "ultimate-ppt-master", "deckweaver", or "ppt-master".
product-frameworks-for-design-and-management
by kjgarza
Comprehensive product design and management frameworks including UX heuristics (Hick's Law, Fitts's Law), design processes (Double Diamond, Lean UX, Agile, User-Centered Design), prioritization methods (RICE, MoSCoW, Kano Model, Pareto Principle), product lifecycle guidance, PRD templates, user story formats, design critique guidelines, and usability testing checklists. Use when analyzing features, creating product documentation, facilitating design reviews, planning user research, applying UX principles to interfaces, or making product decisions that require framework-based guidance.
way-go-style
by way-platform
Guide for writing idiomatic, effective, and standard Go code. Use this skill when writing, refactoring, or reviewing Go code to ensure adherence to established conventions and best practices.
产品大牛转md
by monsignorlaw1015
"将产品大牛（pmdaniu.com）上托管的 Axure 原型文档转换为结构化 Markdown，供 AI 知识库（RAG）和团队共享使用。 支持单个文档链接转换，自动处理多页 sitemap、截图、Vision 理解、Markdown 输出。 触发场景：用户给出产品大牛链接（u.pmdaniu.com 短链或 pmdaniu.com 长链）并要求转为 Markdown 或导入知识库。
drip-cli
by TheBlueBear02
you want to add a complete style to your project with one command only
Accessibility Color Checker
by Eli-yu-first
"Validates color combinations against WCAG contrast ratios and suggests accessible alternatives"