🎯

pattern-implement

🎯Skill

from commontoolsinc/labs

VibeIndex|
What it does

pattern-implement skill from commontoolsinc/labs

pattern-implement

Installation

Install skill:
npx skills add https://github.com/commontoolsinc/labs --skill pattern-implement
1
AddedJan 29, 2026

Skill Details

SKILL.md

Build sub-patterns with minimal UI

Overview

Use Skill("ct") for ct CLI documentation when running commands.

# Implement Sub-Pattern

Core Rule

Write ONE sub-pattern with minimal stub UI. No styling, just basic inputs/buttons to verify data flow.

Always use pattern() - expose actions as Stream for testability.

Order

  1. Leaf patterns first (no dependencies on other patterns)
  2. Container patterns (compose leaf patterns)
  3. main.tsx last (composes everything)

Read First

  • docs/common/patterns/ - especially meta/ for generalizable idioms
  • docs/common/concepts/action.md - action() for local state
  • docs/common/concepts/handler.md - handler() for reusable logic
  • docs/common/concepts/reactivity.md - Cell behavior, .get()/.set()
  • docs/common/concepts/identity.md - equals() for object comparison

Key Patterns

action() - Closes over local state in pattern body:

```tsx

const inputValue = Cell.of("");

const submit = action(() => {

items.push({ text: inputValue.get() });

inputValue.set("");

});

```

handler() - Reused with different bindings:

```tsx

const deleteItem = handler; index: number }>(

(_, { items, index }) => items.set(items.get().toSpliced(index, 1))

);

// In JSX: onClick={deleteItem({ items, index })}

```

Rendering sub-patterns - Use function calls, not JSX:

```tsx

// βœ… Correct

{items.map((item) => ItemPattern({ item, allItems: items }))}

// ❌ Wrong - JSX fails with typed Output

{items.map((item) => )}

```

Done When

  • Pattern compiles: deno task ct check pattern.tsx --no-run
  • Minimal UI renders inputs/buttons
  • Ready for testing