@gunkin/uiify 0.0.16-alpha → 0.0.17-alpha

package/skills/uiify/references/elements/command-palette.md

@@ -0,0 +1,22 @@
+# command-palette
+
+Binding: gap
+
+Let users find and invoke a small set of named commands.
+
+For a non-interactive command list, use a labeled search form and links or buttons with clear names. A searchable list is not a command palette until keyboard navigation, selection, and dismissal behavior are implemented.
+
+```html
+<form role="search">
+  <label for="commands">Search commands</label>
+  <input id="commands" type="search" />
+  <ul><li><a href="/settings">Open settings</a></li></ul>
+</form>
+```
+
+This is an app-level composition recipe; it does not add a component to UIify.
+
+## Sources
+
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/cookie-banner.md

@@ -0,0 +1,23 @@
+# cookie-banner
+
+Binding: gap
+
+Explain cookie choices and provide consent actions.
+
+State which optional storage choices are available and link to the detailed policy. Offer distinct actions for consent choices without making one choice the only visible path.
+
+```html
+<aside aria-labelledby="cookie-title">
+  <h2 id="cookie-title">Cookie choices</h2>
+  <p>Choose whether to allow optional cookies.</p>
+  <button type="button">Allow optional cookies</button>
+  <button type="button">Reject optional cookies</button>
+</aside>
+```
+
+This is an app-level composition recipe; it does not add a component to UIify.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/date-picker.md

@@ -0,0 +1,19 @@
+# date-picker
+
+Binding: gap
+
+Collect one calendar date using the native date control.
+
+Prefer the native date input for one date. Show date constraints in text and connect invalid-value feedback to the input.
+
+```html
+<label for="start-date">Start date</label>
+<input id="start-date" name="start-date" type="date" />
+```
+
+This is an app-level composition recipe; it does not add a component to UIify.
+
+## Sources
+
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/divider.md

@@ -0,0 +1,18 @@
+# divider
+
+Binding: gap
+
+Separate adjacent thematic sections when a heading is not appropriate.
+
+Use a thematic separator only when it marks a real change of topic; leave purely decorative separators out of the accessibility tree.
+
+```html
+<hr />
+```
+
+This is an app-level composition recipe; it does not add a component to UIify.
+
+## Sources
+
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/empty-state.md

@@ -0,0 +1,22 @@
+# empty-state
+
+Binding: gap
+
+Explain why a collection has no items and offer a relevant next step.
+
+Explain what is empty and why it matters, then offer one next action that addresses the empty state.
+
+```html
+<section aria-labelledby="empty-title">
+  <h2 id="empty-title">No invoices yet</h2>
+  <p>Create an invoice to see it listed here.</p>
+  <a href="/invoices/new">Create invoice</a>
+</section>
+```
+
+This is an app-level composition recipe; it does not add a component to UIify.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/feature-grid.md

@@ -0,0 +1,14 @@
+# feature-grid
+
+Binding: gap
+
+Present related product capabilities as a coherent set.
+
+Use a repeated grid when the features share the same level and structure. Keep each feature’s heading and explanation in reading order at narrow widths.
+
+Related laws: references/laws/proximity.md, references/laws/readability.md
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/visual-presentation.html) (verified 2026-10-16)

package/skills/uiify/references/elements/field.md

@@ -0,0 +1,14 @@
+# field
+
+Binding: field
+
+Keep a label and its form control together.
+
+Keep each label next to its control. Put a group label on related controls and show validation beside the field it describes.
+
+Related laws: references/laws/proximity.md, references/laws/accessibility.md
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/grouping/) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/labels/) (verified 2026-10-16)

package/skills/uiify/references/elements/footer.md

@@ -0,0 +1,14 @@
+# footer
+
+Binding: gap
+
+Offer secondary navigation at the end of a page.
+
+Use a named footer landmark for site-wide information and group its links by destination. Preserve the site’s repeated navigation order.
+
+Related laws: references/laws/readability.md, references/laws/accessibility.md
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/consistent-navigation.html) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/form.md

@@ -0,0 +1,14 @@
+# form
+
+Binding: form
+
+Collect related workspace preferences.
+
+Group related controls and explain the form’s purpose before its fields. Keep submit, validation, and success feedback connected to the form.
+
+Related laws: references/laws/proximity.md, references/laws/accessibility.md
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/grouping/) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/labels/) (verified 2026-10-16)

package/skills/uiify/references/elements/header.md

@@ -0,0 +1,14 @@
+# header
+
+Binding: header
+
+Orient visitors with stable top-level navigation.
+
+Use the header for the site identity and primary navigation. Keep repeated navigation in a consistent order and give each navigation landmark a distinct name when there are several.
+
+Related laws: references/laws/readability.md, references/laws/accessibility.md
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/consistent-navigation.html) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/hero.md

@@ -0,0 +1,14 @@
+# hero
+
+Binding: gap
+
+Introduce the product and its next action.
+
+Lead with the page’s primary purpose, a specific heading, and its main action. Add a secondary action only when it serves a different useful path.
+
+Related laws: references/laws/von-restorff.md, references/laws/accessibility.md
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/image-gallery.md

@@ -0,0 +1,20 @@
+# image-gallery
+
+Binding: gap
+
+Show related images with useful captions or alternatives.
+
+Represent a gallery as a list of figures. Give each image an alternative that conveys its content and use a caption when the surrounding text needs context.
+
+```html
+<ul>
+  <li><figure><img src="/place.webp" width="640" height="400" alt="Stone bridge over a river" /><figcaption>Old town bridge</figcaption></figure></li>
+</ul>
+```
+
+This is an app-level composition recipe; it does not add a component to UIify.
+
+## Sources
+
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/inline-alert.md

@@ -0,0 +1,18 @@
+# inline-alert
+
+Binding: gap
+
+Give a short message context beside the content it affects.
+
+Use a status announcement for non-urgent updates and an alert only for information requiring immediate attention. Keep the message visible in context.
+
+```html
+<p role="status">Changes saved.</p>
+```
+
+This is an app-level composition recipe; it does not add a component to UIify.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/input.md

@@ -0,0 +1,14 @@
+# input
+
+Binding: input
+
+Accept a short text value.
+
+Give each text input a persistent visible label. Use helper and error text for format or validation details rather than relying on a placeholder.
+
+Related laws: references/laws/proximity.md, references/laws/accessibility.md
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/grouping/) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/labels/) (verified 2026-10-16)

package/skills/uiify/references/elements/logo-wall.md

@@ -0,0 +1,20 @@
+# logo-wall
+
+Binding: gap
+
+Show organizations associated with a product or event.
+
+Give each meaningful organization logo an identifying alternative. If the adjacent text already names it, use an empty alternative to avoid repetition.
+
+```html
+<ul aria-label="Organizations using the product">
+  <li><img src="/logos/acme.svg" width="120" height="40" alt="Acme" /></li>
+</ul>
+```
+
+This is an app-level composition recipe; it does not add a component to UIify.
+
+## Sources
+
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/pagination.md

@@ -0,0 +1,14 @@
+# pagination
+
+Binding: pagination
+
+Navigate the pages of a result set.
+
+Make the current page clear in text and expose it as the current page. Keep previous and next actions named and disable them at the ends.
+
+Related laws: references/laws/proximity.md, references/laws/accessibility.md
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/labels/) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/password-input.md

@@ -0,0 +1,19 @@
+# password-input
+
+Binding: gap
+
+Collect a secret string while the browser masks entered characters.
+
+Use a visible label, the appropriate autocomplete value, and nearby password requirements. Keep entered values when showing validation errors.
+
+```html
+<label for="account-password">Password</label>
+<input id="account-password" name="password" type="password" autocomplete="current-password" />
+```
+
+This is an app-level composition recipe; it does not add a component to UIify.
+
+## Sources
+
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/pricing-table.md

@@ -0,0 +1,13 @@
+# pricing-table
+
+Binding: gap
+
+Let visitors compare plan features and choose a plan.
+
+Compare plans using the same feature order and clearly associate each action with its plan. Explain meaningful differences without making color the only signal.
+
+Related laws: references/laws/proximity.md
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/progress-bar.md

@@ -0,0 +1,19 @@
+# progress-bar
+
+Binding: gap
+
+Show determinate completion of a task.
+
+Give the progress value a visible label and range. Include text that explains completion when the visual meter is unavailable.
+
+```html
+<label for="upload-progress">Upload</label>
+<progress id="upload-progress" value="3" max="5">3 of 5</progress>
+```
+
+This is an app-level composition recipe; it does not add a component to UIify.
+
+## Sources
+
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/search-input.md

@@ -0,0 +1,14 @@
+# search-input
+
+Binding: gap
+
+Find records within the current table.
+
+Give search a visible label and identify the collection it searches. Keep filters and pagination near the result list and announce result changes when they update.
+
+Related laws: references/laws/proximity.md, references/laws/accessibility.md
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/labels/) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/select.md

@@ -0,0 +1,14 @@
+# select
+
+Binding: select
+
+Choose one value from a fixed list.
+
+Use a visible label and choose a native select for a finite list of options unless the task needs a different interaction. Preserve the selected value when validation fails.
+
+Related laws: references/laws/proximity.md, references/laws/accessibility.md
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/grouping/) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/labels/) (verified 2026-10-16)

package/skills/uiify/references/elements/sidebar.md

@@ -0,0 +1,20 @@
+# sidebar
+
+Binding: gap
+
+Provide a secondary set of links for a site or application section.
+
+Use a named navigation landmark with a list of destinations. Mark the current destination and keep the link order consistent across pages.
+
+```html
+<nav aria-label="Workspace">
+  <ul><li><a href="/projects" aria-current="page">Projects</a></li></ul>
+</nav>
+```
+
+This is an app-level composition recipe; it does not add a component to UIify.
+
+## Sources
+
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/stats-bar.md

@@ -0,0 +1,21 @@
+# stats-bar
+
+Binding: gap
+
+Summarize a few named values for one subject or time period.
+
+Pair each metric with a clear label and value. Use a description list when the content consists of term-and-value pairs.
+
+```html
+<dl>
+  <div><dt>Active users</dt><dd>1,248</dd></div>
+  <div><dt>Period</dt><dd>Last 30 days</dd></div>
+</dl>
+```
+
+This is an app-level composition recipe; it does not add a component to UIify.
+
+## Sources
+
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/stepper.md

@@ -0,0 +1,20 @@
+# stepper
+
+Binding: gap
+
+Show ordered steps and identify the current step in a multi-step task.
+
+Present ordered steps in their actual sequence and identify the current step in text. Do not imply that future steps are completed.
+
+```html
+<ol aria-label="Application progress">
+  <li>Account</li><li aria-current="step">Profile</li><li>Review</li>
+</ol>
+```
+
+This is an app-level composition recipe; it does not add a component to UIify.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/TR/wai-aria-1.2/#aria-current) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/switch.md

@@ -0,0 +1,14 @@
+# switch
+
+Binding: switch
+
+Expose a binary preference with a clear label.
+
+Label the setting by the result it controls and show its current on or off state. Use a switch only for an immediate binary setting.
+
+Related laws: references/laws/proximity.md, references/laws/accessibility.md
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/grouping/) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/labels/) (verified 2026-10-16)

package/skills/uiify/references/elements/table.md

@@ -0,0 +1,14 @@
+# table
+
+Binding: table
+
+Compare structured member records.
+
+Use a table for related row-and-column data, with a caption and header cells that identify the data. Associate search and filters with this table.
+
+Related laws: references/laws/proximity.md, references/laws/accessibility.md
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/labels/) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/testimonial.md

@@ -0,0 +1,21 @@
+# testimonial
+
+Binding: gap
+
+Attribute a customer quote to a named source.
+
+Use a quotation with a clear attribution. Include the speaker and relevant affiliation in text when the quotation needs that context.
+
+```html
+<figure>
+  <blockquote><p>Setup took minutes.</p></blockquote>
+  <figcaption>— Ada Lovelace, Acme</figcaption>
+</figure>
+```
+
+This is an app-level composition recipe; it does not add a component to UIify.
+
+## Sources
+
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/textarea.md

@@ -0,0 +1,14 @@
+# textarea
+
+Binding: textarea
+
+Accept a longer free-text value.
+
+Give the multiline control a visible label. State length or format limits before entry and keep any validation message beside the control.
+
+Related laws: references/laws/proximity.md, references/laws/accessibility.md
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/grouping/) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/labels/) (verified 2026-10-16)

package/skills/uiify/references/elements/timeline.md

@@ -0,0 +1,20 @@
+# timeline
+
+Binding: gap
+
+Show dated events in chronological order.
+
+Use an ordered list when sequence matters. Encode machine-readable dates with time and keep each event’s date attached to its description.
+
+```html
+<ol>
+  <li><time datetime="2026-10-16">October 16, 2026</time><p>Release published</p></li>
+</ol>
+```
+
+This is an app-level composition recipe; it does not add a component to UIify.
+
+## Sources
+
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/toast.md

@@ -0,0 +1,13 @@
+# toast
+
+Binding: toast
+
+Confirm the result of a completed save.
+
+Use a status message for brief feedback that should not interrupt the current task. Keep essential errors visible until the user can address them.
+
+Related laws: references/laws/feedback.md
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html) (verified 2026-10-16)

package/skills/uiify/references/laws/accessibility.md

@@ -0,0 +1,11 @@
+# accessibility
+
+Preserve semantic relationships and keyboard operation in either visual alternative.
+
+- Keep focus order consistent with the meaningful document order; avoid positive tabindex.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html) (verified 2026-10-16)

package/skills/uiify/references/laws/error-prevention.md

@@ -0,0 +1,12 @@
+# error-prevention
+
+Make destructive confirmation explicit and reversible until confirmed.
+
+- Give intrinsic buttons an explicit type to avoid unintended submission.
+- State the consequence, offer cancellation and focus the least destructive action.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/instructions/) (verified 2026-10-16)

package/skills/uiify/references/laws/feedback.md

@@ -0,0 +1,9 @@
+# feedback
+
+Make save results available without taking focus.
+
+- Expose the save confirmation as a status message; choose its visual proximity through the pair.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html) (verified 2026-10-16)

package/skills/uiify/references/laws/proximity.md

@@ -0,0 +1,10 @@
+# proximity
+
+Keep related controls and content visually associated.
+
+- Keep semantic grouping and visual grouping consistent; exact spacing is an owner choice.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/grouping/) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/laws/readability.md

@@ -0,0 +1,9 @@
+# readability
+
+Preserve readable content while comparing spacing and alignment.
+
+- Avoid long unbroken lines; the 80-character heuristic is inspired by a Level AAA criterion, not an AA requirement.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/visual-presentation.html) (verified 2026-10-16)

package/skills/uiify/references/laws/von-restorff.md

@@ -0,0 +1,9 @@
+# von-restorff
+
+Consider distinct emphasis for the primary action.
+
+- Use clear action labels; visual emphasis is a design hypothesis, and color alone must not carry meaning.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) (verified 2026-10-16)