Design skills
Browse reusable Agent Skills, each with a clear purpose and practical guidance.
azure-architecture
Expert guidance for designing Azure solutions using Azure Architecture. Covers reference architectures, solution ideas, design patterns, technology choices, architecture styles, best practices, anti-patterns, example workloads, and migration guides. Use when designing AKS, SAP, IoT, data/AI platforms, or migrating AWS/GCP/on-prem workloads to Azure, and other Azure Architecture related development tasks.
journey-design
Design cross-channel customer journeys. Use when: mapping touchpoints, branching logic, or stage transitions.
color-math-accessibility
Calculate, review, and generate web color systems using RGB, HSL, LAB, OKLCH, contrast ratios, luminance, opacity, blend modes, and light/dark mode transformations. Use when auditing accessible colors, converting color models, deriving palettes, checking WCAG contrast, building theme tokens, or debugging opacity and CSS blend math.
css-grid-math
Derive and debug CSS Grid layout math for grid coordinates, line placement, spans, negative indexes, fr units, minmax(), fit-content(), repeat(), auto-fill, and auto-fit. Use when building grid systems, explaining track sizing, troubleshooting fr distribution, placing items by line numbers, or converting a layout sketch into CSS Grid formulas.
documentation-information-architecture
Audit, organize, and redesign developer documentation information architecture, including content inventory, navigation, landing pages, sequences, hierarchies, webs, breadcrumbs, sidebars, metadata, redirects, migration, platform/tool selection, and maintainable IA decisions. Use when restructuring docs sites, improving findability, planning doc migration, evaluating docs tooling, or organizing large documentation sets.
feedback-loop-states-and-latency
Use this skill when designing the visible states an interactive element passes through (idle / pending / success / error) and matching feedback timing to the user's perceptual thresholds. Trigger when designing button states, form-submit flows, file-upload progress, loading screens, or any interaction whose response time is variable. Sub-aspect of `feedback-loop`; read that first.
form-follows-function-success-criteria
Use this skill when the team is in a form-vs-function debate and needs to step back to define what "success" actually means for the design. Trigger when stakeholders disagree about visual treatment, when a design feels off and no one can articulate why, or when reviewing a design against an unclear brief. Sub-aspect of `form-follows-function`; read that first.