pattern-implement_skill

Overview

This skill teaches how to implement a single sub-pattern with a minimal UI using TypeScript and the provided pattern primitives. It focuses on delivering one leaf or container pattern that exposes actions as Stream<T> and renders only basic inputs and buttons to verify data flow. The goal is a compilable pattern ready for automated checks and tests.

How this skill works

Follow the prescribed order: create leaf patterns first, then container patterns, and finally compose in main.tsx. Implement patterns with pattern<Input, Output>() and expose user interactions via action() and handler() primitives. Render sub-patterns by calling them as functions so typed Outputs remain intact, and use Cells for local reactive state.

When to use it

• Implementing a new UI behavior that must be testable via Streams
• Creating a minimal, no-styling prototype to validate data flow
• Building leaf components that will be composed into larger patterns
• Preparing a pattern to pass automated compilation and basic runtime checks
• Demonstrating handler/action idioms for reuse across patterns

Best practices

• Always write one focused sub-pattern; keep UI minimal with basic inputs and buttons
• Use pattern<Input, Output>() so actions can be exposed as Stream<T> for testing
• Prefer action() for local state effects and handler() for reusable logic
• Render children by calling pattern functions, not JSX, to preserve typed outputs
• Follow the order: leaf patterns → container patterns → main composition
• Keep equals(), Cell, and .get()/.set() usage consistent for identity and reactivity

Example use cases

• A todo item leaf pattern exposing add/remove actions as streams for test harnesses
• A list container pattern that composes item patterns and verifies event propagation
• A form pattern that uses Cells for inputs and an action to submit structured data
• A small demo main.tsx composing patterns to validate compile-time checks
• Replacing a complex styled component with a minimal stub to test logic in isolation