CleenUI · AI agent skills

Builder skill

Teaches your AI agent how to build pages and features using CleenUI primitives.

The Builder skill is the workhorse — the one your agent calls whenever you ask it to add a feature, build a screen, or refactor existing UI to use CleenUI. It carries the catalog: which component fits which job, what variants exist, what props each accepts, and the layout patterns that work well together.

It also knows what not to do — when to compose primitives instead of bringing in a new dependency, when to use a Drawer vs. a Modal, when to reach for the DataGrid vs. a hand-rolled table. The result is consistent, idiomatic CleenUI code instead of approximated Tailwind.

What the skill does

  • Maps natural-language requests onto specific CleenUI components and variants.
  • Generates idiomatic JSX with correct imports, props, and accessibility attributes.
  • Composes patterns: forms-with-validation, list-with-filter, dashboard-with-cards, drawer-driven-detail-view, etc.
  • Suggests refactors when existing code could use a CleenUI primitive instead of bespoke styling.
  • Knows when to defer to a Page Template instead of building from primitives.

Common requests it handles well

  • "Add a settings page with sectioned form fields."
  • "Build a customer detail screen with a left-rail sidebar and a tabbed main area."
  • "Wire up a DataGrid with pinned filters for this entity."
  • "Turn this plain table into a CleenUI DataGrid with row selection."
⚡ Already in an AI editor?

Set up CleenUI in your tool.

To use the Builder skill in practice, register CleenUI in your AI editor — five-minute setup per tool, guides below.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides