pattern-ui

SKILL.md

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:

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

Layout structure:

<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
Weekly Installs
47
GitHub Stars
30
First Seen
Jan 21, 2026
Installed on
opencode47
gemini-cli47
cursor47
antigravity46
codebuddy46
github-copilot46