ui-builder

Resolves UI requests to shared components before any code is written.

1|1|Updated Jun 24, 2026
One-click install
npx skills add https://github.com/growmax/growmax-skills --skill ui-builder-growmax
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-builder
Source: https://github.com/growmax/growmax-skills/tree/main/skills/ui-builder
Command: npx skills add https://github.com/growmax/growmax-skills --skill ui-builder-growmax

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building admin console screens often hand-roll duplicate versions of the same tables, forms, and filters because each developer describes the UI in their own words. This Skill prevents that drift by resolving a UI request to the exact shared component to reuse before any code is written. ## Core Features & Use Cases - Region-to-component resolution: Parses a UI request into screen regions (table, header, filter row, form, dialog) and looks each up in the UI-STANDARDS.md rulebook's Table 1 to return the shared component, its file path, and what never to hand-roll. - CMP-5 verdict protocol: For regions with no catalog entry, it checks ShadCN/Radix primitives and greps prior art across the codebase, then issues a reuse, extend, or new verdict — requiring new components to be registered in Table 1 in the same PR. - Rule citation: Collects the applicable design rules (control heights, radius, button roles, icons, loading skeletons, motion, accessibility) cited by stable rule IDs. - Use Case: Before building a suppliers list page with a table, filters, and a create button, run the resolver to learn that the table maps to ui/data-table.tsx, the page to ListPageLayout, and the buttons to standard variants — instead of writing a third divergent copy. ## Quick Start Ask the assistant to resolve a suppliers list page with a table, filters, and a create button using the ui-builder skill before writing any code.

Frequently Asked Questions about ui-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I decide which shared component to reuse when building a new admin page?▼

Parse the request into screen regions (table, header, filter row, form) and look each up in Table 1 of UI-STANDARDS.md. The resolver returns the shared component, its file path, and the rules that apply, so you compose existing units instead of writing new ones.

What should I do when no shared component exists for a UI element?▼

Run the CMP-5 protocol: check the ShadCN/Radix primitives first, then grep prior art across pages and components. If two or more screens already hand-roll it, extract the best one; only build new in the shared location and register a Table 1 row in the same PR.

Does this resolver work for mobile app UI?▼

No, the scope is apps/web-vite only, the seller/admin console. Mobile apps like buyer-app and sales-app use a different design language with @arc/design-tokens and SectionCard, so mobile requests are flagged as out of scope.

Can the ui-builder skill write or modify source code?▼

No, it is strictly read-only. It uses Read, Grep, and Glob operations to inspect the rulebook and codebase, then emits a guidance report. The actual implementation is done by the developer or a separate engineering agent.

How does this differ from a UI code review or audit?▼

This is the pre-build step that prevents drift before code exists. Post-build tools like feature-review catch drift in review, and ux-audit sweeps existing drift; all four read the same UI-STANDARDS.md rulebook at different workflow moments.