design
5
uuid-generator
Use when asked to generate UUIDs, GUIDs, unique identifiers in various formats (UUID1, UUID4, etc.).
dkyazzentwatwa
content-media
sorting
stars
current ordering strategy
query
all entries
refine the visible subset
design
5
duotone-identity
Use when designing app pages, typography, spacing, or any UI look and feel for the Identity Platform. Load for creating landing pages, chapter sections, SVG illustrations, or applying the duotone cream/charcoal design system. Keywords: design, ui, styling, theme, colors, layout
ingpoc
content-media
design
4
diagramming
Create technical diagrams using Mermaid syntax for architecture, sequences, ERDs, flowcharts, and state machines. Use for visualizing system design, data flows, and processes. Triggers: diagram, mermaid, architecture diagram, sequence diagram, flowchart, ERD, entity relationship, state diagram, C4 model, component diagram, visualize, draw.
cosmix
content-media
design
4
ui-design-advisor
Senior visual designer who provides specific color values, spacing, typography, and component styling. Use this skill when you need concrete UI specifications, design system decisions, or accessibility guidance for toolbars, panels, canvas elements, and modals.
zxj777
content-media
design
4
mermaid-diagram-to-image
Convert Mermaid diagrams to images (PNG, SVG, PDF) using mermaid-cli. This skill should be used when Claude generates Mermaid diagram syntax and wants to create a visual representation for the user, or when converting existing Mermaid diagrams to image formats.
emdashcodes
content-media
design
4
visual-identity-direction
Provides visual identity direction and creative briefing frameworks including Alina Wheeler's five-phase process, strategy-to-visual translation method, mood board methodology, logo brief structure, photography style frameworks, and typography/color direction. Auto-activates during visual direction, creative briefing, mood board creation, logo brief writing, and visual identity system work. Use when discussing visual direction, creative briefs, mood boards, logo briefs, photography style, visual identity, visual strategy, visual translation, visual expression, design direction, or visual language.
mike-coulbourn
content-media
design
4
brand-color-psychology
Provides brand color psychology and strategic palette development frameworks including Color-in-Context Theory, 60-30-10 Rule, color harmony systems, archetype color associations, Blue Ocean color differentiation, cultural considerations, and accessibility requirements. Auto-activates during brand color selection, palette development, color psychology discussions, and color strategy work. Use when discussing brand colors, color palettes, color psychology, color differentiation, color accessibility, color harmony, WCAG compliance, or color specifications.
mike-coulbourn
content-media
design
4
canva-resize-for-all-social-media
Resize a Canva design into multiple social media formats (Facebook post, Facebook story, Instagram post, Instagram story, LinkedIn post) and export all versions as PNGs. Use this skill when users want to resize Canva designs specifically for multiple social media platforms in one operation, rather than resizing to a single format manually.
canva-sdks
content-media
design
4
design-conventions
Golden Anniversary design system with OKLCH color palette, typography (Inter, Playfair Display, Dancing Script), component states, Framer Motion patterns, and accessibility requirements. Use when working on styling, UI components, or visual changes.
adeonir
content-media
design
4
evolutionary-forms
Generate and evolve abstract visual forms through a Darwinian selection process. Use when users want to create organic shapes, evolve visual designs, breed form variations, or explore parametric design through natural language descriptions like "soft protective curves".
amadad
content-media
design
4
build-design-system
Build a design system from scratch using the Design Graph methodology. Use when starting a component library, creating design tokens, establishing typography scales, or structuring a theme. Based on Brent Jackson's (jxnblk) constraint-based systems.
rohunvora
content-media
design
4
app-icon-generator
Generates app icons in all required sizes for iOS, Android, and PWA from a single source image. Use when user asks to "generate app icons", "create ios icons", "android app icons", "favicon", or "pwa icons".
Dexploarer
content-media
design
4
nested-card
Creates cards with an outer gradient container and inner content card. Use when building premium card designs with depth, layered card layouts, or cards with image sections and content sections.
ainergiz
content-media
design
4
structure-figures
Generate or update schematic structure figures (SVGs) used in CLEED docs and example inputs.
Liam-Deacon
content-media
design
3
visualizing-with-mermaid
Create professional Mermaid diagrams with proper styling and visual hierarchy. Use when creating flowcharts, sequence diagrams, state machines, class diagrams, or architecture visualizations.
third774
content-media
design
3
devmermaid
Generate Mermaid diagrams with proper syntax. Use when creating flowcharts, sequence diagrams, class diagrams, or any other Mermaid visualizations. Ensures correct label quoting to prevent parsing errors.
kevinslin
content-media
design
3
mascot-generator
Generate variations of the Orient mascot (border collie dog with blue bandana). Use transparent=true for web/UI images. Use when asked to generate mascot, create avatar variation, make mascot image, mascot with different pose/expression, or any request for mascot customization.
orient-bot
content-media
design
3
excalidraw-generation
This skill should be used when the user asks to "create excalidraw diagram", "generate excalidraw", "hand-drawn diagram", "sketch diagram", "whiteboard style diagram", or when informal, spatial, annotated diagrams would best convey conceptual relationships. Expert in both presentation design AND artistic Excalidraw JSON creation.
rhuss
content-media
design
3
converting-figma-designs
Figma Dev Mode MCP 도구를 활용한 디자인-코드 변환 지원. 디자인 요소 추출, 코드 생성, 스크린샷 캡처, 메타데이터 분석 시 사용. Figma 링크나 디자인 작업 요청 시 자동 활성화.
jeongsk
content-media
design
3
design-systems
Build and maintain design systems. Use when creating component libraries, design tokens, or style guides. Covers atomic design and tokens.
dralgorhythm
content-media
design
3
creating-marp-slides
このプロジェクトでの Marp スライド作成ルール。スライド作成、画像配置、ビルド、プレビュー時に使用。画像は slides/images/ に配置、bun run preview/build を使用。
toku345
content-media
design
3
ipa-brand-guidelines
Applies Innovations for Poverty Action's official brand colors and typography to any sort of artifact that may benefit from having IPA's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
PovertyAction
content-media
design
3
swiss-design
Use when designing interfaces, data visualizations, documentation, or any output where clarity and visual hierarchy matter - applies Swiss design principles of reduction, grid structure, hierarchy, and typography
bnadlerjr
content-media
design
3
r3f-geometry
BufferGeometry creation, built-in geometries, custom geometry with buffer attributes, instanced meshes for rendering thousands of objects, and geometry manipulation. Use when creating custom shapes, optimizing with instancing, or working with vertex data directly.
Bbeierle12
content-media