Skills

Task-focused agent workflows for composing and verifying the dark base.

Flood's agent package includes a lightweight flood-ui entry that routes work to specialized skills. Start with the agent guide, the host instructions and matching installed declarations. Load the skills relevant to the current task, not the entire library of instructions.

Interface content covers labels, wording and information hierarchy. Its workflow removes unnecessary narration while keeping meaningful constraints, consequences, recovery and accessible names.

The hierarchy workflow covers task/group/field roles, common control tracks and relationship spacing. It complements editorial decisions and the spacing workflow; it does not prescribe one screen template.

The records workflow covers list/detail information selection, stable scan positions and the distinction between category, lifecycle state, priority and time. It includes examples where those attributes should remain visible, rather than a universal rule to hide metadata or limit badge counts.

Use Agent knowledge to discover these workflows by semantic group and read the installed version. The catalog separates prerequisites from optional related components; grouping is not a request to load every skill.

Foundations

Semantic colors, type, geometry, spacing and scoped customization.

Workflow	Use when	Skill source
flood-hierarchy	Establish visual hierarchy, shared form tracks and vertical rhythm in Flood screens, forms and overlays. Use when titles, groups and labels compete or a composed interface feels flat; not a fixed page template.	Read skill
flood-spacing	Diagnose Flood spacing, density, nested radii and alignment from rendered geometry. Use for large gaps, crowded rows or shifting compositions.	Read skill
flood-foundations	Apply Flood's existing dark semantic surfaces, typography, control sizing and icon geometry. Use for foundation consistency or token-consumer review.	Read skill

Composition

Layout and task recipes assembled from existing primitives.

Workflow	Use when	Skill source
flood-composition	Build or review Flood UI from existing library primitives before adding composites. Use for component, website, playground and host-interface work, especially when a layout fix risks replacing a reusable element with custom markup.	Read skill
flood-interface-content	Write or review Flood interface content with editorial decisions about copy, labels, hierarchy and states. Use for visible UI text and reference adaptation; not typography styling, campaigns or rewriting user documents.	Read skill
flood-hierarchy	Establish visual hierarchy, shared form tracks and vertical rhythm in Flood screens, forms and overlays. Use when titles, groups and labels compete or a composed interface feels flat; not a fixed page template.	Read skill
flood-spacing	Diagnose Flood spacing, density, nested radii and alignment from rendered geometry. Use for large gaps, crowded rows or shifting compositions.	Read skill
flood-records	Compose record lists and detail views with a clear metadata hierarchy. Use for crowded status/category/priority/date rows, drifting scan positions or deciding between a list and a comparison table.	Read skill

Interaction

Forms, selection, navigation and transient layers.

Workflow	Use when	Skill source
flood-forms	Compose and verify Flood form ownership, labels, values, validation and reset. Use for fields, selection controls or composed form inputs.	Read skill
flood-overlays	Compose or review Flood dialogs, drawers, popovers, menus and anchored selection surfaces. Use for popup geometry, nested dismissal or focus ownership.	Read skill
flood-navigation	Choose and verify Flood links, tabs, disclosure and hierarchical navigation. Use when destination, selection and expansion semantics can be confused.	Read skill

Data & feedback

Structured content, files and honest operation states.

Workflow	Use when	Skill source
flood-data-display	Assemble Flood tables, lists, cards and file records with long or changing data. Use for content hierarchy, overflow, row actions and data-state composition.	Read skill
flood-records	Compose record lists and detail views with a clear metadata hierarchy. Use for crowded status/category/priority/date rows, drifting scan positions or deciding between a list and a comparison table.	Read skill
flood-feedback	Choose Flood status, progress, alert, loading and empty-state feedback with honest operation state. Use for meaningful messages and announcement ownership.	Read skill

Quality

Accessibility, evidence and regression checks.

Workflow	Use when	Skill source
flood-interface-content	Write or review Flood interface content with editorial decisions about copy, labels, hierarchy and states. Use for visible UI text and reference adaptation; not typography styling, campaigns or rewriting user documents.	Read skill
flood-accessibility	Review Flood interface names, keyboard flow, focus, perception and reflow in the actual host. Use for interaction or accessibility acceptance.	Read skill
flood-verification	Verify Flood component or composed-interface changes against applicable contracts and actual evidence. Use for stabilization, regression or completion review.	Read skill

See Workspace review for a runnable form and file drawer assembled with these workflows. Its source, ownership choices and host checks are documented together.

Table bulk actions demonstrates controlled cross-page selection, protected rows and an explicit confirmation using existing Flood primitives. Its operation changes only the local in-memory example.

These skills use the existing dark base. They help apply and verify component contracts; they do not imply new themes, animations, unavailable APIs or automatic agent compliance. The component-family index describes applicability, not a test report or an accessibility certification.

Use a skill

The matching CLI installs the full sources beneath .agents/skills/flood-ui/references/. The root flood-ui router links the relevant workflow. Independent automatic discovery of nested skill directories is not assumed; an agent can also read the selected installed SKILL.md explicitly.

The same versioned sources are served under /agent/. Raw skill links above are readable Markdown and can be saved directly. Existing projects should compare and merge newer guidance rather than overwrite customized instruction files.

For example, a settings form needs composition and forms, with spacing when geometry is being tuned. A drawer with a selection popup additionally needs the overlay workflow. Before handing off, use verification and report actual checks, failures and any behavior that remains unverified.

The shared rules index provides stable rule IDs and observable checks; the workflow index describes routing. Neither is an executable policy engine or authority to change external systems.

Page Markdown Agent skill