Design
UI/UX direction, visual design, and design systems
frontend-design
by BuilderIO
Sets the visual direction for UI work, avoiding generic AI aesthetics. Use for any user-facing UI change: new surfaces, screenshot-driven feedback, copy/density cleanup, settings, control placement, or a "make this look good" pass. Do not load it only for purely mechanical wiring or formatting.
visual-plan
by BuilderIO
Turn ordinary text plans into rich interactive visual plans with diagrams, file maps, annotated code, open questions, and UI/prototype review when useful.
wpds
by WordPress
"Use when building UIs leveraging the WordPress Design System (WPDS) and its components, tokens, patterns, etc."
tailwindcss-development
by coollabsio
Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes.
tailwindcss-development
by coollabsio
Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes.
tailwindcss-development
by coollabsio
Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes.
frontend-design
by vellum-ai
Design-quality layer for frontend code — typography, color, motion, spatial composition, and avoiding generic "AI slop" aesthetics. Use this as a companion when you are already writing or styling frontend code and want it to look distinctive and production-grade. For building an app, dashboard, tracker, calculator, visualization, landing page, or slide deck the user wants inside the assistant, load app-builder instead — it loads this skill itself for the design pass.
geo-writing
by vellum-ai
Generates GEO/AEO-optimized articles designed to get AI engines (ChatGPT, Perplexity, Claude, Gemini) to cite your brand. Handles research, writing, and file output. Suggests listicle or head-to-head as starting formats if the user is unsure.
mcp-setup
by vellum-ai
Add, authenticate, list, and remove MCP (Model Context Protocol) servers — connect any external tool or service that publishes an MCP endpoint to the assistant
screen-annotation
by vellum-ai
Point at things on the screen the user is showing you
visualize
by vellum-ai
Render a polished visual inline in the chat as part of your answer — a diagram, a chart, an interactive explainer, or a UI mockup. Load it proactively whenever an explanation would land better as a picture than as prose. Do not wait to be asked.
app-builder
by vellum-ai
Build and edit small, personal visual tools and artifacts — dashboards, trackers, calculators, data visualizations, charts, simple landing pages, and slide decks the user wants for THEMSELVES. This is the right skill whenever the user asks to "visualize this," "make a chart," or "build an artifact" for their own use, or to edit an app they already built here. Do NOT reach for a ui_show dynamic_page to fake an artifact — build a real persistent app here. A one-off diagram, chart, or explainer that just accompanies an answer belongs to the visualize skill (ui_show visual), not an app. NOT for complex, multi-user, or shippable products — those go to a real project folder with a coding agent (see Scope below).
frontend-design
by Galaxy-Dawn
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.
web-design-reviewer
by Galaxy-Dawn
'This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.'
ui-ux-pro-max
by Galaxy-Dawn
"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."
vanity-address-generation
by nirholas
Complete mastery guide for cryptographic vanity address generation — understanding how blockchain addresses are derived from private keys (ECDSA, keccak256), brute-force search algorithms, GPU acceleration with OpenCL/CUDA, CREATE2 deterministic deployment for contract vanity addresses, security implications of vanity generation, time/difficulty estimation, multi-chain address formats (Ethereum, Bitcoin, Solana), and practical UX benefits of branded addresses for DAOs and protocols.
cognitive-design
by lyndonkl
Use when designing visual interfaces, data visualizations, educational content, or presentations and need to ground decisions in cognitive psychology principles — perception, attention, memory, Gestalt grouping, and visual encoding hierarchy. Invoke when user mentions cognitive load, visual hierarchy, working memory, preattentive processing, Gestalt principles, encoding hierarchy, cognitive design pyramid, or needs to understand WHY certain designs work. For design evaluation, use design-evaluation-audit. For fallacy prevention, use cognitive-fallacies-guard. For data storytelling, use visual-storytelling-design.
keyword-deep-dive
by inhouseseo
Use when planning to rank for a specific keyword. The agent Googles it, reads the top 10, classifies intent, reads the top 3 competitor pages, and produces a 90-day ranking plan with intent, SERP analysis, and content recommendations.
learn-graph
by Li-Evan
当用户要系统学一个新领域、不知道从哪入手、或担心「学得不够系统」时使用。用「知识图谱学习法」和用户一起构建该领域的概念/用途/父子节点图谱（自己建图的过程本身就是学习），标出复用价值最高的节点和「从常识就能入门的点」，给出有效学习路径并回答「学到哪算够」。触发场景：系统学 X 领域、从哪开始学、学得不系统、想要 X 的全貌、规划学习路径、这个领域有多大。
plan-design-review
by garrytan
Designer's eye plan review — interactive, like CEO and Eng review. (gstack)
plan-devex-review
by garrytan
Interactive developer experience plan review. (gstack)
pair-agent
by garrytan
Pair a remote AI agent with your browser. (gstack)
deploying-scalable-agents
by microsoft
golang-data-structures
by samber
"Golang data structures — slices (internals, capacity growth, preallocation, slices package), maps (internals, hash buckets, maps package), arrays, container/list/heap/ring, strings.Builder vs bytes.Buffer, generic collections, pointers (unsafe.Pointer, weak.Pointer), and copy semantics. Use when choosing or optimizing Go data structures, implementing generic containers, using container/ packages, unsafe or weak pointers, or questioning slice/map internals. Not for applying optimization patterns once profiling has identified a bottleneck (→ See samber/cc-skills-golang@golang-performance skill)."