---

name: pattern-ui description: Add UI polish with layout and styling user-invocable: false

UI Polish Phase

Only do this AFTER all logic is verified and tests pass.

Read First

• docs/common/components/COMPONENTS.md - Full component reference
• docs/common/patterns/style.md - Styling patterns
• docs/common/patterns/two-way-binding.md - $value, $checked bindings

Available Components

Layout: ct-screen, ct-vstack, ct-hstack, ct-box Input: ct-input, ct-textarea, ct-checkbox, ct-select Action: ct-button Display: ct-text, ct-status-pill

Key Patterns

Two-way binding:

Copy<ct-input $value={field} />
<ct-checkbox $checked={done} />

Layout structure:

Copy<ct-screen title="My Pattern">
  <ct-vstack gap="md">
    <ct-hstack gap="sm">
      {/* horizontal items */}
    </ct-hstack>
  </ct-vstack>
</ct-screen>

Reference Existing Patterns

Search packages/patterns/ for UI layout examples ONLY (not data/action patterns).

Done When

• UI renders correctly
• Bindings work (typing updates state)
• No regression in data behavior