Create and debug CommonTools patterns with ct CLI tooling.
npx skills add https://github.com/commontoolsinc/labs --skill pattern-dev
Please help me install this Agent Skill. Skill: pattern-dev Source: https://github.com/commontoolsinc/labs/tree/main/.claude/skills/pattern-dev Command: npx skills add https://github.com/commontoolsinc/labs --skill pattern-dev
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.
/// <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, }; });
High-intent search queries and answers about installing and using this skill.
Creating a reactive pattern involves defining TypeScript interfaces for your data schema, wrapping them with Default types, and using the recipe function to build handlers and UI components. Start with a minimal pattern template, define your data structure, implement mutation handlers for state changes, and add interactive UI elements that respond to data updates.
Debug patterns by checking type definitions against your schema interfaces, validating handler logic for structural mutations, and using the ct CLI tooling for inspection and diagnostics. Common issues stem from mismatched Default types, incorrect handler signatures, or reactive derivation cycles—reference the error diagnostics guide for quick resolution.
Structure patterns by separating schema definitions, mutation handlers, UI components, and reactive derivations into distinct modules, then compose them in your main recipe export. This layered approach ensures maintainability, enables reuse, and simplifies debugging of individual pattern layers.
Yes, use the ct CLI tooling to deploy patches directly, linking charm references and updating handlers without full recompilation. This streamlines iteration during development and testing cycles.
You need intermediate TypeScript proficiency—understanding interfaces, generic types, and functional composition. The pattern-dev skill guides you through template syntax and reactive patterns, so existing TypeScript experience translates directly to pattern development.
Reactive derivations automatically compute and update derived values when source data changes, enabling efficient UI re-renders and handler chains. Define derivations alongside mutation handlers to maintain consistency across your pattern's layered data model.
ImaginerLabsDetect technologies and dependencies from JavaScript and TypeScript project configuration files.
commontoolsincAutomate charm deployment and management using the ct CLI.
PlaneInABottleManage observable state with actions and computed values for React apps.
the-perfect-developerAdd declarative interactivity to HTML using Alpine.js core directives.
