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 referencedocs/common/patterns/style.md- Styling patternsdocs/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
Repository
commontoolsinc/labsGitHub Stars
30
First Seen
Jan 21, 2026
Security Audits
Installed on
opencode47
gemini-cli47
cursor47
antigravity46
codebuddy46
github-copilot46