design-system-patterns

29.9k

wshobson

Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.

radix-ui-design-system

18.0k

sickn33

Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.

contributing

6.3k

nuxt

Guide for contributing to Nuxt UI. Provides component structure patterns, Tailwind Variants theming, Vitest testing conventions, and MDC documentation guidelines. Use when creating new components, reviewing component PRs, modifying existing components, writing tests, or creating documentation in this codebase.

mermaidjs-v11

1.8k

mrgoonie

Create diagrams and visualizations using Mermaid.js v11 syntax. Use when generating flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, user journeys, timelines, architecture diagrams, or any of 24+ diagram types. Supports JavaScript API integration, CLI rendering to SVG/PNG/PDF, theming, configuration, and accessibility features. Essential for documentation, technical diagrams, project planning, system architecture, and visual communication.

frontend-ui-dark-ts

1.6k

microsoft

Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.

frontend-ui-dark-ts

1.6k

Microsoft Agent Skills Frontend Ui Dark Ts

Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.

compose-expert

1.5k

vitorpamplona

Advanced Compose Multiplatform UI patterns for shared composables. Use when working with visual UI components, state management patterns (remember, derivedStateOf, produceState), recomposition optimization (@Stable/@Immutable visual usage), Material3 theming, custom ImageVector icons, or determining whether to share UI in commonMain vs keep platform-specific. Delegates navigation to android-expert/desktop-expert. Complements kotlin-expert (handles Kotlin language aspects of state/annotations).

moai-domain-uiux

776

modu-ai

UI/UX design systems specialist covering accessibility, icons, theming, design tokens, and user experience patterns. Use when user asks about design systems, WCAG accessibility compliance, ARIA patterns, icon libraries, dark mode theming, design tokens, or user experience research. Do NOT use for React component coding or frontend implementation (use moai-domain-frontend instead) or shadcn/ui specifics (use moai-library-shadcn instead).

design-tokens

756

dadbodgeoff

Comprehensive design token system for typography, colors, and theming with WCAG AA compliance, TypeScript types, and framework integration (CSS-in-JS, Tailwind, CSS Variables).

nuxt-ui

628

nuxt-content

Use when building styled UI or working with @nuxt/ui v4 components (Button, Modal, Form, Table, etc.) - provides ready-to-use components with Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.

nuxt-ui

570

onmax

Use when building styled UI with @nuxt/ui v4 components (Button, Modal, Form, Table, etc.) - provides ready-to-use components with Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.

compose-ui

384

new-silvermoon

Best practices for building UI with Jetpack Compose, focusing on state hoisting, detailed performance optimizations, and theming. Use this when writing or refactoring Composable functions.

shadcn

376

a5c-ai

shadcn/ui component patterns, customization, theming, and integration.

styled-components

376

a5c-ai

Styled Components theming, variants, SSR support, and patterns.

tailwind-css

376

a5c-ai

Tailwind CSS configuration, custom plugins, design systems, theming, and component patterns for modern web applications.

assembling-components

296

ancoleman

Assembles component outputs from AI Design Components skills into unified, production-ready component systems with validated token integration, proper import chains, and framework-specific scaffolding. Use as the capstone skill after running theming, layout, dashboard, data-viz, or feedback skills to wire components into working React/Next.js, Python, or Rust projects.

theming-components

296

ancoleman

Provides design token system and theming framework for consistent, customizable UI styling across all components. Covers complete token taxonomy (color, typography, spacing, shadows, borders, motion, z-index), theme switching (CSS custom properties, theme providers), RTL/i18n support (CSS logical properties), and accessibility (WCAG contrast, high contrast themes, reduced motion). This is the foundational styling layer referenced by ALL component skills. Use when theming components, implementing light/dark mode, creating brand styles, customizing visual design, ensuring design consistency, or supporting RTL languages.

shadcn-ui

241

MadAppGang

shadcn/ui component library patterns. Covers CLI usage, installation, component categories, theming with CSS variables, dark mode setup, and integration with React Hook Form + Zod. Use when adding UI components, setting up design systems, or implementing forms with shadcn/ui.

ng-alain-component-development

188

aiskillstore

Create components using ng-alain (@delon/abc) and ng-zorro-antd UI libraries. Use this skill when building enterprise UI features with ST (Simple Table), SF (Schema Form), ACL (Access Control), PageHeader, ReuseTab, and other @delon components. Ensures proper integration with ng-alain architecture, theming system, responsive layouts, and accessibility standards while following Angular 20 patterns.

tailwind-design-system

128

giuseppe-trisciuoglio

Skill for creating and managing a Design System using Tailwind CSS and shadcn/ui. Use when defining design tokens, setting up theming with CSS variables, building a consistent UI component library, initializing a design system configuration, or wrapping shadcn/ui components into design system primitives.

slidev

119

nicepkg

Comprehensive guide for Slidev - a web-based presentation framework for developers. Covers Markdown syntax, layouts, components, animations, theming, and exporting. Use this skill when creating or working with developer presentations using Slidev.

sap-btp-build-work-zone-advanced

115

secondsky

Develops and administers SAP Build Work Zone, advanced edition digital workplace solutions. Use when creating workspaces, workpages, and collaborative sites, developing UI Integration Cards in SAP Business Application Studio, building content packages and workspace templates, integrating with Microsoft 365/Teams/SharePoint/Google Drive, configuring chatbots and webhooks, implementing SCIM API user provisioning, setting up OData business records, managing themes and branding, configuring role-based access and SSO, troubleshooting deployment issues, or working with the Administration Console. Keywords: SAP Build Work Zone advanced edition, digital workplace, UI Integration Cards, content packages, workspace templates, SAP Business Application Studio, SAP Conversational AI, SCIM API, OData, Microsoft Teams integration, SSO, theming, Administration Console

ux-design-systems

109

hoodini

Build consistent design systems with tokens, components, and theming. Use when creating component libraries, implementing design tokens, building theme systems, or ensuring design consistency. Triggers on design system, design tokens, component library, theming, dark mode.

widget-creator

105

mitchdenny

Step-by-step guide for creating new widgets in the Hex1b TUI library. Use when implementing new widgets from scratch, including widget records, nodes, extension methods, theming, reconciliation, and tests.

gluestack-theming

98

TheBushidoCollective

Use when customizing gluestack-ui themes and design tokens. Covers theme provider setup, design tokens, dark mode, NativeWind integration, and extending themes.

react-native-styling

98

TheBushidoCollective

Use when styling React Native components with StyleSheet, Flexbox layout, responsive design, and theming. Covers platform-specific styling and design systems.

react-native-web-styling

98

TheBushidoCollective

Use when styling React Native Web components. Provides patterns for StyleSheet API, platform-specific styles, responsive design, and theming.

lexical-workbench

97

nodetec

Guide for working with the Lexical editor codebase and docs in docs/lexical. Use when implementing or debugging Lexical features: editor state, updates/selection, commands, nodes/serialization, plugins, extensions, transforms, React integration, or theming, especially when the task requires consulting Lexical documentation or source structure in this repo.

docs-styles

93

cloudposse

CSS styles, color themes, and visual conventions for docs.cloudposse.com. Use when styling components, mermaid diagrams, or working with site theming.

jetpack-compose

74

aldefy

Jetpack Compose expert skill for Android UI development. Guides state management decisions (@Composable, remember, mutableStateOf, derivedStateOf, State hoisting), view composition and structure, Modifier chains, lazy lists, navigation, animation, side effects, theming, accessibility, and performance optimization. Backed by actual androidx source code analysis. Use this skill whenever the user mentions Compose, @Composable, remember, LaunchedEffect, Scaffold, NavHost, MaterialTheme, LazyColumn, Modifier, recomposition, Style, styleable, MutableStyleState, or any Jetpack Compose API. Also trigger when the user says "Android UI", "Kotlin UI", "compose layout", "compose navigation", "compose animation", "material3", "compose styles", "styles api", or asks about modern Android development patterns. Even casual mentions like "my compose screen is slow" or "how do I pass data between screens" should trigger this skill.

Dark Mode Testing Patterns

71

PramodDutta

Systematic dark mode testing covering color contrast, theme switching, persistence, media query respect, component-level theming, and image adaptation.

Dark Mode Bug Finder

71

PramodDutta

Detect dark mode rendering issues including contrast failures, missing theme tokens, image inversions, and transition glitches across components.

theme-consistency

70

marcusgoll

Enforce consistent theming across all prototype mockup screens. Auto-loads theme.yaml, validates CSS variable usage, prevents hardcoded values, and maintains visual consistency session-to-session. Use during /prototype create when generating new screens.

nuxt-ui-v4

69

secondsky

Nuxt UI v4 component library for building Nuxt v4 applications. 125+ accessible components with Tailwind v4, Reka UI, dark mode, theming. Use for dashboards, forms, overlays, editors, page layouts, pricing pages, or encountering component, theming, or TypeScript errors.

design-system-creation

69

secondsky

Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standards, building component libraries, or ensuring cross-team consistency. Keywords: design-tokens, typography, spacing, color-palette, components, patterns, variables, dark-mode, theming, CSS-variables, accessibility, WCAG, responsive, grid-system, breakpoints, design-scale, semantic-tokens, component-library, style-guide, documentation, Figma, Storybook, brand-consistency, design-principles

tailwind-v4-shadcn

69

secondsky

Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns. Keywords: Tailwind v4, shadcn/ui, @tailwindcss/vite, @theme inline, dark mode, CSS variables, hsl() wrapper, components.json, React theming, theme switching, colors not working, variables broken, theme not applying, @plugin directive, typography plugin, forms plugin, prose class, @tailwindcss/typography, @tailwindcss/forms

maz-ui

69

secondsky

Maz-UI v4 - Modern Vue & Nuxt component library with 50+ standalone components, composables, directives, theming, i18n, and SSR support. Use when building Vue/Nuxt applications with forms, dialogs, tables, animations, or need responsive design system with dark mode.

Material Design 3 Color Specification Guardian

63

hunmer

A guardian tool that strictly follows the Material Design 3 color specification, providing best-practice guidance for Flutter app UI color theming to ensure UI consistency and accessibility.

plutonium-forms

56

radioactive-labs

Plutonium forms - custom templates, Phlex form components, field builders, and theming

shadcn

56

pproenca

shadcn/ui component library best practices and patterns (formerly shadcn-ui). This skill should be used when writing, reviewing, or refactoring shadcn/ui components to ensure proper architecture, accessibility, and performance. Triggers on tasks involving Radix primitives, Tailwind styling, form validation with React Hook Form, data tables, theming, or component composition patterns.

plutonium-theming

56

radioactive-labs

Plutonium design token system - CSS custom properties, component classes, and consistent styling patterns

dark-mode-design-expert

43

curiositech

Master dark mode UI design with atmospheric theming, WCAG accessibility, and cross-platform best practices. Specializes in weather/sky/ocean-inspired color systems that adapt to time of day and environmental conditions.

nuxt-ui

37

Charles5277

Use when building styled UI with @nuxt/ui v4 components (Button, Modal, Form, Table, etc.) - provides ready-to-use components with Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.

theme-manager

36

gitarbor

Update and maintain GitArbor TUI themes, add new themes, modify existing themes, and ensure theme consistency. Use when working with colors, themes, src/theme.ts, or when user mentions theming, color schemes, or visual customization.

restman-theme

32

cadamsdev

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.

multi-site theming

31

melodic-software

Use when implementing per-site themes, white-labeling, or brand override systems. Covers tenant-specific branding, theme inheritance, CSS variable hierarchies, and dynamic theme switching for multi-site CMS architectures.

rails-ai:styling

29

zerobearing2

Use when styling Rails views - Tailwind CSS utility-first framework and DaisyUI component library with theming

design-systems

29

omer-metin

World-class design systems architecture - tokens, components, documentation, and governance. Design systems create the shared language between design and engineering that makes products feel cohesive at any scale. Use when "design system, component library, design tokens, atomic design, style guide, theme, theming, design scale, component api, variant, figma tokens, style dictionary, design-system, tokens, components, theming, documentation, figma, accessibility, versioning" mentioned.