Design
UI/UX direction, visual design, and design systems
director-uiux-design
by Nsairat
Persona and expertise framework for a Director of UI/UX Design with deep experience across web, mobile platforms, and marketplace products. Use this skill when providing strategic design leadership, building design teams, creating cross-platform design systems, defining product vision, or advising on design operations. Triggers include: design leadership, UX strategy, design team management, cross-platform design, marketplace UX, mobile app design direction, design operations, design system governance, UX metrics, design org structure.
dataflow-builder
by DimmMak
Pipeline-build coach for the DATAFLOW framework (Define → Acquire → Tidy → Archive → File → Launch → Observe). Walks the user through writing a real end-to-end stock-data pipeline as a code-along drill: each line of code is rendered with first-letter blanks (coderecall mechanic), user types first letters, system reveals the matching keyword, code is appended to the project file. Composes existing fleet desks at the Acquire stage — price-desk (history + live), fundamentals-desk, technicals-desk, macro-desk, options-desk. Output = a real working project directory, not a tutorial transcript. Observe stage is collaborative — Claude proposes candidate angles, user picks/refines, dashboard wireframe emerges before viz code is drilled. NOT for: Socratic WHY-questions on existing pipelines without writing code (use dataflow-tutor — zero code, conceptual). NOT for: gamified DATAFLOW pipeline-stage concept quiz (use dataflow-millionaire — game format, conceptual). NOT for: drilling raw SQL/pandas keywords as muscle memory without building a project (use coderecall — single-line drills, no project output). NOT for: orchestrating existing skills into one-shot execution (use mewtwo — executor, not teacher).
ai-agent-workflow
by philberthandson333
"Use when designing or improving AI engineering workflows after the stack direction is already mostly known. Covers prompt pipelines, MCP integrations, tool-using agents, reusable workflow specs, evaluation loops, and workflow decomposition. Trigger this for agent architecture, prompt refinement, tool grounding, workflow design, and turning repeatable AI tasks into durable systems. If the main question is local model selection, deployment path, or LM Studio versus Ollama versus MLX, use local-ai-systems-studio instead. If the main request is to create, rewrite, benchmark, or improve a skill itself, use skill-creator instead even when the skill is AI-related."
rams
by artivilla
Run accessibility and visual design review on components. Use when reviewing UI code for WCAG compliance and design issues.
superme
by riccardoglacial391
"Online supermarket automation. Login, search products, add to cart/wishlists, magicorder from past orders. Supports Shufersal, Keshet Teamim, Rami Levy, and Tiv Taam. Usage: /superme login <vendor>, /superme search <product>, /superme add <#>, /superme magicorder, /superme lists, /superme cart, /superme help"
vision-tool
by farhanic017
ALWAYS-ON image & video analysis for AI coding assistants. Every model — including models without native vision (big-pickle, DeepSeek, local models) — MUST use this tool for ALL image/video files. Never refuse, never say "I can't view images".
electron-dev
by fanthus
Build cross-platform desktop applications with Electron using best practices for security, performance, and user experience. Use this skill when developing system tools (file managers, screenshot tools, productivity apps) or when working with Electron projects. Triggers include requests to create Electron apps, implement file operations, system tray functionality, window management, IPC communication, or optimize Electron performance. Supports vanilla JavaScript, React, and Vue frameworks with comprehensive code templates that embed security and performance best practices directly in comments.
SKILL.md — Smart Plant 1 Comply Spec Workflow
by theopensoft-RD
ดูรายละเอียด status + cross-reference: knowledge_base/sections.json + knowledge_base/KB.md
high-end-visual-design
by ABEDQWASMI
Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.
High-Agency Frontend Skill Document
by capo0202
Document provides actionable, metrics-driven guidance for engineering interfaces that feel refined, performant, and deliberately engineered rather than algorithmically generic.
liseberg-design
by Karlmit
Design system skill for liseberg. Activate when building UI components, pages, or any visual elements. Provides exact color tokens, typography scale, spacing grid, component patterns, and craft rules. Read references/DESIGN.md before writing any CSS or JSX. Includes ultra-mode visual journey: read references/ANIMATIONS.md, references/LAYOUT.md, references/COMPONENTS.md, and references/INTERACTIONS.md for full motion and layout details.
ui-ux-pro-max
by matbuno-ship-it
"UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples."
the-designer
by potatoman03
Create distinctive frontend interfaces with soul. Context-aware — applies different rules for marketing sites vs dashboards/apps. Marketing sites get dramatic typography, procedural visuals, and editorial layouts. Dashboards get high density, functional cards, and data-first design.
apple-bento-grid
by NxProxyStudios
Create Apple-inspired bento grid presentation cards for showcasing project stats, timelines, and achievements. Generates self-contained HTML files with zero-gap grids, stat cards, pill tags, bar charts, and dark quote cards — optimized for screenshot export. Supports both light (Apple signature #f5f5f7) and dark (#000) themes. Use when the user asks to build stat cards, bento grids, project summary cards, dashboard cards, Apple-style presentation layouts, project overviews, achievement showcases, or any visual summary of numbers and milestones. Also use when the user wants to create slides, infographics, or visual reports with a clean Apple aesthetic.
tech-illustration
by Nayuta403
Generate multi-style technical illustrations (blueprint, clean, dynamic, bold) for articles, slides, and docs using Google's Gemini 3.1 Flash Image model. Use when the user asks to create a tech diagram, infographic, architecture illustration, or article cover image.
editorial-presentation-html
by EthanYoQ
Anthropic warm editorial 设计语言 · 用于 presentation / case sharing / 项目汇报 / 战略叙事 / 产品发布 / 给老板/director 看的演示页面。支持双输出模式:① HTML(完整复刻 90%+ 视觉)② PPTX(复刻 85-90% 视觉,通过 python-pptx 程序化生成)。提供完整 design tokens(米色底 + 赭石红 #CC785C + 6 品牌色 + Fraunces 衬线 + Inter + JetBrains Mono)、12+ 视觉组件(双柱图/5级金字塔/文献漏斗/phase pill/proof bar/hub 矩阵/data-pain callout/glass eyebrow 等)、版面骨架。只要用户提到要做 presentation / slides / PPT / 幻灯片 / case sharing / 项目展示 / 战略汇报 / 给老板看的页面 / Pfizer 风格 / Anthropic 风格 / 编辑设计风格 / 类似血液科那套,就一定要用这个 skill,即使没明确说"用 editorial 风格"或没指定 HTML/PPT 格式。源版本:C:\Users\qiyon\Desktop\血液科市场调研_v5_desktop.html(90KB · 11 sections · 2026-04-27 交付)。
Boris-Token-Slim
by ZCDeng
审计并精简 Claude Code 的隐性 token 开销——CLAUDE.md 臃肿、MEMORY 过期记录、插件爆炸、MCP 常驻、死 symlink、scientific-skills 大类、重复 skill。用户说"优化 token""Claude Code 变慢了""减少 token 消耗""claude 变笨了""额度不够用""audit claude code""slim down claude code"时触发。也响应 /Boris-Token-Slim。
tailwind-best-practice
by prassamin
Tailwind CSS v4 best practices for theming, design tokens, dark mode, gradients, responsive design, and animations. Use when writing, reviewing, or refactoring Tailwind CSS code. Triggers on tasks involving styling, CSS, colors, theming, dark mode, responsive design, gradients, animations, transitions, layout, or UI styling decisions. Also use when setting up a new project's design system or reviewing CSS/Tailwind code quality.
frontend-ui-research-synthesis-designer
by thelongmkt2001
"Use before substantial frontend/admin/public UI redesign or polish. Requires Opus-style deep context, market/UI research, pattern synthesis, design direction, safety checklist, 3-pass build loop, self-critique, and verification before coding. For AWA/Viet Eyewear, must be combined with awa-brand-identity and preserve white/black/gold/gray palette unless explicitly approved."
typography
by rhino-labs
Apply professional typography principles when generating documents, web pages, presentations, or any formatted text output. Use this skill when creating or reviewing HTML/CSS, print documents, resumes, letters, reports, slide decks, emails, or any content where typographic quality matters. Also use when the user asks about font choices, text formatting, spacing, layout, or typographic best practices.
frontend-design
by zhuxining
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 (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
skill-registry-builder
by rainbowgore
Helps the user design a skill or agent registry — internal or public. Use when the user mentions building a skill registry, skill marketplace, skill catalog, agent registry, internal skill hub, or MCP directory. Also use when the user asks how to structure categories, trust tiers, install flows, bundles, governance, or curation for a skills catalog, or is benchmarking against an existing registry. Can be invoked directly via /registry on platforms that support slash commands.
clean-code
by uwuclxdy
Clean code principles and best practices covering naming conventions, function design, error handling, comments, and architecture. Use this skill whenever the user asks you to write, review, or refactor code and wants it to follow clean code standards. Also trigger when the user mentions "clean code", "code quality", "readability", "refactor for clarity", "naming conventions", "function size", "code smells", or asks for a code review with best practices in mind. Apply these principles proactively when writing or reviewing code, even if the user doesn't explicitly ask for "clean code."
hydromind-ai-advisor
by arun25hyd
Expert hydraulic systems Q&A advisor for the HydroMind AI platform. Use this skill ALWAYS when a user asks ANY question about hydraulic systems, offshore or mobile cranes, HPUs, hydraulic pumps, motors, directional control valves, fault diagnosis, pressure settings, flow calculations, component identification, maintenance procedures, or troubleshooting. Trigger for ANY hydraulic-related query — even general ones like "why is my winch slow" or "what is case drain pressure" or "how do I adjust a pressure relief valve". This skill governs the full Q&A answer workflow: (1) Search internal knowledge base first, (2) web search only if not found in KB, (3) always correct user command errors silently and provide structured answers. Also triggers for NEW SYSTEM DESIGN requests — runs a full interactive intake Q&A, confirms a design plan, then executes 12-step structured design including pump/motor/DCV sizing, filter/tank/pipe sizing, BOM generation, and cooler sizing.