Skills

Skills give AI coding assistants project-aware context about AI UI Kit. When installed, your assistant knows how to find, install, compose, and customise components using the correct APIs, prop shapes, and styling patterns for your project.

  • Add a full-page AgentChat with a welcome empty state and wire it to my existing useChat route.
  • Render our tool-Deploy parts with a custom card and handle approve in onToolAction.
  • Build a settings screen with SettingsLayout, McpSettingsPanel and UsagePanel.
  • Embed ChatLauncher on the dashboard and theme it with AiKitProvider.
Install
Via skills.sh

Install the AI UI Kit skill via skills.sh. The skill bundle registers with every compatible assistant on your machine:

npx skills add sinups/ai-kit
Manual install for Agent CLI

Want to try the skill right now? Copy the SKILL.md from the repo into your Agent CLI skills folder:

mkdir -p ~/.agent/skills/ai-kit
curl -L https://raw.githubusercontent.com/sinups/ai-kit/master/site/skills/ai-kit/SKILL.md \
  -o ~/.agent/skills/ai-kit/SKILL.md

After install, restart your assistant. It will detect AI UI Kit whenever @sinups/ai-kit is listed in your package.json or imported in the code you are editing.

What's included
  • Project detection. Reads package.json and scans imports for @sinups/ai-kit.
  • Component catalog. Full inventory of the 25 components with API shapes, slots, and prop defaults.
  • Composition patterns. When to pair AgentChat with tool renderers, how to wire InputBar to the Vercel AI SDK, mode/model picker placement, and more.
  • Theming guardrails. The Mantine theme and --ae-* custom properties the library relies on, so the assistant restyles through tokens instead of overriding component internals.
  • Docs access. A pointer to llms-full.txt so the assistant can look up any component page on demand.
How it works
  1. Detection. The skill inspects the workspace for the package dependency and a MantineProvider.
  2. Context injection. Relevant component docs, prop types, and composition rules are loaded into the assistant's context on demand.
  3. Pattern enforcement. The assistant follows the same patterns you see in the docs: no hallucinated props, no drifting away from the Mantine conventions of the rest of your codebase.
  4. On-demand install. If the package is missing, the assistant installs @sinups/ai-kit with your package manager and adds the stylesheet import.
Learn more