Pattern Ui

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.