{"version":1,"rulesVersion":1,"origin":"https://wingo-ui.com","files":{"claude":[{"path":".claude/skills/wingo-ui/SKILL.md","mode":"file","content":"---\nname: wingo-ui\ndescription: Build app UI with Wingo UI, a React 19 + Tailwind CSS v4 component library installed as source code (shadcn style). Use it whenever you create or change UI in a project that has a wingo-ui.json or components from Wingo UI, when the user mentions Wingo UI, or when they ask for a screen, page, form, dashboard, settings, pricing, sign-in, table, chart or any component (button, dialog, sheet, date picker, OTP input, sidebar, data table, command menu...).\n---\n\n<!-- wingo-ui:managed v=1: refreshed by `npx wingo-ui@latest agents update`. Delete this line to keep your own edits. -->\n\n# Build UI with Wingo UI\n\nWingo UI is a library of components, full-screen blocks, hooks and helpers for React 19 + Tailwind CSS v4. Items are copied into the project as source (`components/ui`, `components/blocks`, `hooks`, `lib`), so the project owns and can edit them. The `wingo-ui` MCP server always serves the latest release: components, props, design rules, theme tokens and the changelog.\n\n## Workflow\n\n1. **Check for updates first.** In a project with `wingo-ui.json`, call `check_updates` with its items (slug + version + hash) at the start of UI work. Tell the user what changed; update with `npx wingo-ui@latest update <slug...>` only when they agree.\n2. **Search before you write.** Call `search_components` for every piece you need (\"otp code input\", \"date range picker\", \"orders table with filters\"). Never hand-write a component the library already has.\n3. **Whole screens start from a block.** Sign in, settings, dashboard, pricing, checkout, onboarding: search with `kind: \"block\"`, read it with `get_block`, then fill the gaps with components.\n4. **Read before you use.** `get_component` returns the props with defaults, parts, a usage example and the install command. Configure through props (`size`, `variant`, `tone`, `radius`, labels, `classNames`) instead of restyling.\n5. **Install with the CLI.** One command for everything the screen needs: `npx wingo-ui@latest add button input card`. It adds registry dependencies and npm packages and records versions in `wingo-ui.json`. No `wingo-ui.json` yet: run `npx wingo-ui@latest init` first (or follow `get_install_instructions`).\n6. **Follow the design rules.** `get_design_rules` once per task: semantic tokens only (`bg-background`, `bg-surface`, `bg-card`, `text-muted-foreground`, `border-border`), neutral by default with the brand tone for the one main action, the size and radius scale, motion presets, 44px touch targets, bottom sheets instead of popovers on phones, light and dark mode. `get_theme_tokens` has the CSS variables.\n7. **Check your work** at 390px and 1440px wide, in light and dark mode, with the keyboard.\n\n## Rules\n\n- Keep `cn()`, the `className` prop, `data-slot` attributes and any license header in copied files. Files from Rare UI keep their 3-line header and need a visible credit link to https://rareui.com.\n- No hardcoded colors or arbitrary radii in app code: use the tokens and the component props.\n- Imports use the project alias: `@/components/ui/<name>`, `@/components/blocks/<name>`, `@/hooks/<name>`, `@/lib/<name>`.\n- Pro items: docs, props and usage are public; the source needs a Pro API key. Without one, do not recreate a Pro component from its docs. Tell the user it is part of Wingo UI Pro (`get_account_status` has the links) or pick a free item.\n\n## Without the MCP server\n\nUse the CLI: `npx wingo-ui@latest search <words>`, `info <slug>`, `add <slug...>`, `outdated`, `diff <slug>`, `update`. The whole library for language models: https://wingo-ui.com/llms.txt. Docs: https://wingo-ui.com/docs.\n"},{"path":"CLAUDE.md","mode":"block","content":"<!-- wingo-ui:start v=1 -->\n## Wingo UI\n\nThis project builds its UI with Wingo UI (React 19 + Tailwind CSS v4 components installed as source, see `wingo-ui.json`).\n\n- Before writing UI, use the `wingo-ui` MCP tools: `search_components` to find what exists (blocks for whole screens), `get_component` / `get_block` for props and usage, `get_design_rules` for tokens, sizes, motion and mobile rules. Never recreate a component the library has.\n- Install with `npx wingo-ui@latest add <slug...>`. At the start of UI work run `check_updates` (or `npx wingo-ui@latest outdated`) and mention updates; update with `npx wingo-ui@latest update`.\n- Semantic tokens only (`bg-background`, `bg-surface`, `text-muted-foreground`, `border-border`), configure components through props, keep `cn()`, `data-slot` and license headers in copied files. Check 390px and 1440px, light and dark.\n- No MCP tools available? The CLI has `search`, `info`, `add`, `outdated`, `update`; the docs for models are at https://wingo-ui.com/llms.txt.\n<!-- wingo-ui:end -->"}],"codex":[{"path":"AGENTS.md","mode":"block","content":"<!-- wingo-ui:start v=1 -->\n## Wingo UI\n\nThis project builds its UI with Wingo UI (React 19 + Tailwind CSS v4 components installed as source, see `wingo-ui.json`).\n\n- Before writing UI, use the `wingo-ui` MCP tools: `search_components` to find what exists (blocks for whole screens), `get_component` / `get_block` for props and usage, `get_design_rules` for tokens, sizes, motion and mobile rules. Never recreate a component the library has.\n- Install with `npx wingo-ui@latest add <slug...>`. At the start of UI work run `check_updates` (or `npx wingo-ui@latest outdated`) and mention updates; update with `npx wingo-ui@latest update`.\n- Semantic tokens only (`bg-background`, `bg-surface`, `text-muted-foreground`, `border-border`), configure components through props, keep `cn()`, `data-slot` and license headers in copied files. Check 390px and 1440px, light and dark.\n- No MCP tools available? The CLI has `search`, `info`, `add`, `outdated`, `update`; the docs for models are at https://wingo-ui.com/llms.txt.\n<!-- wingo-ui:end -->"}],"gemini":[{"path":"GEMINI.md","mode":"block","content":"<!-- wingo-ui:start v=1 -->\n## Wingo UI\n\nThis project builds its UI with Wingo UI (React 19 + Tailwind CSS v4 components installed as source, see `wingo-ui.json`).\n\n- Before writing UI, use the `wingo-ui` MCP tools: `search_components` to find what exists (blocks for whole screens), `get_component` / `get_block` for props and usage, `get_design_rules` for tokens, sizes, motion and mobile rules. Never recreate a component the library has.\n- Install with `npx wingo-ui@latest add <slug...>`. At the start of UI work run `check_updates` (or `npx wingo-ui@latest outdated`) and mention updates; update with `npx wingo-ui@latest update`.\n- Semantic tokens only (`bg-background`, `bg-surface`, `text-muted-foreground`, `border-border`), configure components through props, keep `cn()`, `data-slot` and license headers in copied files. Check 390px and 1440px, light and dark.\n- No MCP tools available? The CLI has `search`, `info`, `add`, `outdated`, `update`; the docs for models are at https://wingo-ui.com/llms.txt.\n<!-- wingo-ui:end -->"}],"grok":[{"path":"AGENTS.md","mode":"block","content":"<!-- wingo-ui:start v=1 -->\n## Wingo UI\n\nThis project builds its UI with Wingo UI (React 19 + Tailwind CSS v4 components installed as source, see `wingo-ui.json`).\n\n- Before writing UI, use the `wingo-ui` MCP tools: `search_components` to find what exists (blocks for whole screens), `get_component` / `get_block` for props and usage, `get_design_rules` for tokens, sizes, motion and mobile rules. Never recreate a component the library has.\n- Install with `npx wingo-ui@latest add <slug...>`. At the start of UI work run `check_updates` (or `npx wingo-ui@latest outdated`) and mention updates; update with `npx wingo-ui@latest update`.\n- Semantic tokens only (`bg-background`, `bg-surface`, `text-muted-foreground`, `border-border`), configure components through props, keep `cn()`, `data-slot` and license headers in copied files. Check 390px and 1440px, light and dark.\n- No MCP tools available? The CLI has `search`, `info`, `add`, `outdated`, `update`; the docs for models are at https://wingo-ui.com/llms.txt.\n<!-- wingo-ui:end -->"}],"cursor":[{"path":".cursor/rules/wingo-ui.mdc","mode":"file","content":"---\ndescription: Build UI with Wingo UI components (React 19 + Tailwind CSS v4), using the wingo-ui MCP tools and CLI\nglobs: [\"**/*.tsx\", \"**/*.jsx\", \"**/*.css\"]\nalwaysApply: false\n---\n\n<!-- wingo-ui:managed v=1: refreshed by `npx wingo-ui@latest agents update`. Delete this line to keep your own edits. -->\n\n# Wingo UI\n\nThis project builds its UI with Wingo UI: components, full-screen blocks, hooks and helpers installed as source (`wingo-ui.json`).\n\n1. 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`).\n2. Call `search_components` before writing any UI; for whole screens look for a block first (`kind: \"block\"`, then `get_block`).\n3. `get_component` gives props with defaults, usage and the install command. Install with `npx wingo-ui@latest add <slug...>`.\n4. 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.\n5. Configure components through props instead of restyling; keep `cn()`, `data-slot` and license headers in copied files.\n\nPro items need a Pro API key for their source; never recreate one from its docs. Docs for models: https://wingo-ui.com/llms.txt.\n"}]}}