Skip to content

AI Skills

Claude Code AI skills are reusable instruction sets that give Claude deep, project-specific knowledge. The skill below is built specifically for OntoUI — it activates automatically based on what you ask, so you never have to name it explicitly.

Installation

Terminal window
npx skills add ontoui/ontoui

Claude Code automatically discovers installed skills in your project. No configuration or registration is needed.

ontoui

The primary skill. Covers building UI components, forms, layouts, and pages using @ontoui/react.

When it activates

The skill activates whenever you ask Claude to build or create something with OntoUI, however casually phrased:

  • “make me a login form”
  • “build a settings page”
  • “add OntoUI to my Next.js app”
  • “create a data table”
  • “build a modal with a confirmation dialog”
  • “add a toast notification”
  • “make a multi-step form”

What it does

Component building: Produces complete, runnable components with correct imports, proper use of OntoUI primitives (Button, TextField, Modal, DataGrid, etc.), and accessible markup.

Project setup: Walks through installing @ontoui/react, importing styles, and wiring everything up in your framework of choice (Next.js App Router, Pages Router, Vite, plain React).

Component selection: When you haven’t specified a component or the choice is non-obvious, the skill consults the available component list with guidance on when to use each one (e.g. Select vs RadioGroup, Modal vs Popover, Tooltip vs Popover).

Framework awareness: Detects your framework and adjusts generated code accordingly, including where to import styles and whether to add "use client" directives.

Output format

Every response includes:

  1. Complete, runnable code with no placeholders
  2. Proper import statements from @ontoui/react
  3. A brief explanation covering the key structure and accessibility decisions (skipped for trivial requests)