CleenUI · AI agent skills

Setup skill

Scaffold a CleenUI project from zero — dependencies, tokens, theme, component registration.

The Setup skill is the one your agent runs first. It bootstraps a new CleenUI project from scratch — installing dependencies, wiring up the design tokens, configuring the build tooling, and registering the component library so subsequent agent work has the primitives available.

It also handles the messier integration cases: adding CleenUI to an existing React codebase without breaking existing styles, conflict-resolving Tailwind config, and verifying that fonts and CSS variables load correctly. Run it once per project.

What the skill does

  • Installs CleenUI packages and peer dependencies appropriate to your stack (Vite, Next.js, Create React App, Remix).
  • Adds tokens.css and styles.css to the global stylesheet import chain.
  • Configures Tailwind (or the equivalent for your toolchain) with the CleenUI preset.
  • Sets up Google Font preconnects for Inter, Roboto Mono, and the script faces.
  • Adds a working example component to confirm the install is functional.

When to invoke it

  • At project initialization — "set up CleenUI in this Vite + React project."
  • When adding CleenUI to an existing React app for the first time.
  • After a major version upgrade if the install steps have changed.
  • When recovering a project that has broken CleenUI imports.
⚡ Already in an AI editor?

Set up CleenUI in your tool.

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

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides