See it in action

Watch the UI Builder Demo to get an overview of this skill.

The UI Builder skill helps your AI coding assistant build complete, runnable UI — from a single component to an entire application — using the Abyss Design System:

• Detect your platform and language (Web or Mobile, TypeScript or JavaScript) automatically from your project
• Pick the right component for the job using a built-in decision tree, including the tricky "choose X vs Y" cases (DataTable vs Table, Tooltip vs Popover, Alert vs Toast, and more)
• Generate code with correct imports, real design tokens, and accessibility baked in — never from memory
• Scaffold a brand-new app using the Abyss CLI templates when you're starting from scratch
• Validate every output against a quality reference so the result is complete and runnable, with no placeholders

The skill follows a systematic workflow — detect, select, document, generate, validate — so the UI it produces matches Abyss conventions instead of guessing.

Tip

UI Builder uses the Documentation skill to assist with guidance. It will install abyss-documentation automatically when needed, but you can install it ahead of time.

Prerequisites

Before installing this skill, ensure you have the Abyss CLI set up properly:

npx @uhg-abyss/cli -v

If the command fails, refer to the CLI Setup Guide for installation instructions.

Installation

Install the skill using the Abyss CLI:

npx @uhg-abyss/cli skills add abyss-ui-builder

To verify the skill was installed successfully:

npx @uhg-abyss/cli skills list

Example prompts

Once installed, you can use prompts like these with this skill:

• "Build me a complete Abyss UHC web app with a dashboard, a multi-step form, and a notifications page"
• "Make me a login form using Abyss Web"
• "Add a page that lists all claims in a table users can search, sort, and page through"
• "Add a Tooltip to each claim status that explains what it means"
• "Scaffold a new Abyss web app"