devup-ui
Zero-runtime CSS-in-JS preprocessor for React. Transforms JSX styles to static CSS at build time. TRIGGER WHEN: - Writing/modifying Devup UI components (Box, Flex, Grid, Text, Button, etc.) - Using styling APIs: css(), globalCss(), keyframes() - Configuring devup.json theme (colors, typography, extends) - Setting up build plugins (Vite, Next.js, Webpack, Rsbuild, Bun) - Debugging "Cannot run on the runtime" errors - Working with responsive arrays, pseudo-selectors (_hover, _dark, etc.) - Using polymorphic `as` prop or `selectors` prop - Working with @devup-ui/components (Button, Input, Select, Toggle, etc.)
dryui
Use when building UIs with DryUI (@dryui/ui) Svelte 5 components. Teaches correct patterns for compound components, theming, forms, and accessibility. Use the CLI as the default entry point; MCP mirrors the same workflow when available.
A Christmas Carol
Semantic search through Dickens' A Christmas Carol by meaning, theme, or character.
flutter-ai-ui-skill
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.
Sensecritiq
UX research synthesis. Upload interviews and get themes, findings, and verbatim quotes in minutes.
leonardo-colors
Generate accessible color themes using @adobe/leonardo-contrast-colors. Use when the user needs help building contrast-based color palettes, checking WCAG accessibility, creating adaptive themes, or using the Leonardo API.
Io.Github.Coolver/Home Assistant Mcp
Vibecode your Home Assistant setup from your IDE: automations, dashboards, themes and configs
pretty-mermaid
Render beautiful Mermaid diagrams as SVG or ASCII art using the beautiful-mermaid library. Supports 15+ themes, 5 diagram types (flowchart, sequence, state, class, ER), and ultra-fast rendering. Use this skill when: 1. User asks to "render a mermaid diagram" or provides .mmd files 2. User requests "create a flowchart/sequence diagram/state diagram" 3. User wants to "apply a theme" or "beautify a diagram" 4. User needs to "batch process multiple diagrams" 5. User mentions "ASCII diagram" or "terminal-friendly diagram" 6. User wants to visualize architecture, workflows, or data models
yororen-ui-app-core
App bootstrap and core architecture for end users building a gpui desktop app with Yororen UI (yororen_ui). Use when generating or refactoring main.rs, window setup, global theme, global i18n, assets (UiAsset/CompositeAssetSource), or when creating a new Yororen UI app crate. Not for developing yororen-ui itself.
restman-theme
Provides design tokens, color scheme, styling patterns, and theming guidelines for the RestMan TUI application. Use when working on UI components, styling, borders, focus states, or visual design consistency in RestMan.
analyze-feature-requests
Analyze and prioritize a list of feature requests by theme, strategic alignment, impact, effort, and risk. Use when reviewing customer feature requests, triaging a backlog, or making prioritization decisions.
audio-hooks
Use whenever the user asks to install, configure, snooze, mute, test, troubleshoot, or change settings for the claude-code-audio-hooks audio notification system. Trigger phrases include "audio hooks", "audio notifications", "snooze audio", "mute claude", "claude is too loud", "test audio", "switch audio theme", "rate limit alerts", "audio webhook", "TTS", "focus flow", and the slash command /audio-hooks. Also use when diagnosing why Claude Code is silent (or noisy) for the user.
figui3
Guides development and maintenance of the FigUI3 web components library for Figma-style plugin UIs. Applies when adding or modifying `fig-*` custom elements, updating docs/demo pages, adjusting theme tokens, improving accessibility, or debugging component behavior in `fig.js`, `components.css`, `index.html`, and `README.md`.
revdiff
Review git diffs with inline annotations in a TUI overlay, or answer questions about revdiff usage, configuration, themes, and keybindings. Opens revdiff in tmux/kitty/wezterm, captures annotations, and addresses them. Activates on "revdiff", "review diff", "annotate diff", "git review with revdiff", "interactive diff review", "revdiff config", "revdiff themes", "revdiff keybindings", "how to configure revdiff", "what themes does revdiff have".
ui-restructure
Solves UI lock-in. Reverse engineers your existing UI, strips all layout/token decisions, preserves every hook, handler, and API call untouched, then rebuilds the UI from scratch with a fresh design system. Use /ui-restructure to fully redesign, --style apple|linear|minimal|dashboard for named styles, --mode layout|theme|grid for partial rebuilds, --god-mode to redesign from the user's perspective using 100-user mindset simulation and 6 UX principles, --keep-tokens to preserve your token system, --prompt for custom redesigns. Applies mandatory world-class polish: spring motion, 5-state micro-interactions, 8pt spacing grid, WCAG accessibility. Supports Next.js, React, Vue 3, Tailwind, CSS Modules, styled-components, shadcn.
creating-streamlit-themes
Creating and customizing Streamlit themes. Use when changing app colors, fonts, or appearance, or aligning apps to brand guidelines. Covers config.toml configuration, design principles, and CSS avoidance.
Obsidian Theme Designer
Help users iteratively design Obsidian themes through visual browser previews, then generate an importable CSS snippet.
picasso
The ultimate frontend design and UI engineering skill. Use this whenever the user asks to build, design, style, or improve any web interface, component, page, application, dashboard, landing page, artifact, poster, or visual output. Covers typography, color systems, spatial design, motion/animation, interaction design, responsive layouts, sound design, haptic feedback, icon systems, generative art, theming, React best practices, and DESIGN.md system generation. Also use when the user asks to audit, critique, polish, simplify, animate, or normalize a frontend. Triggers on any mention of "make it look good," "fix the design," "UI," "UX," "frontend," "component," "landing page," "dashboard," "artifact," "poster," "design system," "theme," "animation," "responsive," or any request to improve visual quality. Use this skill even when the user does not explicitly ask for design help but the task involves producing a visual interface.
devtools-app-setup
Install TanStack Devtools, pick framework adapter (React/Vue/Solid/Preact), register plugins via plugins prop, configure shell (position, hotkeys, theme, hideUntilHover, requireUrlFlag, eventBusConfig). TanStackDevtools component, defaultOpen, localStorage persistence.
Io.Github.MongLong0214/Stockmatrix Mcp
Korean stock market theme lifecycle analysis for 250+ KOSPI/KOSDAQ investment themes
design-extraction
This skill should be used when the user asks about Storybook, design systems, UI components, extracting HTML, or building interfaces using existing components. Activates for component listing, HTML extraction, theme analysis, or UI assembly.
migrate-nativewind-to-uniwind
Migrate a React Native project from NativeWind to Uniwind. Use when the user wants to replace NativeWind with Uniwind, upgrade from NativeWind, switch to Uniwind, or mentions NativeWind-to-Uniwind migration. Handles package removal, config migration, Tailwind 4 upgrade, cssInterop removal, theme conversion, and all breaking changes.
port-theme
Port a Vim or other editor colorscheme to a Textbringer theme file. Use when the user provides a URL or name of a theme to port.
revealjs
Create polished, professional reveal.js presentations. Use when the user asks to create slides, a presentation, a deck, or a slideshow. Supports themes, multi-column layouts, code highlighting, animations, speaker notes, and custom styling. Generates HTML + CSS with no build step required.
vuepress-plume-config
Generate and write VuePress Plume theme config. Invoke when user asks to init or update theme config, including collections, navbar, sidebar, locales, plugins, and all theme features like search, comments, watermark, encryption, bulletin, copyright, llmstxt, replaceAssets, etc.
RenderMark
Markdown to styled HTML, PDF, DOCX, and slides with themes, diagrams, and math.
Io.Github.Blathrop07/Voyager Commerce
AI ticket commerce for theme parks, zoos, museums, and aquariums via any AI agent
SFC v0.1 Required Fields
skeleton: "workflow" triggers: commands: ["/theme-factory"] patterns: ["theme-factory"] inputs: required: [] optional: [] outputs: artifacts: ["SKILL.md"] failure_modes: - symptom: "Missing required inputs or context" recovery: "Provide the missing info and retry" - symptom: "Unexpected tool/runtime
OGForge MCP
Generate Open Graph images with themes and Lucide icons
makepad-router
CRITICAL: Use for ALL Makepad/Robius questions including widgets, layout, events, and shaders. Triggers on: makepad, robius, live_design, app_main, Widget, View, Button, Label, Image, TextInput, ScrollView, RoundedView, SolidView, PortalList, Markdown, Html, TextFlow, layout, Flow, Walk, padding, margin, width, height, Fit, Fill, align, spacing, event, action, Hit, FingerDown, FingerUp, KeyDown, handle_event, click, tap, animator, animation, state, transition, hover, pressed, ease, shader, draw_bg, draw_text, Sdf2d, pixel, gradient, glow, shadow, font, text_style, font_size, glyph, typography, tokio, async, spawn, submit_async, SignalToUI, post_action, apply_over, TextOrImage, modal, collapsible, drag drop, AppState, persistence, theme, Scope, deploy, package, APK, IPA, WASM, cargo makepad, makepad widget, makepad ç»ä»¶, makepad æé®, makepad å¸å±, makepad äºä»¶, makepad å¨ç», makepad çè²å¨, å建ç»ä»¶, èªå®ä¹ç»ä»¶, å¼ååºç¨, å± ä¸, 对é½, ç¹å»äºä»¶, æ¬åææ, æ¸å, é´å½±, åä½å¤§å°
xaml-csharp-development-skill-for-avalonia
Build, review, design, migrate, and optimize Avalonia applications with modern XAML/C# patterns, compiled bindings, AOT-friendly architecture, professional UI/UX design systems, design tokens, control themes, and Microsoft Fluent design system customization. Use for tasks involving Avalonia app startup and lifetime wiring, view/viewmodel composition, bindings in .axaml/.xaml and C#, styles/themes/resources, polished visual design, FluentTheme palette work, platform-specific bootstrapping (desktop/browser/mobile/headless), trimming/NativeAOT compatibility, reactive UI flows, performance tuning, and troubleshooting build/runtime issues in Avalonia projects.
styling
How to customize and style UI5 Web Components. Covers CSS shadow parts, CSS custom states, CSS variables, and tag-level styling. Use when the user asks about changing component appearance, colors, spacing, theming, or overriding styles.
dev-themes
ä¿®æ¹ /themes ä¸ç代ç æ¶ä½¿ç¨
epic
Create and manage Epics - collections of related issues for major feature areas. Use when starting a new project(big feature), organizing work into themes, or adding reference documents.
dotlottie-web
Implement Lottie animations using dotLottie runtimes (@lottiefiles/dotlottie-web and @lottiefiles/dotlottie-react). Use when building, debugging, or optimizing dotLottie or Lottie animations in web projects, including vanilla JS, React, and Next.js. Covers package selection, Web Workers, state machines, theming, dynamic slot overriding, performance best practices, and common patterns.