Design skills

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

table-headers

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Define proper table headers. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

73.22k repo starsObserved in 1 repos
Design

tabs-accessibility

Use when reviewing templates, rendered HTML, or shared components related to Make tabs keyboard navigable. Validate the final browser-facing markup, not just the source framework abstraction.

73.22k repo starsObserved in 1 repos
Design

tel-mailto

Use when applies to contact pages, business listing pages, headers/footers, and any page displaying a phone number or email address. Use when auditing contact UX or schema-marked LocalBusiness pages.

73.22k repo starsObserved in 1 repos
Design

th-has-data-cells

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure table headers associate with data cells. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

73.22k repo starsObserved in 1 repos
Design

video-accessibility

Use when reviewing templates, rendered HTML, or shared components related to Make videos accessible with captions. Validate the final browser-facing markup, not just the source framework abstraction.

73.22k repo starsObserved in 1 repos
Design

Shade component decision

Decide which Shade layer (Token, Primitive, Component, Recipe, Pattern) a new piece of UI belongs in — and whether it should be added to Shade at all. Trigger when creating new files in apps/shade/src/components, or proposing to add a new Shade component.

54.43k repo starsObserved in 2 repos
Design

Shade dropdown surface contract

DropdownMenu, Select, and Popover share one visual recipe (bg-surface-elevated-2 + border-border/60 dark:border-border/30 + shadow-md). Change them together. Trigger when editing any of those three Shade files.

54.43k repo starsObserved in 2 repos
Design

cli-anything-mermaid

Command-line interface for Mermaid Live Editor - Create, edit, and render Mermaid diagrams via stateful project files and mermaid.ink renderer URLs. Designed for AI agents and power users who need to generate flowcharts, sequence diagrams, and other visualizations without a GUI.

45.37k repo starsObserved in 6 repos
Design

cli-hub-matrix-image-design

Capability-based multi-tool matrix for image and graphic design: AI generation, raster/vector editing, UI mockups, diagrams, upscaling, photo library, and publishing.

45.37k repo starsObserved in 2 repos
Design

ui-a11y

Audit a component or page for accessibility issues and fix them

43.34k repo starsObserved in 1 repos
Design