Design skills

Browse reusable Agent Skills, each with a clear purpose and practical guidance.

update-theme

Update the Warm Graphite color theme for lsd and vivid terminal tools. Use when modifying colors, refreshing the palette, or adjusting file type styling.

498 repo starsObserved in 1 repos
Design

usability-psychologist

認知負荷・エラー防止・学習コスト・アクセシビリティの観点からUI/フローを評価し、改善案を“検証可能な仮説”として提示する。認知人間工学/ユーザビリティ/アクセシビリティを統合して扱う。

498 repo starsObserved in 1 repos
Design

ux-design-gemini

Create UX designs using memex-cli with Gemini backend. Use when (1) Generating user flows and wireframes, (2) Creating UI component specifications, (3) Designing interaction patterns, (4) Building design system documentation, (5) Producing responsive layout guides.

498 repo starsObserved in 1 repos
Design

vega

Create data-driven charts with Vega-Lite (simple) and Vega (advanced). Best for bar, line, scatter, heatmap, area charts, and multi-series analytics. Use when you have numeric data arrays needing statistical visualization. Vega for radar charts and word clouds. NOT for process diagrams (use mermaid) or quick KPI cards (use infographic).

498 repo starsObserved in 1 repos
Design

visual-design

Create high-fidelity UI designs, color palettes, and design systems

498 repo starsObserved in 1 repos
Design

Web UI Design

Design responsive web interfaces using modern UX principles, accessibility standards, and mobile-first approaches

498 repo starsObserved in 1 repos
Design

windsurf-theme-customization

Configure Windsurf themes and visual settings for accessibility. Activate when users mention "change theme", "customize colors", "accessibility settings", "visual preferences", or "dark mode". Handles theme configuration and accessibility compliance. Use when working with windsurf theme customization functionality. Trigger with phrases like "windsurf theme customization", "windsurf customization", "windsurf".

498 repo starsObserved in 1 repos
Design

figmirror

This FigMirror skill should be used when the user asks to "mirror this figure's style", "copy this figure's style", "make a chart that looks like this paper", "reproduce this figure with my data", "match this paper's aesthetic", "I want a NeurIPS-quality version of this", or any variant where they hand over a cropped or uncropped reference figure AND their own data and want their data rendered in the same visual register. ALSO triggers when the user attaches a paper-figure screenshot plus tabular data and asks for matplotlib output. Does NOT trigger on generic matplotlib chart requests with no reference image — that's a basic matplotlib task, not style transfer.

494 repo starsObserved in 2 repos
Design

cometchat-flutter-theming

Use when customizing the visual appearance of CometChat Flutter UIKit v6 components. Triggers on mentions of CometChatThemeHelper, CometChatColorPalette, CometChatSpacing, CometChatTypography, CometChatThemeMode, dark mode, light mode, theme, colors, styling, custom theme, Style class, merge(), getColorPalette, getSpacing, getTypography, ThemeExtension, primary color, neutral colors, background colors, text colors, icon colors, button colors, border colors, or any CometChat{Component}Style class. Also use when the user asks about changing colors, fonts, spacing, or appearance of chat components.

489 repo starsObserved in 1 repos
Design

figma.enumerate-component-urls

Enumerates every public component set in a CDS Figma file and produces a list of [Component Name]: [Figma URL] entries grouped by page section. Use this skill whenever asked to list, generate, or audit Figma component URLs, produce a component inventory from a Figma file, or when doing a Code Connect refresh/audit that requires knowing which Figma node each component maps to. Also trigger when someone asks "what are the Figma URLs for CDS components" or wants to find the node-id for a specific component.

488 repo starsObserved in 1 repos
Design