design-system-skills

Use when a game for children or learners needs age-appropriate comprehension, scaffolding, learning-feedback separation, privacy/safety, stopping cues, guardian/teacher needs, accessible play, or non-exploitative engagement. Use onboarding-and-first-run-design for ordinary apps.

Use when a game needs visual pillars, shape language, colour scripting, character/world readability, cultural motif governance, 2D/3D cohesion, VFX hierarchy, an asset bible, style scalability, performance-aware art, or engine handoff. Use illustration-style-and-systems for non-game illustration sets.

Use when tuning a game action through anticipation, response, impact, timing, animation, VFX, audio-visual coordination, camera, hit-stop, particles, haptics, reduced-motion, sensory alternatives, or intensity settings. Use micro-interactions-and-feedback for ordinary UI controls.

Use when designing game HUDs, menus, maps, inventory, dialogue, tutorials, pause/settings, save/load, failure/success, controller focus, touch, couch-distance, or diegetic interfaces. Use ordinary app UI skills for non-game task flows.

Use when a game needs its player fantasy and interaction loop routed into HUD, art direction, feedback, camera, input, accessibility, testing, and engine handoff. Use ordinary app UI skills for non-game software and the four game specialists for focused craft.

Use when designing or auditing an interactive UI for WCAG 2.2 AA, keyboard and focus behaviour, accessible names, screen readers, target size, reflow, authentication, or reduced motion. Use inclusive-and-assistive-design for needs beyond the compliance floor.

Use when auditing one existing UI, page, screen, flow, or document for design quality and producing evidence-backed, severity-rated findings. Use product-design-audit for multiple product surfaces and design-qa-and-pre-launch-review for a release verdict.

Use when facilitating a live or asynchronous design critique that needs a clear ask, safe feedback, a decider, and recorded outcomes. Unlike design-audit or heuristic evaluation, this runs the human review session rather than producing expert findings.

Use when auditing or redesigning consent, urgency, pricing, subscription, checkout, or retention flows for deception and coercion. Unlike product-design-audit, this is the focused ethics gate; conversion optimisation remains with its surface skill.

Use when a page, screen, flow, or component is done and needs a final design go/no-go gate across implementation parity, browsers, devices, accessibility, performance, and anti-slop checks. Use design-audit for diagnosis before release.

Use when designing beyond the WCAG floor for cognitive, visual, motor, assistive-technology, temporary, or situational ability ranges. Unlike accessibility-wcag-2-2-compliance, this creates inclusive adaptations rather than certifying criteria.

Use when a UI or document must support multiple locales, scripts, RTL direction, bidi text, string expansion, pluralisation, or locale formatting. Unlike responsive-layout work, this owns language-driven adaptation; translation wording remains with content design.

Use when page speed, loading perception, Core Web Vitals, asset budgets, image or font weight, FOIT/FOUT, or layout shift must be treated as design constraints. Use engineering performance skills for code-level profiling and remediation.

Use when auditing a real product across multiple surfaces such as marketing web, SaaS, iOS, Android, or desktop and producing scored, prioritised, skill-routed findings. Use design-audit for one artefact and design-qa-and-pre-launch-review for a release gate.

Use when AI-slop definitions, banned fonts, visual tells, product-slop patterns, or anti-slop doctrine may have changed and the design engine needs a self-review pass coordinated with the digital-research engine before updating guidance.

Use when existing design-audit findings must become a prioritised remediation plan, redesign, re-test, and measured before/after result. Use design-audit or product-design-audit to diagnose problems and design-qa-and-pre-launch-review for the final release verdict.

Use when auditing imagery, brand assets, UI screens, or AI product features for visual and product slop. Unlike ai-slop-typography-audit, this excludes type; written-copy slop routes to the digital-research engine.

Use when auditing an existing artefact for banned or convergent type, weak hierarchy, monotype systems, or unstated choices. Unlike visual-product-slop-audit, this inspects typography only; font selection owns the replacement design.

Use when browser typography must scale smoothly across viewport or container sizes while preserving zoom, reflow, measure, and hierarchy. Unlike responsive-and-adaptive-layout, this owns type sizing only; face and pairing choices remain upstream.

Use when a chosen font must be loaded or embedded in web, DOCX, PPTX, PDF, or XLSX with verified permission. Unlike premium-font-scan, this implements format-specific embedding; type choice remains with font-selection-and-pairing.

Use when choosing and pairing typefaces for a website, UI, document, report, proposal, deck, or marketing page, including design voice and licence constraints. Use font-embedding-and-licensing after selection and ai-slop-typography-audit for existing output.

Use when a font category is known and local premium files must be checked before choosing the OFL baseline. Unlike font-selection-and-pairing, this resolves availability and licence evidence; embedding routes to font-embedding-and-licensing.

Use when configuring variable-font axes, optical sizing, numerals, or OpenType features after a face is chosen. Unlike font-selection-and-pairing, this implements type mechanics; embedding and licence work routes to font-embedding-and-licensing.

Use when verifying or fixing text, UI, focus, border, status, or data colours for contrast and colour-vision accessibility. Unlike color-system-and-palette, this is the focused WCAG/APCA and non-colour-cue gate, not palette creation.

Use when packaging an approved identity into a client-facing guide with logo, colour, typography, spacing, imagery, voice, and application rules. Unlike brand-visual-identity, this documents settled decisions rather than creating the identity.

Use when defining or refreshing a distinctive visual identity across logo usage, colour, type, spacing, imagery, and applications. Unlike logo-and-wordmark-design, this owns the whole identity system; detailed palette and type construction route to specialist skills.

Use when generating a starting website palette from brand hues, imagery, audience, mood, or colour harmony. Unlike color-system-and-palette, this selects candidate colours; semantic roles, ramps, dark themes, and final contrast contracts are downstream.

Use when building a cross-format colour system with an authored anchor, perceptual ramps, semantic roles, contrast contracts, and theme mappings. Unlike color-selection, this operationalises a palette; focused contrast audit routes to accessible-color-and-contrast.

Use when building, adding, or auditing a dark mode — or any multi-theme (light/dark/high-contrast/dimmed) system — for a website, app/web UI, dashboard, or themed document. Builds a true dual-mode semantic palette where dark is a deliberate remap (lowered chroma, lightened/desaturated accents, dark-grey surfaces carrying the brand hue, NOT

Use when constructing or specifying a logo, wordmark, lockups, clear space, responsive marks, favicons, or app icons. Unlike brand-visual-identity, this owns mark geometry and reduction; strategy, palette, typography, and the broader system remain upstream.

Use when a screen, page, slide, or cover needs a deliberate focal point, reading order, figure-ground separation, and visual tension. Do not use for choosing columns or spacing units; route those scaffold decisions to layout-grid-and-spacing.

Use when an article, essay, documentation page, case study, or web report needs sustained-reading measure, rhythm, landmarks, notes, figures, or captions. Do not use for editable DOCX or print-PDF production; route those artefacts to the document skills.

Use when a page, screen, slide, or document needs its column scaffold, margins, gutters, spacing rhythm, or alignment system defined. Do not use for hierarchy inside an established grid or for breakpoint behaviour; route those to composition or responsive layout.

Use when a browser-rendered page, component, dashboard, or email must adapt across widths using intrinsic layout, fluid values, breakpoints, or container queries. Do not use to establish the base grid or for fixed-canvas documents; route those to layout-grid-and-spacing.

Use when an AI agent or copilot interface needs status, plans, approvals, uncertainty, interruption, or trust controls across web or mobile. Do not use for formatting a single AI answer; route output structure and citations to ai-output-design.

Use when an AI answer surface needs structure, citations, grounding, editable refinement, or a chat-versus-canvas decision. Do not use for agent autonomy, approvals, or execution status; route those interaction controls to ai-agent-ux.

Use when a single interactive control needs complete hover, focus-visible, pressed, selected, read-only, and transition fidelity. Do not use for aggregate data-region lifecycle handling or API architecture; route those concerns to system-state design or component-library architecture.

Use when a UI, website, dashboard, deck, or rendered artefact needs one defensible visual signature before high-fidelity build. Do not use for detailed token production or final QA; route those to the relevant design-system or audit skill after direction is chosen.

Use when a web, iOS, or Android form needs field anatomy, validation, errors, multi-step flow, accessibility, or submission recovery. Do not use for general page layout or backend-only validation; pair with platform implementation and contract skills.

Use when an interface flow needs a proven behaviour, navigation, action, layout, or data-display pattern selected from task and context. Do not use for visual styling or per-component state fidelity; route those to practical-ui-design or component-states.