Skip to content
TrustedSkillsbeta
Back to all skills

Pattern Ui

Listed
commontoolsinc·vlatest·frontend·0BSD

Automates repetitive UI interactions based on learned patterns, streamlining workflows and reducing manual effort.

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-ui -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

This skill, Pattern UI, automates repetitive user interface (UI) interactions by leveraging pre-defined patterns and components. It allows AI agents to construct UIs based on established styling guidelines and component references. The focus is on streamlining the UI "polish" phase after logic verification and testing are complete. This skill provides a framework for building consistent and functional interfaces using specific CommonTools components.

When to use it

  • Creating basic layouts with ct-screen, ct-vstack, ct-hstack, and ct-box containers.
  • Implementing input fields like ct-input, ct-textarea, ct-checkbox, and ct-select.
  • Adding action buttons using the ct-button component.
  • Displaying text and status indicators with ct-text and ct-status-pill.
  • Implementing two-way data binding for input fields (e.g., $value = { field }, $checked = { done }).

Key capabilities

  • Utilizes CommonTools components: ct-screen, ct-vstack, ct-hstack, ct-box, ct-input, ct-textarea, ct-checkbox, ct-select, ct-button, ct-text, ct-status-pill.
  • Supports two-way data binding using $value and $checked attributes.
  • Provides layout structure examples for screens, stacks, and horizontal item groups.
  • Allows referencing existing UI layout patterns within the packages/patterns/ directory (excluding data or action patterns).

Example prompts

  • "Create a screen with a vertical stack containing a text field bound to 'field' and a checkbox bound to 'done'."
  • "Build a horizontal row of buttons using ct-hstack."
  • "Show me an example of two-way binding for a select component."

Tips & gotchas

  • This skill should only be used after all underlying logic is verified and tests pass.
  • Refer to the provided documentation: docs/common/components/COMPONENTS.md, docs/common/patterns/style.md, and docs/common/patterns/two-way-binding.md for component details and styling guidelines.
  • When searching for examples, focus on UI layout patterns within the packages/patterns/ directory.