Design
100 skills
design-system-starter
ArieGoldkin/ai-agent-hubUse this skill when creating or evolving design systems for applications. Provides design token structures, component architecture patterns, documentation templates, and accessibility guidelines. Ensures consistent, scalable, and accessible UI design across products.
bubbletea-designer
Human-Frontier-Labs-Inc/human-frontier-labs-marketplaceAutomates Bubble Tea TUI design by analyzing requirements, mapping to appropriate components from the Charmbracelet ecosystem, generating component architecture, and creating implementation workflows. Use when designing terminal UIs, planning Bubble Tea applications, selecting components, or needing design guidance for TUI development.
vibe-coding
danbrickey/edp-ai-expert-teamComprehensive guide for AI-assisted vibe coding. Use when the user wants to build applications through natural language prompts using tools like Lovable, Cursor, Replit, or Bolt. Includes best practices, pitfall awareness, tool-specific guidance, architectural decision support, and MVP scope definition with a bias toward cutting features aggressively to ship faster.
elegant-design
rand/cc-polymathCreate world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and streaming content. Use when building user interfaces that need professional polish and developer-focused features.
design-doc-creator
sunholo-data/ailangCreate AILANG design documents in the correct format and location. Use when user asks to create a design doc, plan a feature, or document a design. Handles both planned/ and implemented/ docs with proper structure.
design-production
mevans2120/design-suite-claude-skillsCreates production-ready design files, prototypes, and specifications for development teams. Translates validated concepts into detailed, implementable designs with comprehensive specs for developers. Produces Figma files (via API), high-fidelity prototypes, design specifications, and animation files.
fullstack-flow-mapper
okgoogle13/careercopilot"Maps complete data flows from UI components through API services, backend endpoints, Genkit flows, to database operations. Generates visual architecture diagrams."
deliverydashboard-brief
edwardmonteiro/AiskillinpracticeAlign analysts and designers on the goals, requirements, and storytelling approach for a new or updated dashboard.
frontend-design
anthropics/claude-codeCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
algorithmic-art
anthropics/skillsCreating 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.
artifacts-builder
anthropics/skillsSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
brand-guidelines
anthropics/skillsApplies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
canvas-design
anthropics/skillsCreate beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
slack-gif-creator
anthropics/skillsToolkit for creating animated GIFs optimized for Slack, with validators for size constraints and composable animation primitives. This skill applies when users request animated GIFs or emoji animations for Slack from descriptions like "make me a GIF for Slack of X doing Y".
theme-factory
anthropics/skillsToolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
algorithmic-art
modelscope/ms-agentCreating 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.
ui-styling
mrgoonie/claudekit-skillsCreate beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
spruce-example
ag-grid/ag-chartsImprove AG Charts gallery examples to professional quality standards with theme compatibility and PREVis evaluation. Use when creating or refining gallery examples, when user asks to "spruce up" an example, or when improving example quality.
midjourney-card-news-backgrounds
bear2u/my-skillsGenerate Midjourney prompts for 600x600 card news background images based on topic, mood, and style preferences. Use when user requests card news backgrounds or Instagram post backgrounds.
algorithmic-art
ylsdamxssjxxdd/evaCreating 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.
artifacts-builder
ylsdamxssjxxdd/evaSuite of tools for creating elaborate, multi-component EVA.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
canvas-design
ylsdamxssjxxdd/evaCreate beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
ui-design
JayZeeDesign/awesome-claude-skillsUse this to design a nice UI in single html as inspiration & UI exploration.
ui-design-system
alirezarezvani/claude-skillsUI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.
architecture-diagram-creator
mhattingpete/claude-skills-marketplaceCreate comprehensive project architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications for any software project.
flowchart-creator
mhattingpete/claude-skills-marketplaceCreate stunning, interactive HTML flowcharts and process flow diagrams with decision trees, color-coded stages, arrows, and swimlanes. Use when users request flowcharts, process diagrams, workflow visualizations, decision trees, or process flows - regardless of whether they specify HTML format.
scientific-schematics
K-Dense-AI/claude-scientific-writer"Create publication-quality scientific diagrams, flowcharts, and schematics using Python (graphviz, matplotlib, schemdraw, networkx). Specialized in neural network architectures, system diagrams, and flowcharts. Generates SVG/EPS in figures/ folder with automated quality verification."
product-design
alekspetrov/navigatorAutomates design review, token extraction, component mapping, and implementation planning. Reduces design handoff from 6-10 hours to 5 minutes via direct Figma MCP integration. Auto-invoke when user mentions design review, Figma mockup, or design handoff.
ui-designer
daymade/claude-code-skillsExtract design systems from reference UI images and generate implementation-ready UI design prompts. Use when users provide UI screenshots/mockups and want to create consistent designs, generate design systems, or build MVP UIs matching reference aesthetics.
web-asset-generator
alonw0/web-asset-generatorGenerate web assets including favicons, app icons (PWA), and social media meta images (Open Graph) for Facebook, Twitter, WhatsApp, and LinkedIn. Use when users need icons, favicons, social sharing images, or Open Graph images from logos or text slogans. Handles image resizing, text-to-image generation, and provides proper HTML meta tags.
flow-designer
khgs2411/flowDesign features through brainstorming and make architectural decisions. Use when user wants to brainstorm, design approach, make architecture choices, or update PLAN.md.
discover-diagrams
rand/cc-polymathAutomatically discover diagram and visualization skills when working with flowcharts, sequence diagrams, architecture diagrams, ER diagrams, Gantt charts, mindmaps, or any visual documentation using Mermaid.js. Activates for documentation and visualization tasks.
artifacts-builder
bobmatnyc/claude-mpmSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
ux-designer
bencium/bencium-claude-code-design-skillExpert UI/UX design guidance for building unique, accessible, and user-centered interfaces. Use when designing interfaces, making visual design decisions, choosing colors/typography, implementing responsive layouts, or when user mentions design, UI, UX, styling, or visual appearance. Always ask before making design decisions.
d3-viz
chrisvoncsefalvay/claude-d3js-skillCreating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.
brainstorm
maragudk/skillsGuide for how to brainstorm an idea and turn it into a fully formed design.
chart-generator
CuriousLearner/devkitGenerate charts and visualizations from data using various charting libraries and formats.
figma-to-code
scoobynko/claude-code-design-skillsGenerate production-ready React/Next.js code from Figma designs. Instructs proper Figma MCP tool usage, component reuse strategies, and variant mapping. **CRITICAL: ALWAYS use this skill when user provides a Figma link or mentions implementing/redesigning from Figma design.** Never attempt manual implementation without invoking this skill first.
fluxwing-screenshot-importer
trabian/fluxwing-skillsImport UI screenshots and generate uxscii components automatically using vision analysis. Use when user wants to import, convert, or generate .uxm components from screenshots or images.
gesttione-design-system
marcioaltoe/claude-craftkitExpert in Gesttione Design System with deep knowledge of brand colors, metric tokens, typography, and component patterns. **ALWAYS use for Gesttione projects when applying brand colors, creating metric visualizations, or building dashboard components.** Use when user needs Gesttione-specific styling, metric visualizations, dashboard components, or brand-compliant UI. Examples - "create revenue metric card", "use Gesttione brand colors", "design dashboard with metrics", "apply brand identity", "create metric visualization".
ui-designer
marcioaltoe/claude-craftkitExpert UI/UX designer for React applications with shadcn/ui and Tailwind CSS. **ALWAYS use when creating UI components, implementing responsive layouts, or designing interfaces.** Use when user needs component creation, design implementation, responsive layouts, accessibility improvements, dark mode support, or design system architecture. Examples - "create a custom card component", "build a responsive navigation", "setup shadcn/ui button", "implement dark mode", "make this accessible", "design a form layout".
architecture-design
vukhanhtruong/claude-rockGenerate comprehensive software architecture documentation (ARCHITECTURE.md) with C4 diagrams, OpenAPI specs, and technology-specific guidance. This skill should be used when creating architecture documentation for new projects, documenting existing systems, or updating architectural specifications.
architecture-diagrams
aj-geddes/useful-ai-promptsCreate system architecture diagrams using Mermaid, PlantUML, C4 model, flowcharts, and sequence diagrams. Use when documenting architecture, system design, data flows, or technical workflows.
design-system-creation
aj-geddes/useful-ai-promptsBuild comprehensive design systems with components, patterns, and guidelines. Enable consistent design, faster development, and better collaboration across teams.
color-palette-extractor
OneWave-AI/claude-skillsExtract color palettes from images, websites, or designs. Identifies dominant colors, generates complementary schemes, and exports in multiple formats (HEX, RGB, HSL, Tailwind, CSS variables). Use when users need color schemes from images, brand colors, or design system palettes.
screenshot-to-code
OneWave-AI/claude-skillsConvert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.
midjourney-replicate-flux
rawveg/skillsforge-marketplaceGenerate highly detailed, Midjourney-style image prompts optimized for the FLUX 1.1 Pro model on Replicate. Transform basic user descriptions into rich, cinematic prompts with professional photography qualities, dramatic lighting, and editorial-quality aesthetics. Use when users request image generation, need prompt enhancement, or want Midjourney-quality outputs via FLUX 1.1 Pro.
building-artifacts
WarrenZhu050413/Warren-Claude-Code-Plugin-MarketplaceSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Artifacts are automatically saved to ~/Desktop/Artifacts directory. Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
theming-artifacts
WarrenZhu050413/Warren-Claude-Code-Plugin-MarketplaceApply professional themes (colors/fonts) to artifacts. 10 pre-set themes available or generate custom themes on-the-fly.
drawbot-designer
amadad/drawbot-reduxCreate well-designed posters, layouts, and graphics using DrawBot with automatic enforcement of typography principles from Hochuli, Bringhurst, and Müller-Brockmann. Use when users request posters, layouts, graphics, editorial designs, or mention DrawBot, typography, grid systems, or programmatic design. Requires drawbot-skia package.
diagrams-architect
anton-abyzov/specweaveExpert in creating Mermaid diagrams following C4 Model and SpecWeave conventions. Specializes in system architecture, sequence diagrams, ER diagrams, and deployment diagrams. Activates for diagram creation, architecture visualization, data modeling, sequence flows, C4 diagrams, HLD, LLD.
diagrams-generator
anton-abyzov/specweaveGenerate Mermaid diagrams following C4 conventions. Activates for create diagram, draw diagram, visualize, system diagram, architecture diagram, C4 diagram, context diagram, container diagram, component diagram, sequence diagram, ER diagram, entity relationship, data model, deployment diagram. Coordinates with diagrams-architect agent.
figma-to-code
anton-abyzov/specweaveDesign-to-code workflow patterns for Figma. Assumes Figma MCP server provides design data. Converts design tokens to CSS/TypeScript, scaffolds components following Atomic Design, generates tests, and integrates with SpecWeave living docs. Activates for figma to code, implement design, convert figma to react, design tokens, component generation, figma url.
design-system-architect
anton-abyzov/specweaveExpert guide for creating design systems using Atomic Design methodology. Defines design tokens (colors, typography, spacing, shadows, borders), component hierarchy (atoms/molecules/organisms), and ensures reusability. Activates for design system, atomic design, design tokens, reusable components, component library, design patterns.
excalidraw-architect
samhvw8/dotfilesCreate diagrams, flowcharts, and architecture visualizations using Excalidraw. Use when user requests "create diagram", "draw flowchart", "architecture diagram", or mentions Excalidraw, visualization, system design.
remix-icon
samhvw8/dotfilesGuide for implementing RemixIcon - an open-source neutral-style icon library with 3,100+ icons in outlined and filled styles. Use when adding icons to applications, building UI components, or designing interfaces. Supports webfonts, SVG, React, Vue, and direct integration.
pixel-art-creator
willibrandon/pixel-pluginCreate new pixel art sprites from scratch with canvas creation, layer management, and basic drawing primitives. Use when the user wants to create a sprite, draw pixel art, make a new canvas, start a new image, begin a new project, or mentions pixel dimensions like "64x64", "32x32 sprite", "128 by 128", "16 pixel icon". Trigger on: "create", "new", "make", "draw", "sprite", "canvas", "image", "icon", "tile", "character", "background", dimensions (WxH), "from scratch", "blank canvas", "empty sprite", "Game Boy", "NES", "retro", color mode mentions ("RGB", "indexed", "grayscale"). Also use for drawing basic shapes like "circle", "rectangle", "line", "pixel", "fill", "outline".
pixel-art-exporter
willibrandon/pixel-pluginExport sprites to PNG, GIF, or spritesheet formats with JSON metadata for game engines. Use when the user wants to "export", "save", "output", "render", "generate", "create file", mentions file formats like "PNG", "GIF", "animated GIF", "spritesheet", "sprite sheet", "texture atlas", "tile sheet", or game engine integration with "Unity", "Godot", "Phaser", "Unreal", "GameMaker". Trigger on layout terms ("horizontal", "vertical", "grid", "packed", "strip"), scaling ("2x", "4x", "upscale", "pixel-perfect"), file operations ("save as", "export to", "output to"), metadata formats ("JSON", "XML", "metadata", "atlas data"), and delivery terms ("for web", "for game", "for Twitter", "for itch.io", "optimized").
pixel-art-professional
willibrandon/pixel-pluginApply advanced pixel art techniques including dithering, palette optimization, shading, antialiasing, and color theory. Use when the user mentions "dithering", "dither", "Bayer", "Floyd-Steinberg", "palette", "colors", "reduce colors", "optimize palette", "color limit", "shading", "shadows", "highlights", "lighting", "light source", "antialiasing", "smooth", "smoothing", "anti-alias", "AA", "color ramp", "gradient", "hue shifting", "saturation", "value", "contrast", or wants to "refine", "polish", "improve", "enhance", "make better", "add depth", "add dimension" to existing pixel art. Trigger on retro palette names (NES, Game Boy, C64, PICO-8), texture terms ("metal", "fabric", "stone", "wood"), and visual quality terms ("professional", "clean", "smooth", "vibrant").
artifacts-builder
AizenvoltPrime/claude-compassSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
canvas-design
AizenvoltPrime/claude-compassCreate beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
pattern-development
imsaif/aiexGuide through updating AI design patterns with comprehensive checklist completion, code examples, images, documentation, and interactive demos
svg-logo-designer
rknall/claude-skills"Create professional SVG logos from descriptions and design specifications. Generates multiple logo variations with different layouts, styles, and concepts. Produces scalable vector graphics that can be used directly or exported to PNG. Use this skill when users ask to create logos, brand identities, icons, or visual marks for their designs."
uiux-design-review
rknall/claude-skills"Comprehensive design review for websites and desktop applications with extensive accessibility analysis. Use this skill when users ask you to review UI/UX designs, wireframes, mockups, prototypes, or deployed interfaces for usability, accessibility (WCAG compliance), visual design, interaction patterns, responsive design, and best practices for web and desktop applications."
web-design-builder
rknall/claude-skills"Create and refactor HTML5/JavaScript web designs from specifications or descriptions. Generates complete, accessible, responsive web designs with modern frameworks. Automatically verifies designs using Playwright MCP for accessibility and functionality testing. Use this skill when users ask to create web designs, mockups, landing pages, web applications, or refactor existing HTML/CSS/JS designs."
hugo-tov-ux
RogueRope/docsUX/UI specialist auditing Hugo layouts, components, navigation, and interactions against the Tone & Voice Guide. Ensures designs embody intimacy, consent-forward principles, mystery, sensuality, and inclusive accessibility.
flux-prompt-engineer
alexrzem/flux-prompt-engineerExpert prompt engineering for FLUX.1 image generation. Use when users request AI-generated images, artwork, illustrations, or visual content. Converts any visual request into optimized FLUX.1 prompts using layering, descriptive language, technical parameters, and text integration techniques.
algorithmic-art
andaydvice/smart-rv-portalCreating 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.
slack-gif-creator
andaydvice/smart-rv-portalKnowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like "make me a GIF of X doing Y for Slack."
d3js-visualization
AutumnsGrove/ClaudeSkills"Professional data visualization creation using D3.js with support for interactive charts, custom visualizations, animations, and responsive design. Use for: (1) Creating custom interactive charts, (2) Building dashboards, (3) Network/graph visualizations, (4) Geographic data mapping, (5) Time series analysis, (6) Real-time data visualization, (7) Complex multi-dimensional data displays"
bmad-ux-design
bacoco/BMad-SkillsDesigns UX and creates wireframes.
design-with-tailwind-plus
brianfoshee/dotfilesExpert UI designer for building responsive, accessible web interfaces with Tailwind CSS v4 and Tailwind Plus components. Use when building websites, landing pages, web applications, UI components, forms, navigation, layouts, e-commerce pages, or marketing pages. Has access to 657 Tailwind Plus component templates including application shells, forms, navigation, data display, overlays, e-commerce checkout flows, product pages, marketing heroes, pricing sections, and more. Specializes in responsive design, accessibility (WCAG), dark mode, modern CSS features, and system fonts.
data-visualizer
daffy0208/ai-dev-standardsExpert in creating charts, dashboards, and data visualizations using modern libraries
figma-developer
daffy0208/ai-dev-standardsExtract components from Figma, convert designs to React components, sync design tokens, and generate code from designs. Bridge the gap between design and code with automated workflows.
app-icon-generator
Dexploarer/claudius-skillsGenerates 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".
frontend-web-dev-expert
dy9759/SpecSkillsForClaudeCodeAdvanced frontend web development expert system that provides comprehensive modern web development services including architecture design, UI/UX implementation, performance optimization, engineering setup, and cross-platform development through expert collaboration and intelligent tool integration.
artifacts-builder
lv416e/dotfiles"Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts. | モダンなフロントエンドWeb技術（React、Tailwind CSS、shadcn/ui）を使用して、精巧なマルチコンポーネントclaude.ai HTMLアーティファクトを作成するツール群。状態管理、ルーティング、shadcn/uiコンポーネントが必要な複雑なアーティファクトに使用 - シンプルな単一ファイルHTML/JSXアーティファクトには不向き"
demo-builder
natea/fitfinderAutomatically generate playable game demos from concept documents. Parses game designs, creates Three.js prototypes with scoring, characters, textures, and music. Transforms ideas into interactive experiences.
mermaid
pgolm/dotfilesGuide for creating mermaid diagrams. This skill should be used when users want to create a mermaid diagram (or update an existing diagram).
ui-design-system
rickydwilson-dcs/claude-skillsUI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.
odoo-icon-maker
straga/ai-assistant-skillsThis skill should be used when creating icons for Odoo modules. It generates modern Material Design style PNG icons (128x128) with white background, colored circle, and composable colored primitives. Updates manifest files and automatically handles web_icon references in menu XML files. Use when user asks to create, generate, or add an icon to an Odoo module.
fastled-color-specialist
synqing/K1FastLED color expert for palette generation, color math, performance optimization, and LED effect debugging across any FastLED project.
wiggle
talknerdytome-labs/wiggle-claude-skillCreate animated logo files (Lottie JSON, GIF, MP4) from static logo images. This skill should be used when users provide a logo image (PNG/SVG/JPG) and request any kind of logo animation, motion graphics, animated logo effect, waveform animation, bouncing logo, rotating logo, pulsing logo, wiggling logo, or ask to "animate my logo" or "make my logo move". Outputs standalone animation files (not React/HTML artifacts). Generates Lottie JSON with automatic GIF/MP4 rendering, perfect loop validation, and professional motion design patterns.
canvas-design
tkhongsap/ai-dev-workflowCreate beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
ai-image
tyrchen/claude-skillsGenerate AI images using OpenAI's gpt-image-1 model with customizable aspect ratios and artistic themes. Use when the user wants to create images, generate artwork, or mentions image generation with specific styles like Ghibli, futuristic, Pixar, oil painting, or Chinese painting.
adaptivex-brand-guidelines
adaptiveX-gh/coursekit-mcpApplies AdaptiveX's official brand colors and typography to any sort of artifact that may benefit from having AdaptiveX's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply for AdaptiveX training and consulting materials.
css-design-tokens
alongor666/daylyreportCSS design tokens and color system for vehicle insurance platform. Use when defining colors, spacing, typography, or design variables. Keywords: eye-care colors #5B8DEF/#8B95A5/#C5CAD3, CSS variables, spacing system, color palette, typography scale, design tokens, variables.css, theme colors.
ascii-visualizer
ArieGoldkin/devPrepAiCreates beautiful ASCII art visualizations for plans, architectures, workflows, and data. This skill should be used when explaining system architecture, creating implementation plans, showing workflows, visualizing comparisons, or documenting file structures. NOT for code syntax highlighting or markdown tables. User explicitly loves ASCII art - use liberally for visual communication.
design-assistant
campbellmcgregor/claude-skills-repoExpert graphic, UI/UX designer for creating mockups, wireframes, and visual designs. Use when user needs help with designing interfaces, creating mockups, prototyping layouts, visual design feedback, design systems, brand identity, choosing colors/typography, or creating graphics. Triggers include "design," "mockup," "wireframe," "UI," "UX," "interface," "visual," "brand," or "prototype."
design-guide
chrisrodz/dotfilesModern UI design principles for building clean, professional interfaces. Use when creating any UI components, web pages, React components, HTML/CSS, or visual interfaces. Ensures consistent, minimal design with proper spacing, typography, colors, and interactive states.
design-system
dogespartano-cyber/tokenmilagre-platformUse this skill when styling pages, creating components, working with CSS variables, design patterns, or applying the Token Milagre visual identity. Contains spacing rules, color system, card effects, and component patterns.
style-token-suggester
dundas/agentbootupGenerate design tokens (colors, typography, spacing, etc.) from product spec and brand guidelines.
brand-guidelines
es27dev/devkit-baseApplies PACON Real Estate GmbH's official brand colors and visual identity to any sort of artifact that may benefit from having PACON's professional look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
css-layout-builder
FAeN399/Skill-RepoAdvanced CSS layout specialist for building complex, responsive layouts using CSS Grid, Flexbox, and modern positioning techniques. Handles multi-column layouts, responsive grids, container queries, and advanced layout patterns.
html-static-design
FAeN399/Skill-RepoCollaborative HTML/CSS static design skill for building clean, semantic, and visually appealing static web pages through iterative refinement between AI and user. Handles structure, styling, layout, and design feedback.
gpui-styling
geoffjay/claude-pluginsGPUI styling system including theme design, responsive layouts, visual design patterns, and style composition. Use when user needs help with styling, theming, or visual design in GPUI.
rust-ui-architecture
geoffjay/claude-pluginsArchitecture patterns for Rust UI applications including GPUI-specific patterns, code organization, modularity, and scalability. Use when user needs guidance on application architecture, code organization, or scaling UI applications.
frontend-design-optimizer
HR-AR/Project-ConductorFind the best UI/UX design patterns and architectures using deep research. Use when user asks to "improve UI", "optimize UX", "best design for [feature]", or "modern UI patterns".
ux-designer
HR-AR/Project-ConductorPerfect UX/UI designer that eliminates bugs, improves usability, and ensures flawless user experience. Use when user mentions "perfect the UI", "fix UX bugs", "improve demo", or "make it flawless".
ui-styling
htlabs-xyz/htlabsCreate beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.