guidelines.llms.txt raw feed

# AhaSlides Design System — patterns

> Composition guides over existing components. Each pattern reuses the DS's components and documents the conventions for a use case; the narrative "why" lives in the linked aha-design skill.

## App shell (guidelines/app-shell/app-shell.md)
How an AhaSlides product SCREEN is assembled from DS components — the left nav rail (real brand mark + nav items + one primary CTA), the top bar (context left, actions/avatar right), the content region, and where relevant a canvas/stage — spaced by --aha-* tokens, with a real brand identity and no dead placeholders. Closes the composition gap that turns a component-correct screen into generic-admin-template slop.
Based on: ahaslides-design:app-shell. Surfaces: dashboard, editor, presenter.
Reuses: button, icon, avatar, badge, divider, --aha-motion-mid, --aha-borderRadius.
Rules: 5. Ships code: no (doc-only).

## Audience iframe (guidelines/audience/audience.md)
How to build the audience-facing iframe of a slide-type plugin — mobile-first single-column layout, theme-from-xprops, self-rendered submit/waiting/correct-incorrect states, the standard submit-button spec, and host-utility integration — composed from existing components.
Based on: aha-design:aha-design-audience. Surfaces: audience.
Reuses: button, checkbox, icon, --aha-colorSuccess, --aha-colorError, --aha-colorWarning, --aha-colorInfo, radio, slider, textarea, toast, modal, skeleton, instruction. Component backlog: --aha-colorSuccess, --aha-colorError, --aha-colorWarning, --aha-colorInfo, radio, slider, textarea, toast, modal, skeleton, instruction.
Rules: 54. Ships code: no (doc-only).

## Canvas (guidelines/canvas/canvas.md)
How a slide type LOOKS on the canvas — the 16:9 stage, theme/colour/fonts from xprops, semantic state colours, WCAG readability from across the room, framed-vs-full-canvas, the presenter control bar, in-canvas keyboard affordances, and i18n — built from existing components.
Based on: aha-design:aha-design-canvas. Surfaces: editor, presenter, audience.
Reuses: button, icon, --aha-colorSuccess, --aha-colorError, --aha-colorWarning, --aha-colorInfo, --aha-borderRadius, aha-antd-button, kbd-chip, tooltip, focus-trap, use-deck-font. Component backlog: aha-antd-button, kbd-chip, focus-trap, use-deck-font.
Rules: 35. Ships code: no (doc-only).

## Feedback (guidelines/feedback/feedback.md)
How to build transient and post-action feedback — toasts, the DS V3 Alert inline banner, inline correct/incorrect result panels, and the CSAT thumbs widget — from existing components, plus when NOT to use a toast.
Based on: aha-design:aha-design-feedback. Surfaces: editor, respondent, dashboard, presenter, audience.
Reuses: icon, --aha-colorSuccess, --aha-colorSuccessBg, --aha-colorError, --aha-colorErrorBg, alert, toast, message, csat. Component backlog: alert, toast, message, csat.
Rules: 17. Ships code: no (doc-only).

## Overlays (guidelines/overlays/overlays.md)
How to build a modal, drawer, or popover — surface choice, safety-critical dismiss behaviour, state reset, drawer placement/width, the async-confirm pattern, inline error surfacing, and danger-styled confirms — built from existing components.
Based on: aha-design:aha-design-overlays. Surfaces: editor, dashboard, settings.
Reuses: button, icon, --aha-color-error, modal, drawer, popover, alert. Component backlog: modal, drawer, popover, alert.
Rules: 10. Ships code: no (doc-only).

## Settings (guidelines/settings/settings.md)
How to organise a settings surface — group ordering, help-text vs tooltip, sub-settings, plan-gating, and the danger zone — built from existing components.
Based on: aha-design:aha-design-settings. Surfaces: editor, settings, dashboard.
Reuses: checkbox, button, icon, --aha-size*, --aha-color-error, switch, select, input, tooltip, settings-list, dropdown, menu, mode-field, counted-input, counted-textarea, card-select, number-with-unit, option-row, numbered-item, question-list, image-dropzone, image-action-button, info-box.
Rules: 13. Ships code: no (doc-only).

## Status badges (guidelines/status-badges/status-badges.md)
How to build a status/state pill on a domain object — dot + localised label, the aha-status-pill class convention, the role=status + aria-label contract, i18n labels, and colour driven by the modifier class — from existing components.
Based on: aha-design:aha-design-status-badges. Surfaces: dashboard, admin, tools.
Reuses: icon, --aha-color-success, --aha-color-error, status-pill, tag, badge. Component backlog: status-pill.
Rules: 9. Ships code: no (doc-only).

## UX writing (guidelines/ux-writing/ux-writing.md)
The WORDS in every product surface — sentence-case casing, one canonical label, and specific / actionable / blameless error-empty-feedback microcopy — applied to the labels and copy the existing components render.
Based on: aha-design:aha-design-ux-writing. Surfaces: editor, dashboard, settings, audience.
Reuses: button, icon, --aha-color-error, --aha-color-warning, alert, toast, empty-state, error-page. Component backlog: alert, toast, empty-state, error-page.
Rules: 10. Ships code: no (doc-only).