Agent skill

Drop a HippoUI skill into your repo so Claude Code (and any Claude Agent SDK project) knows how to install, compose, and theme HippoUI components without you retyping the rules every session.

What is a skill?

A skill is a Markdown file with frontmatter that tells an AI agent when to activate and how to behave. Claude Code auto-loads anything under .claude/skills/.

Install

One command. Drops SKILL.md in the right spot.

bash

npx myhippo skill

Result:

bash

.claude/
└── skills/
    └── hippo-ui/
        └── SKILL.md

What the skill contains

Full source of the installed skill — CLI reference, import rules, theming conventions. Edit freely; you own the file.

---
name: hippo-ui
description: Use when building UI in a project that uses hippo-ui. Installs, updates, and composes copy-paste React components. Trigger on "add a button", "add a dialog", "theme the app", or "use hippo-ui".
---

# HippoUI skill

HippoUI components live under `components/ui/`. There is no runtime package — edit the source directly.

## CLI

```bash
npx myhippo clone                  # install every component
npx myhippo add <name...>          # install specific components
npx myhippo update <name...>       # overwrite components
npx myhippo remove <name...>       # delete components
npx myhippo theme <name>           # install a theme preset
npx myhippo skill                  # install this skill
```

## Rules

- Import from `@/components/ui/<name>`. Never from an npm package.
- If a component is missing, run `npx myhippo add <name>` — do not fabricate it.
- Use the `cn` helper from `@/lib/cn` for conditional classes.
- Respect CSS variables (`bg-background`, `text-foreground`, `bg-primary`, `border-border`). Never hardcode hex.
- Dark mode is class-based on `<html>`. Components already handle it.
- Animations use `motion/react`. Follow patterns in the component source.

Using it

Open Claude Code in a repo with the skill installed.
Ask something like "add a settings dialog using hippo-ui" — the skill activates, the agent runs npx myhippo add dialog if needed, imports from @/components/ui/dialog, and wires it up.
Works with the Claude Agent SDK too — point it at the same file.

Customize

Add project-specific rules (naming conventions, required wrappers, accessibility checklists) below the default block. The skill is just Markdown — agents read the whole file.