|
critique-affordance
|
Critique a screen's interactive affordances โ what looks clickable, state visibility, CTA clarity, a |
|
critique-brand-consistency
|
Critique a screen's brand consistency against mood.md, voice.md, and tokens.md. Use when auditing br |
| critique-color |
Critique a screen's colour usage โ contrast ratios, palette coherence, semantic meaning, and colour |
|
critique-composition
|
Critique a screen's composition โ balance, whitespace, rhythm, and gestalt principles. Use when audi |
|
critique-information-density
|
Critique a screen's information density โ cognitive load, content prioritisation, scanning patterns, |
|
critique-typography
|
Critique a screen's typography โ scale usage, readability, consistency, and token compliance. Use wh |
|
critique-visual-hierarchy
|
Critique a screen's visual hierarchy โ entry point, eye flow, weight distribution, and emphasis. Use |
| dops-critique |
Facilitate structured design critiques with clear feedback frameworks and actionable outcomes. Use w |
| dops-debt-audit |
Identify, categorize, and prioritize accumulated design inconsistencies and structural problems acro |
|
dops-handoff-spec
|
Create developer handoff specifications with measurements, behaviors, assets, and edge cases. Use wh |
|
dops-impact-reporting
|
Communicate design's contribution to business and user outcomes in terms that resonate with stakehol |
|
dops-qa-checklist
|
Create QA checklists for verifying design implementation accuracy. Use when preparing a design QA pa |
|
dops-review-process
|
Establish design review gates with criteria, checklists, and approval workflows. Use when setting up |
| dops-sprint-plan |
Plan and facilitate design sprints from challenge framing through prototype testing. Use when planni |
|
dops-team-workflow
|
Design team workflows covering task management, collaboration rituals, and tooling. Use when setting |
|
dops-version-control
|
Define version control strategies for design files, components, and libraries. Use when setting up v |
|
dsys-accessibility-audit
|
Conduct a comprehensive accessibility audit against WCAG guidelines with severity ratings and remedi |
|
dsys-component-spec
|
Write a detailed component specification including props, states, variants, accessibility requiremen |
|
dsys-design-token
|
Define and organize design tokens (color, spacing, typography, elevation) with naming conventions an |
|
dsys-documentation-template
|
Generate structured documentation templates for components, patterns, or guidelines within a design |
| dsys-governance |
Define how a design system evolves โ contribution models, versioning, change management, and depreca |
| dsys-icon-system |
Create an icon system specification covering grid, sizing, naming, categories, and implementation gu |
|
dsys-localization
|
Design interfaces that adapt gracefully to multiple languages, writing directions, and cultural cont |
|
dsys-motion-system
|
Define a motion system with duration tokens, easing vocabulary, and reduced-motion handling for cons |
|
dsys-naming-convention
|
Establish a naming convention system for design elements, components, and tokens with clear rules an |
|
dsys-pattern-library
|
Structure a pattern library entry with problem context, solution pattern, usage examples, and relate |
|
dsys-theming-system
|
Design a theming architecture that supports brand variants, dark mode, and high-contrast modes with |
|
ix-animation-principles
|
Apply animation principles โ easing, duration, and choreography โ to UI motion for purposeful, polis |
|
ix-doherty-threshold
|
Apply the Doherty Threshold โ keep system response times under 400ms to maintain user flow and perce |
|
ix-error-handling
|
Design error prevention, detection, and recovery experiences. Use when designing error states, valid |
|
ix-feedback-patterns
|
Design system feedback for user actions including confirmations, status updates, and notifications. |
| ix-fitts-law |
Apply Fitts's Law to size and position interactive targets for fast, accurate interaction. Use when |
| ix-form-design |
Design forms that minimize friction, prevent errors, and guide users to successful completion. Use w |
|
ix-gesture-patterns
|
Design gesture-based interactions for touch and pointer devices. Use when designing swipe, drag, pin |
| ix-hicks-law |
Apply Hick's Law to reduce decision time by limiting the number of simultaneous choices presented to |
|
ix-interfaces-that-feel
|
Apply an emotional resonance lens to any UI to find what's missing and prescribe specific changes at |
|
ix-loading-states
|
Design loading, skeleton, and progressive content reveal patterns. Use when designing loading indica |
|
ix-micro-interaction-spec
|
Specify micro-interactions with trigger, rules, feedback, and loop/mode definitions. Use when specif |
| ix-millers-law |
Apply Miller's Law โ chunk information into groups of about four โ to work within working memory lim |
|
ix-navigation-patterns
|
Select and design navigation patterns that match product structure, user tasks, and platform convent |
|
ix-onboarding-design
|
Design first-run experiences that get users to value quickly without overwhelming them. Use when des |
| ix-search-ux |
Design search experiences that help users find what they need, recover from failure, and refine resu |
| ix-state-machine |
Model complex UI behavior as finite state machines with states, events, and transitions. Use when mo |
|
ui-aesthetic-usability
|
Apply the Aesthetic-Usability Effect so visually consistent, polished interfaces are perceived as mo |
| ui-color-system |
Build a comprehensive color system with palette generation, semantic mapping, and accessibility comp |
| ui-dark-mode |
Design effective dark mode interfaces with proper color adaptation, contrast, and elevation. Use whe |
|
ui-data-visualization
|
Design clear, accessible data visualizations with appropriate chart selection and styling. Use when |
|
ui-illustration-style
|
Define an illustration style guide with visual language, color usage, and application rules. Use whe |
|
ui-law-of-common-region
|
Apply the Law of Common Region to group elements using containers, backgrounds, and boundaries. Use |
|
ui-law-of-proximity
|
Apply the Law of Proximity to group related elements through spatial relationships. Use when spacing |
| ui-layout-grid |
Define responsive layout grid systems with columns, gutters, margins, and breakpoint behavior. Use w |
|
ui-readable-measure
|
Set optimal line lengths for readability across typography scales and responsive layouts. Use when c |
|
ui-responsive-layout
|
Design adaptive layouts and interactions that work across all screen sizes and input methods. Use wh |
|
ui-spacing-system
|
Create a consistent spacing system based on a base unit with contextual application rules. Use when |
|
ui-typography-scale
|
Create a modular typography scale with size, weight, and line-height relationships. Use when definin |
|
ui-visual-hierarchy
|
Establish clear visual hierarchy through size, weight, color, spacing, and positioning. Use when pri |
|
ui-von-restorff-effect
|
Apply the Von Restorff Effect to make the most important element distinctly different from its surro |
