---
description: Build UI with Wingo UI components (React 19 + Tailwind CSS v4), using the wingo-ui MCP tools and CLI
globs: ["**/*.tsx", "**/*.jsx", "**/*.css"]
alwaysApply: false
---

<!-- wingo-ui:managed v=1: refreshed by `npx wingo-ui@latest agents update`. Delete this line to keep your own edits. -->

# Wingo UI

This project builds its UI with Wingo UI: components, full-screen blocks, hooks and helpers installed as source (`wingo-ui.json`).

1. At the start of UI work call `check_updates` with the items in `wingo-ui.json` and mention available updates (`npx wingo-ui@latest update`).
2. Call `search_components` before writing any UI; for whole screens look for a block first (`kind: "block"`, then `get_block`).
3. `get_component` gives props with defaults, usage and the install command. Install with `npx wingo-ui@latest add <slug...>`.
4. Follow `get_design_rules`: semantic tokens (`bg-background`, `bg-surface`, `text-muted-foreground`, `border-border`), neutral tone by default, the brand tone for the one main action, 44px touch targets, bottom sheets on phones, light and dark mode.
5. Configure components through props instead of restyling; keep `cn()`, `data-slot` and license headers in copied files.

Pro items need a Pro API key for their source; never recreate one from its docs. Docs for models: https://wingo-ui.com/llms.txt.