#Task Start

Task Start centers the first instruction, a restrained suggestion row, and Task Composer on a spacious canvas. Use it as the start surface before a task exists.

npm install @a3s-lab/ui@0.4.0

<section class="task-start">
  <header><h1>What should we work on?</h1></header>
  <nav data-task-suggestions aria-label="Task suggestions">...</nav>
  <form class="agent-composer" aria-label="Start a task">...</form>
</section>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

<section class="task-start">
  <header><h1>What should we work on?</h1></header>
  <nav data-task-suggestions aria-label="Task suggestions">...</nav>
  <form class="agent-composer" aria-label="Start a task">...</form>
</section>

#Parameters

#States and variants

The composer owns empty, populated, invalid, disabled, offline, queued, and loading states. Suggestions are optional and must perform real actions, such as populating the instruction.

#Accessibility

Name the suggestion navigation and composer. Keep suggestions before the composer in DOM order. On narrow screens the layout aligns to the start edge and retains 44px coarse-pointer targets.