🎯

pattern-ui

🎯Skill

from commontoolsinc/labs

What it does

Applies standardized UI components and layout patterns to polish and structure user interfaces with consistent design.

pattern-ui

Installation

Install skill:

npx skills add https://github.com/commontoolsinc/labs --skill pattern-ui

AddedJan 27, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Add UI polish with layout and styling

Overview

# 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:

```tsx

```

Layout structure:

```tsx

{/ horizontal items /}

```

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

More from this repository8

🎯

lit-component🎯Skill

Guides developers in creating and integrating Lit web components within the Common UI v2 system, focusing on reactive, theme-aware, and runtime-integrated UI components.

🎯

pattern-dev🎯Skill

Guides developers in creating reactive TypeScript patterns for CommonTools, focusing on efficient, iterative development from sketch to deployment.

🎯

ct🎯Skill

Guides developers in deploying, managing, and interacting with charms and recipes using the CommonTools CLI through precise command-line operations.

🎯

knowledge-base🎯Skill

Establishes a hierarchical source resolution system for Oracle & Corrector agents, prioritizing specs, code, and documentation.

🎯

pattern-deploy🎯Skill

Deploys and manages Claude patterns via CLI, enabling syntax checking, deployment, inspection, and testing of pattern handlers.

🎯

pattern-test🎯Skill

Validates pattern implementation by writing and executing structured test sequences for pattern-based components.

🎯

task-management🎯Skill

Breaks down complex tasks into manageable subtasks using bd (beads), tracking progress and dependencies across sessions.

🎯

pattern-schema🎯Skill

Generates TypeScript schemas with Input/Output types for patterns, ensuring type safety and testability through structured type definitions.