Design skills

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

chart-type-selector

Determines the correct chart type for a specific data comparison by applying chart selection logic based on analytical intent (ranking, trend, distribution, composition, correlation, geographic). Produces a complete chart specification with axis assignments, color palette, labels, and formatting rules. Use when the user has data to visualize and needs to know which chart type to use or wants a full chart configuration. Do NOT use for dashboard layout with multiple charts (use dashboard-design), formatting an existing chart (use chart-formatting), or choosing colors (use color-in-data).

543 repo starsObserved in 2 repos
Design
GitHub

cognitive-accessibility

Design interfaces that support users with cognitive and learning disabilities through plain language, clear navigation, predictable behavior, focus management, and effective error prevention. Use when the user asks about cognitive accessibility, related techniques, best practices, or needs guidance in this domain. Do NOT use when the request is outside the scope of cognitive accessibility or requires a different specialized skill.

543 repo starsObserved in 2 repos
Design
GitHub

color-contrast-designer

Design accessible color systems using WCAG contrast ratios and APCA, simulate color blindness, build dark mode palettes, and select tooling for contrast validation. Use when the user asks about color contrast designer, related techniques, best practices, or needs guidance in this domain. Do NOT use when the request is outside the scope of color contrast designer or requires a different specialized skill.

543 repo starsObserved in 2 repos
Design
GitHub

color-in-data

Applies color to data visualizations by selecting sequential, diverging, or categorical palettes based on data type. Specifies hex codes for each element, ensures colorblind accessibility with WCAG contrast ratios, and documents usage rules. Use when the user needs to choose colors for charts, dashboards, or data-driven graphics. Do NOT use for brand color palette design (use color-palette-design in the design category), chart type selection (use chart-type-selector), or chart formatting beyond color (use chart-formatting).

543 repo starsObserved in 2 repos
Design
GitHub

color-palette-design

Produces a complete color palette with primary, secondary, and neutral colors including hex codes, tint/shade scales, semantic color assignments, and WCAG contrast verification. Use when the user asks to create a color palette, choose brand colors, define color tokens, check color contrast for accessibility, or build a color system. Do NOT use for full design system tokens (use design-system-foundations), typography choices (use typography-system), or full brand identity (use brand-identity-brief).

543 repo starsObserved in 2 repos
Design
GitHub

comic-book-creator

Complete comic book creation guidance covering panel layout, sequential storytelling, character design, lettering, page composition, script formatting, inking techniques, coloring approaches, and distribution options for both print and digital publication. Use when the user asks about comic book creator or needs help with related topics. Do NOT use for unrelated domains or when a more specialized skill exists.

543 repo starsObserved in 2 repos
Design
GitHub

comic-creator

Comic creation assistant covering panel layout, visual storytelling, pacing, lettering, digital and traditional tools, scripting formats, character design, publishing paths for webcomics and print, and the business of comics to help creators bring sequential art to life. Use when the user asks about comic creator, or needs help with comic creation assistant covering panel layout, visual storytelling, pacing, lettering, digital and traditional tools, scripting formats, character design, publishing paths for webcomics and print, and the business of comics to help creators bring sequential art to life. Do NOT use when the request requires professional specialized advice or falls outside the scope of comic creator.

543 repo starsObserved in 2 repos
Design
GitHub

component-design-spec

Produces a complete UI component specification with states, props, accessibility requirements, and usage guidelines as a tool-agnostic design artifact. Use when the user asks to spec out a UI component, define component states and variants, document a design component, or create component design requirements. Do NOT use for full page wireframes (use wireframe-specification), design token systems (use design-system-foundations), or coded component implementation (use a software-development skill).

543 repo starsObserved in 2 repos
Design
GitHub

component-library

Component library design expertise covering design system tokens, component API design, compound components, polymorphic components, accessibility by default, Storybook documentation, testing, versioning, and tree-shaking. Use when the user asks about component library, component library best practices, or needs guidance on component library implementation. Do NOT use when the user needs a different specialized skill or is asking about an unrelated technology domain.

543 repo starsObserved in 2 repos
Design
GitHub

composition-guide

Applies photographic composition principles to a described subject including rule of thirds grid placement, leading lines direction, foreground/background layering, frame-within-frame opportunities, and negative space allocation. Produces specific framing instructions applicable to any camera. Use when the user asks about photo composition, framing a shot, or arranging visual elements in a photograph. Do NOT use for exposure or camera settings (use exposure-triangle), lighting setup (use lighting-setup), or post-processing workflow (use photo-editing-workflow).

543 repo starsObserved in 2 repos
Design
GitHub