Pattern Implement

What it does

The Pattern Implement skill enables AI agents to replicate complex patterns from provided examples, streamlining design and content creation for consistency and efficiency. It focuses on creating sub-patterns with minimal user interface elements (inputs/buttons) to verify data flow. The core functionality involves defining these patterns using pattern<Input, Output>() and exposing actions as Stream<T> for testability.

When to use it

• When you need to create consistent designs or content by reusing established patterns.
• For rapidly prototyping user interfaces with a focus on data flow verification.
• To build complex components from smaller, reusable sub-patterns.
• When creating interactive elements where local state management and reusable logic are required.

Key capabilities

• Pattern Definition: Defines sub-patterns using pattern<Input, Output>().
• Action Management: Uses the action() function to encapsulate local state changes within patterns.
• Reusable Logic: Employs the handler() function for reusable logic with different bindings.
• Functional Rendering: Renders sub-patterns using function calls instead of JSX for compatibility with typed outputs.
• Ordered Pattern Creation: Follows a specific order: leaf patterns first, then container patterns, and finally main.tsx.

Example prompts

• "Implement a pattern to add an item to a list."
• "Create a sub-pattern with inputs for text and a submit button."
• "Show me the code for a handler that deletes an item from a list."

Tips & gotchas

• Read the Documentation: Familiarize yourself with docs/common/patterns/, docs/common/concepts/action.md, docs/common/concepts/handler.md, docs/common/concepts/reactivity.md, and docs/common/concepts/identity.md for best practices.
• Use Function Calls: When rendering sub-patterns, use function calls instead of JSX to avoid issues with typed outputs.
• Compilation Check: Verify the pattern compiles using deno task ct check pattern.tsx --no-run.