Discover and use the AI agent skills shipped with @loke/design-system, @loke/ui, and @loke/icons.

AI Agent Skills (TanStack Intent)

All three LOKE packages ship SKILL.md files via @tanstack/intent. These skills guide AI agents through common tasks — composing overlays, building forms, using icons, and more.

1. Run install

npx @tanstack/intent@latest install

This prints a skill — a prompt you paste into your AI agent. The skill instructs your agent to:

Check for existing intent-skills mappings in your config files (AGENTS.md, CLAUDE.md, .cursorrules, etc.)
Run npx @tanstack/intent@latest list to discover available skills from your installed packages
Scan your repository structure to understand your project
Propose relevant skill-to-task mappings based on your codebase patterns
Ask if you want a target other than AGENTS.md
Write or update an intent-skills block in your agent config

If an intent-skills block already exists, the agent updates that file in place. If none exists, AGENTS.md is the default target.

2. Use skills in your workflow

When your AI agent works on a task matching a skill mapping, it loads the corresponding SKILL.md into context automatically. This means agents can discover and apply best practices without manual prompting — they get domain-specific guidance tailored to the LOKE libraries directly in their context.

3. Keep skills up-to-date

Skills version with each package release. Updating a package brings updated skills — no manual action needed:

bun update @loke/design-system @loke/ui @loke/icons

To see what skills are available:

npx @tanstack/intent@latest list

To check for skills referencing outdated source docs:

npx @tanstack/intent@latest stale

Available skills

@loke/design-system skills

These skills cover all design system components and theming. Load paths: node_modules/@loke/design-system/skills/<skill>/SKILL.md

Skill	Covers
`getting-started`	Install, Tailwind v4 config, stylesheet import, TooltipProvider setup
`forms`	Form components: Input, Select, Checkbox, RadioGroup, Switch, Textarea, Calendar, DatePicker
`display-components`	Alert, Badge, Avatar, Card, Heading, Text, Separator, Pagination, Skeleton
`data-tables`	Table component patterns and column configuration
`layout`	Box, Stack, Inline, Columns, MaxWidthWrapper, PageLayout, VisuallyHidden
`overlay-composition`	Dialog, Sheet, Popover, DropdownMenu, Command, Tooltip, Toast — "use client" boundaries
`interactive-components`	Accordion, Collapsible, Tabs, Sidebar
`theming`	CSS custom properties, dark mode, color token customization

@loke/ui skills

These skills cover headless primitives, utility functions, and hooks. Load paths: node_modules/@loke/ui/skills/<skill>/SKILL.md

Skill	Covers
`loke-ui`	Overview of all headless primitives and when to use @loke/ui vs @loke/design-system
`choosing-the-right-component`	Decision guide for picking the right primitive
`accordion`	Accordion primitive
`alert-dialog`	AlertDialog primitive
`checkbox`	Checkbox primitive
`collapsible`	Collapsible primitive
`command`	Command (combobox/search) primitive
`context-and-collection`	Context and Collection utilities
`dialog`	Dialog primitive
`dropdown-menu`	DropdownMenu and Menu primitives
`hooks`	useCallbackRef, useControllableState, useDirection, useEscapeKeydown, useId, useIsDocumentHidden, useIsHydrated, useLayoutEffect, useMobile, usePrevious, useSize
`label`	Label primitive
`overlay-infrastructure`	Portal, Presence, DismissableLayer, FocusGuards
`popover`	Popover primitive
`primitive-and-slot`	Primitive and Slot utilities
`radio-group`	RadioGroup primitive
`select`	Select primitive
`switch`	Switch primitive
`tabs`	Tabs primitive
`tooltip`	Tooltip primitive

@loke/icons skills

These skills cover icon discovery, usage, and customization. Load paths: node_modules/@loke/icons/skills/<skill>/SKILL.md

Skill	Covers
`use-icons`	Importing and rendering icons in React
`find-icons`	Searching the icon catalog to find the right icon
`add-icons`	Adding new SVG icons to the library
`create-custom-icons`	Creating custom icon components

AI Agent Skills (TanStack Intent)

On this page