Skip to content
TrustedSkillsbeta
Back to all skills

Pattern Implement

Listed
commontoolsinc·vlatest·other·0BSD

Pattern Implement replicates complex patterns from provided examples, streamlining design and content creation for consistency & efficiency.

Repository

Install on your platform

Showing Claude Code. One command installs this skill into any of the agents below.

  1. 1

    Run this in your project

    terminal
    $ npx skills add commonfabric/labs --skill pattern-implement -a claude-code

  2. Uses the open-source skills CLI and needs Node.js. Add -g to install it for your user instead of this project.

What we know about this skill

Publisher

commontoolsinc

Taken from the source listing. We haven't verified who controls this account.

Install target

Live repository

Not pinned. Installing fetches whatever the repository holds at the time you run the command.

Nobody has reviewed this code. TrustedSkills indexes and links skills; it does not audit, run or scan them. A skill runs with whatever access you give your agent — read the source before you install it.

Automated safety checks

scanned

We could not read this skill's source, so none of the checks below were run.

Not scanned. no SKILL.md in the repository Source recorded as commontoolsinc/labs.
This is a static scan, not a review. It reads the skill's files; it does not run them, and it cannot tell you whether the skill is any good or whether the code does what its description says. A skill runs with whatever access you give your agent.
What each check looks for →

About this skill

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.