pattern-dev

What problem does it solve?

Developing reactive data transformation patterns can be complex, involving TypeScript, UI components, and debugging. This skill streamlines the entire development lifecycle, from creation to deployment and error resolution, ensuring patterns are built efficiently and correctly.

Core Features & Use Cases

• Guided Pattern Creation: Step-by-step instructions for building new CommonTools patterns from scratch, including interactive UIs and handlers.
• Efficient Debugging: Comprehensive guidance for diagnosing and fixing common type and runtime errors in patterns, with quick error references.
• Multi-File Organization: Best practices for structuring complex patterns across multiple files, ensuring maintainability and reusability.
• Use Case: A developer needs to create a new reactive pattern for a task management system. This skill guides them through defining schemas, adding interactive UI elements, implementing handlers for structural changes, and debugging any issues, saving significant development time.

Quick Start

Begin with a minimal viable pattern:

/// <cts-enable /> import { Default, NAME, recipe, UI } from "commontools";

interface Item { title: string; done: Default<boolean, false>; }

interface Input { items: Default<Item[], []>; }

export default recipe<Input, Input>("My Pattern", ({ items }) => { return { [NAME]: "My Pattern", [UI]: ( <div> {items.map((item) => ( <div>{item.title}</div> ))} </div> ), items, }; });