What is the recommended way to test patterns?

The skill advocates for a CLI-first approach using the 'ct' tool to verify data layers and handlers before finalizing the browser-based UI.

What is a CommonTools pattern?

A pattern is a specialized TypeScript/JSX module that defines reactive data transformations paired with a user interface, which can be deployed and linked as 'charms'.

How do I handle state reactivity in this framework?

Reactivity is managed through a Cell system, utilizing computed() for automatic dependency tracking and lift() for manual reactive transformations.

Can I build complex applications with multiple files?

Yes, the skill supports Pattern Composition where you define shared schemas and import sub-patterns to create sophisticated workflows.

CommonTools Pattern Developer

Name: CommonTools Pattern Developer
Author: commontoolsinc

bycommontoolsinc

•

Developer Tools

Develops reactive TypeScript patterns with interactive UIs using the CommonTools framework and cell-based state system.

The Pattern-Dev skill provides specialized guidance for building, debugging, and deploying CommonTools patterns—modular TypeScript/JSX programs that define reactive data transformations. It implements a rigorous layered development methodology, guiding users from data modeling and schema definition to mutation handlers and final UI construction. By leveraging core concepts like cells, computed values, and bidirectional bindings, this skill ensures that developers can create complex, interactive 'charms' that are testable via CLI and maintainable through modular composition.

Key Features

01Guided layered development workflow for robust reactive components

02Deep integration with the cell system and reactive computed values

03Bidirectional UI binding for seamless state-to-component interaction

0423 GitHub stars

05Support for multi-file pattern composition and shared schemas

06CLI-first testing strategies for data and handler verification

Use Cases

01Building reactive data-driven application components from scratch

02Refactoring monolithic patterns into modular, composed sub-patterns for scalability

03Debugging complex state synchronization or reactivity issues in existing codebases

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add commontoolsinc/labs pattern-dev

For use in Claude.ai and ChatGPT

Download Skill