design
0
diagram-expert
使用 Mermaid、PlantUML、GraphViz 等语言创建技术图表。当用户需要流程图、时序图、架构图、ER 图、甘特图或思维导图时触发。
wwsun
content-media
sorting
stars
current ordering strategy
query
all entries
refine the visible subset
design
0
a2ui-embed
Write HTML visualizations to the A2UI panel or embed running apps
yousufjoyian
content-media
design
0
ascii-diagrams
Create and fix ASCII diagrams, tables, wireframes, box-drawings. Use when message contains Unicode box characters (┌┐└┘│─), user asks to create/fix text visualization, align borders, or fix broken ASCII art. Triggers on "поправ діаграму", "fix diagram", "create table", "вирівняй", "align boxes".
djimontyp
content-media
design
0
ux-color-system
Fantasy-themed color tokens and semantic color usage. Use when applying colors, creating themes, or ensuring color accessibility. Covers surface/text relationships, state colors, and dark theme patterns. (project)
matthewharwood
content-media
design
0
design-tokens
Pulse Radar design system - semantic colors, spacing grid, component patterns.
djimontyp
content-media
design
0
generate-mermaid
Automatically invoked when creating visual diagrams (flowcharts, sequence diagrams, ERDs, state machines, user journeys). Ensures proper Mermaid syntax and diagram clarity.
aandersland
content-media
design
0
favicon-generator
Generate complete favicon/app icon suites with templates and assets. Use when the user needs favicons or app icons for a web/app project.
jscraik
content-media
design
0
nanobanana
StudioJinsei用Nanobanana画像生成Skill。Google Gemini APIを使用してロゴ、コトネちゃん、サイトビジュアル等を生成します。
StudioJinsei-Official
content-media
design
0
ui-mockup-builder
Web/アプリの「画面モックアップ(UI Mockup / high-fidelity mockup)」を作成するためのSkill。 依頼に「モックアップ」「UIデザイン」「見た目を最終に寄せたい」「開発に渡せる画面デザイン」「Figmaに起こす前の叩き」「画面ごとの状態(空/エラー/ローディング等)込みで作りたい」 などが含まれるときに発動する。 目的に応じて wireframe / mockup / prototype のどれが必要かをまず判定し、モックアップが適切なら 画面ごとの静的な高フィデリティ設計(色/タイポ/余白/コンポーネント/状態)と、開発引き渡し用の注釈・仕様をまとめた「Mockup Pack」をリポジトリ内に生成する。
lilpacy
content-media
design
0
color-tokens
Generate accessible color tokens from a single accent color. Use when user wants to create or update color palettes, check accessibility contrast, or generate warm/cool adaptive gray scales.
cdonohue
content-media
design
0
apple-hig-design
Apple の Human Interface Guidelines に準拠したデザインを作成します。iOS、iPadOS、macOS、watchOS、tvOS のデザインシステム、コンポーネント、レイアウト、タイポグラフィ、カラー、アイコン設計を行う際に使用します。UI/UX デザイン、アプリ設計、プロトタイプ作成時に最適です。
yuya0602
content-media
design
0
architecture-diagrams
This skill should be used when the user asks to "create a diagram", "draw architecture", "make a Mermaid diagram", "update the system diagram", "visualize data flow", or when generating flowcharts, module diagrams, or dependency graphs. Provides standards for clear, unambiguous Mermaid diagrams.
EvanLavender13
content-media
design
0
designing-wpf-customcontrol-architecture
Designs stand-alone control styles using WPF CustomControl and ResourceDictionary. Use when creating reusable custom controls or organizing control themes in Generic.xaml.
christian289
content-media
design
0
figma-to-streamlit-component
This skill should be used when "generating components from Figma", "implementing Figma designs", "importing Figma frames", "converting Figma to code", or when creating Streamlit components from design specifications.
ChunkyTortoise
content-media
design
0
brand-guidelines
Applies PwC's official brand colors and typography to any sort of artifact that may benefit from having PwC's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
NightingaleV
content-media
design
0
mascot-character-sheet
Generate professional product mascot character reference sheets with a specific multi-panel layout. Use this skill when creating character design sheets, mascot documentation, brand mascot references, or character consistency guides with multiple views (isometric, front/back/left/right, emotion poses). Optimized for product mascots and brand characters using Gemini image generation with Libre Baskerville typography.
mycurelabs
content-media
design
0
algorithmic-art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
skycruzer
content-media
design
0
hsl-to-oklch-converter
This skill converts HSL color values to OKLCH color values. It can process single or multiple colors, provided either directly by the user or from a specified file.
syeda-hoorain-ali
content-media
design
0
design-token-extractor
Extracts design tokens from images and generates CSS custom properties, atomic utility classes (Tailwind-style), and platform-specific formats following W3C standards and modern CSS best practices.
shawn-sandy
content-media
design
0
background-blend-composer
Design layered backgrounds that make PNG assets blend naturally. Use when hero assets float awkwardly on gradients, multiple images don't blend, or need seamless foreground/background integration. Outputs layer stacks, blend modes, edge-tinting strategies, and exact CSS.
laurenj3250-debug
content-media
design
0
color-system-designer
Creates color palettes and color systems for applications. Defines primary, secondary, neutral colors, and semantic colors (success, error, warning, info). Ensures accessibility compliance and provides usage guidelines.
lexicalninja
content-media
design
0
read-diagrams
Find the relevant diagrams for the application and this particular task
ChrisKG32
content-media
design
0
frontend-css
Write and maintain CSS following project conventions using consistent methodologies like Tailwind CSS, BEM, CSS modules, or utility classes, while creating distinctive, aesthetically excellent designs. Use this skill when writing CSS styles, applying Tailwind utility classes, creating custom CSS, working with styling files (*.css, *.scss, *.module.css, globals.css, tailwind.config.*), maintaining design systems and design tokens, defining CSS variables for colors and spacing, implementing typography styles with unique font choices, creating atmospheric backgrounds and depth, adding animations and micro-interactions, avoiding framework style overrides, avoiding generic "AI slop" aesthetics (purple gradients, Inter/Roboto everywhere, cookie-cutter designs), optimizing CSS for production with purging and tree-shaking, or ensuring consistent styling patterns across the application. Apply this skill when styling components, refactoring CSS code, setting up design systems, choosing fonts and colors, creating animat
pdovhomilja
content-media