@gunkin/uiify 0.0.15-alpha → 0.0.17-alpha

package/skills/uiify/SKILL.md

@@ -0,0 +1,145 @@
+---
+name: uiify
+description: >-
+  Use when creating or improving a web page with @gunkin/uiify, especially when a project needs component
+  coverage, a distinctive visual direction, or UIify-aware design and implementation guidance.
+disable-model-invocation: true
+---
+
+# /uiify
+
+Page request: $ARGUMENTS
+
+Add UIify component and UX knowledge to the user's request. Follow the agent's normal workflow and the project's instructions; this skill is a reference, not a separate interaction protocol. Do not add approval gates, fixed stages, routine questions or pauses. Use ordinary language in the user's language for useful progress and results, without internal stage names or machine-readable status markers. Proceed with authorized work autonomously; handle genuine missing requirements through the agent's normal workflow.
+
+## Project context
+
+Use the explicit request in the conversation if the client does not substitute `$ARGUMENTS`. Read repository instructions, the relevant package manifest and framework config, and a route example as needed. Resolve `@gunkin/uiify` from the selected workspace, including hoisted dependencies in parent workspaces. Follow the requested framework's route conventions and RSC/client boundaries. Create the requested route rather than replacing the home page; `src/App.tsx` is a destination only when it matches the request.
+
+Reuse existing design decisions, tokens and conventions, including `DESIGN.md` when present. Do not create `DESIGN.md` or a managed state block merely because this skill was invoked. Create or update planning files only when the user or project workflow calls for them, preserving unrelated content. Keep changes within the requested page and necessary source files; setup and dependency changes follow the user's request and project rules.
+
+## Select knowledge for the page
+
+Match the needed elements to the Index by name or alias. Use the listed component binding; never invent a binding. A `gap` or an unlisted element needs custom UI, not a guessed UIify API.
+
+For each selected element with a fourth-column reference path, read that file once. A blank path means no curated recipe is available. From the Composition index, read only relationships where both elements are needed on the page. Read each selected reference and linked law once, including the related laws named by element recipes. Do not load the complete catalog or unrelated component references.
+
+For mapped components, read the resolved package's `agents/index.md` once and the relevant `agents/reference/components/<name>.md`, then adapt a documented example. Import from `@gunkin/uiify/components/<name>`. Inspect Runtime exports and the Types/declaration file before rendering: use the explicit `NameRoot` export when available. A namespace export is not itself a JSX component; use its `.Root` or an explicit root export. Prefer these version-matched references over memory. Use UIify wherever its documented API covers the interaction; for gaps, use semantic native HTML or custom components following UIify's public styling and accessibility contracts.
+
+## Design guidance
+
+Consult `frontend-design` when available for design direction; if absent, use the built-in guidance below. Consult `vercel-react-best-practices` for relevant React performance decisions and `web-design-guidelines` for reviews. These skills are optional references. UIify's public component and styling contracts take precedence over conflicting advice.
+
+Ground the visual direction in the subject, audience and primary job. Plan clear typography, hierarchy, grouping, purposeful copy and responsive layout using existing semantic color roles. Choose one signature detail appropriate to the subject and keep the rest restrained. Avoid defaulting to a gradient hero, repeated equal cards or decorative numbering without a reason. Preserve visible focus, keyboard-sized targets and reduced-motion behavior.
+
+For a settings page, group fields by the decision the person makes, keep labels and validation close to controls, and give one `Button` the save action. Use documented anatomy:
+
+```tsx
+<Field.Root id="email" invalid={invalid} required>
+  <Field.Label fieldId="email" required>Email</Field.Label>
+  <Field.Control as="input" fieldId="email" type="email" invalid={invalid} required />
+  <Field.Error fieldId="email" invalid={invalid}>Enter a valid email address</Field.Error>
+</Field.Root>
+<Button type="submit">Save changes</Button>
+```
+
+Do not add an unrelated marketing hero or make every field group an equally prominent card. For unresolved gaps, explain material limitations in plain language; research only when it helps the request. Research does not grant approval to change the library's public API or mark a catalog gap accepted.
+
+## Verification guidance
+
+Use applicable project build, typecheck and test commands when permitted. The optional `node <resolved-skill-directory>/scripts/lint.mjs <project-root>` checks only the static subset enabled by accepted laws in existing design state. No enabled checks is not proof of accessibility. Missing parsers or execution failures mean unavailable, never a pass.
+
+Reuse existing browser and accessibility tooling to inspect responsive layouts, keyboard access and requested interactions. When missing tools are needed for quality verification, use Playwright for browser checks and axe-core (or the project's axe integration) for accessibility checks. Before installing missing Playwright or axe-core packages or downloading browser binaries, notify the user briefly in their language, explaining what will be installed and why. For example: “I'll install Playwright and axe-core as development tools to check the page in a browser and catch accessibility issues.” This is a notification, not a confirmation question; continue within existing authorization and respect project installation rules. Use the project's package manager and development dependencies, reuse existing integrations, and install only what is needed.
+
+Repair findings within the task's scope and rerun the affected checks. If commands, installation or browser execution are unavailable or prohibited, report those checks as not run and explain the limitation. Report actual checks and remaining issues in ordinary language; never claim a check passed without running it.
+
+## Index
+
+One line per element: `element|aliases|uiify component or gap|reference path`. A blank final field means no curated reference.
+
+```text
+accordion|faq-accordion,disclosure|accordion|
+alert-modal|confirmation-dialog,alert-dialog|alert-modal|references/elements/alert-modal.md
+avatar|profile-picture|gap|references/elements/avatar.md
+badge|chip,tag|gap|references/elements/badge.md
+bar-chart|column-chart|gap|references/elements/bar-chart.md
+breadcrumb|breadcrumbs|breadcrumb|
+button|cta-button,icon-button,primary-button|button|references/elements/button.md
+candle-chart|candlestick-chart|candle-chart|
+card|content-card|gap|references/elements/card.md
+carousel|testimonial-carousel,image-slider|carousel|
+checkbox||checkbox|
+code-block|code-snippet|gap|references/elements/code-block.md
+collapsible|expandable-section|collapsible|
+color-picker||color-picker|
+combobox|autocomplete,typeahead|combobox|
+command-palette|spotlight-search|gap|references/elements/command-palette.md
+context-menu|right-click-menu|context-menu|
+cookie-banner|cookie-consent|gap|references/elements/cookie-banner.md
+date-picker|calendar-picker|gap|references/elements/date-picker.md
+divider|separator|gap|references/elements/divider.md
+drawer|sheet,off-canvas-menu|drawer|
+dropdown-menu|menu|dropdown-menu|
+empty-state|no-results|gap|references/elements/empty-state.md
+feature-grid|feature-cards,feature-list|gap|references/elements/feature-grid.md
+field|form-field|field|references/elements/field.md
+file-upload|file-input,dropzone|file-upload|
+footer|site-footer|gap|references/elements/footer.md
+form||form|references/elements/form.md
+header|navbar,top-nav|header|references/elements/header.md
+hero|hero-section,hero-banner|gap|references/elements/hero.md
+hover-card||hover-card|
+image-gallery|gallery,lightbox|gap|references/elements/image-gallery.md
+inline-alert|banner-alert,callout|gap|references/elements/inline-alert.md
+input|text-input|input|references/elements/input.md
+line-chart|sparkline|line-chart|
+logo-wall|logo-cloud,customer-logos|gap|references/elements/logo-wall.md
+modal|dialog|modal|
+number-field|number-input|number-field|
+otp-input|pin-input|otp-input|
+pagination||pagination|references/elements/pagination.md
+password-input|show-hide-password|gap|references/elements/password-input.md
+popup|popover|popup|
+pricing-table|pricing,plan-cards,pricing-plans|gap|references/elements/pricing-table.md
+progress-bar|progress,linear-progress|gap|references/elements/progress-bar.md
+radio-group|radio|radio-group|
+rating|star-rating|rating|
+search-input|search-box|gap|references/elements/search-input.md
+segmented-control||segmented-control|
+select|native-select|select|references/elements/select.md
+sidebar|sidebar-nav,side-nav|gap|references/elements/sidebar.md
+skeleton|skeleton-loader|skeleton|
+slider|range-slider|slider|
+spinner|loading-indicator|spinner|
+stats-bar|stat-card,metrics|gap|references/elements/stats-bar.md
+stepper|step-indicator,wizard-steps|gap|references/elements/stepper.md
+switch|toggle-switch|switch|references/elements/switch.md
+table|data-table,comparison-table|table|references/elements/table.md
+table-of-contents|toc,in-page-nav|table-of-contents|
+tabs|tab-navigation|tabs|
+tags-input|token-input|tags-input|
+testimonial|testimonials,quote-card|gap|references/elements/testimonial.md
+textarea||textarea|references/elements/textarea.md
+timeline||gap|references/elements/timeline.md
+toast|snackbar,toast-notification|toast|references/elements/toast.md
+toggle|toggle-button|toggle|
+toggle-group|button-group|toggle-group|
+toolbar||toolbar|
+tooltip||tooltip|
+virtual-scroll|virtualized-list|virtual-scroll|
+```
+
+## Composition index
+
+One line per accepted relationship: `name|element,element|reference path`.
+
+```text
+card-rhythm|feature-grid,card|references/compositions/card-rhythm.md
+destructive-confirmation|alert-modal,button|references/compositions/destructive-confirmation.md
+form-grouping|form,field|references/compositions/form-grouping.md
+hero-actions|hero,button|references/compositions/hero-actions.md
+page-frame|header,footer|references/compositions/page-frame.md
+pricing-actions|pricing-table,button|references/compositions/pricing-actions.md
+save-feedback|button,toast|references/compositions/save-feedback.md
+table-controls|table,pagination|references/compositions/table-controls.md
+```

package/skills/uiify/references/compositions/card-rhythm.md

@@ -0,0 +1,16 @@
+# card-rhythm
+
+Use when both feature-grid and card are present.
+
+Law: references/laws/proximity.md
+
+## Rule
+
+## Rule
+
+Keep cards in one group only when the items share a purpose and hierarchy. Preserve readable separation and source order as the layout becomes a single column.
+
+## 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/compositions/destructive-confirmation.md

@@ -0,0 +1,17 @@
+# destructive-confirmation
+
+Use when both alert-modal and button are present.
+
+Law: references/laws/error-prevention.md
+
+## Rule
+
+## Rule
+
+State the consequence in the dialog title or message. Name both the destructive action and the safe way to cancel, identify the dialog, and follow the modal-dialog focus and keyboard pattern.
+
+## 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/WCAG22/Understanding/use-of-color.html) (verified 2026-10-16)

package/skills/uiify/references/compositions/form-grouping.md

@@ -0,0 +1,16 @@
+# form-grouping
+
+Use when both form and field are present.
+
+Law: references/laws/proximity.md
+
+## Rule
+
+## Rule
+
+Group related controls with a fieldset and legend. Keep each control labelled and present groups in the order people complete them.
+
+## 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/compositions/hero-actions.md

@@ -0,0 +1,16 @@
+# hero-actions
+
+Use when both hero and button are present.
+
+Law: references/laws/von-restorff.md
+
+## Rule
+
+## Rule
+
+Make the primary action easy to identify and keep the secondary action visually quieter. Use concrete action labels and retain visible keyboard focus.
+
+## 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/compositions/page-frame.md

@@ -0,0 +1,16 @@
+# page-frame
+
+Use when both header and footer are present.
+
+Law: references/laws/readability.md
+
+## Rule
+
+## Rule
+
+Use consistent page landmarks and repeated navigation order. Align header, main content and footer to one responsive content measure without clipping narrow screens.
+
+## 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/compositions/pricing-actions.md

@@ -0,0 +1,15 @@
+# pricing-actions
+
+Use when both pricing-table and button are present.
+
+Law: references/laws/proximity.md
+
+## Rule
+
+## Rule
+
+Keep each plan action associated with the plan name, price and included features. Let the page stack plans at narrow widths without changing their reading order.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/compositions/save-feedback.md

@@ -0,0 +1,15 @@
+# save-feedback
+
+Use when both button and toast are present.
+
+Law: references/laws/feedback.md
+
+## Rule
+
+## Rule
+
+Place save feedback near the action it describes and announce the update as a status message. Keep the message understandable without color or motion.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html) (verified 2026-10-16)

package/skills/uiify/references/compositions/table-controls.md

@@ -0,0 +1,16 @@
+# table-controls
+
+Use when both table and pagination are present.
+
+Law: references/laws/proximity.md
+
+## Rule
+
+## Rule
+
+Keep labeled search and filters associated with the table they change. Identify the current page and preserve a clear sequence from controls to rows to pagination.
+
+## 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/alert-modal.md

@@ -0,0 +1,15 @@
+# alert-modal
+
+Binding: alert-modal
+
+Confirm an irreversible action before executing it.
+
+Explain the consequence before asking for a decision. Give the dialog a clear title, keep the safe action available, and return focus after the choice.
+
+Related laws: references/laws/error-prevention.md, references/laws/accessibility.md
+
+## 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/WCAG22/Understanding/use-of-color.html) (verified 2026-10-16)

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

@@ -0,0 +1,18 @@
+# avatar
+
+Binding: gap
+
+Identify a person or account with a compact image and fallback.
+
+When text beside the image already identifies the person, use an empty alt value; otherwise write a concise alternative that identifies the person without repeating nearby text.
+
+```html
+<img src="/people/ada.webp" width="40" height="40" alt="" />
+<span>Ada Lovelace</span>
+```
+
+The empty alternative is appropriate here because the adjacent text already names the person.
+
+## Sources
+
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) (verified 2026-10-16)

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

@@ -0,0 +1,18 @@
+# badge
+
+Binding: gap
+
+Mark a short status or category beside related content.
+
+Keep a badge short and attach it to the item it qualifies. If the text conveys status, include the status in words and do not rely on color alone.
+
+```html
+<span>Pending review</span>
+```
+
+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/span) (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/bar-chart.md

@@ -0,0 +1,29 @@
+# bar-chart
+
+Binding: gap
+
+Compare values across a small set of named categories.
+
+Give the chart a concise caption and provide the same values in a readable table. Treat chart color and geometry as supporting views of the values.
+
+```html
+<figure>
+  <figcaption>Signups by month</figcaption>
+  <svg role="img" aria-label="January 12, February 19">…</svg>
+  <table>
+    <caption>Signups by month</caption>
+    <thead><tr><th scope="col">Month</th><th scope="col">Signups</th></tr></thead>
+    <tbody>
+      <tr><th scope="row">January</th><td>12</td></tr>
+      <tr><th scope="row">February</th><td>19</td></tr>
+    </tbody>
+  </table>
+</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/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/button.md

@@ -0,0 +1,14 @@
+# button
+
+Binding: button
+
+Expose a clear action with its native interaction semantics.
+
+Name the action with a concrete verb. Use one visually prominent action for the current decision and keep secondary actions understandable.
+
+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/card.md

@@ -0,0 +1,14 @@
+# card
+
+Binding: gap
+
+Group one feature heading and its explanation.
+
+Group related information under a heading. Give a card a link or control only when the entire surface has one clear destination or action.
+
+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/code-block.md

@@ -0,0 +1,21 @@
+# code-block
+
+Binding: gap
+
+Present source text with preserved whitespace.
+
+Use preformatted code with a concise caption. Preserve whitespace and provide a separate, clearly named copy action only when copying is available.
+
+```html
+<figure>
+  <figcaption>Install the package</figcaption>
+  <pre><code>npm install uiify</code></pre>
+</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/pre) (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/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)