Skip to main content
Search...

Agent Skills

Install AI coding skills that teach your agent how to work with gentleduck/ui.

Agent skills are markdown instruction files that teach AI coding assistants the APIs, patterns, and conventions of a codebase so they produce correct code on the first try.

Overview

gentleduck/ui ships agent skills that teach AI coding assistants how to work with every package in the ecosystem. Skills follow the open Agent Skills specification and work with Claude Code, GitHub Copilot, Cursor, Cline, OpenCode, and 30+ other agents.

Install

npx skills add gentelduck/ui
npx skills add gentelduck/ui

This installs all available skills into your agent's configuration. Each skill is scoped to a single package so the agent only loads the context it needs.

To install a single skill instead of all of them:

npx skills add gentelduck/ui --skill duck-primitives
npx skills add gentelduck/ui --skill duck-primitives

Available Skills

SkillPackageWhat it covers
duck-ui@gentleduck/registry-uiStyled Tailwind components, variant system, compound patterns, coding style
duck-primitives@gentleduck/primitivesHeadless a11y-first primitives, scoped context, Slot/asChild, Presence
duck-variants@gentleduck/variantscva() variant function, VariantProps, CvaProps, type inference
duck-cli@gentleduck/cliCLI commands, template scaffolding, command authoring pattern
duck-vim@gentleduck/vimKeyboard engine, hotkey parsing, sequences, React hooks

MCP Documentation Server

Connecting your agent to the MCP documentation server gives it live access to component APIs, code examples, and full-text search across the docs site. This means the agent can look up accurate, up-to-date information at generation time instead of relying solely on the static skill instructions.

The docs site exposes an MCP server that skills can connect to for real-time documentation access:

https://ui.gentleduck.org/api/mcp

Available MCP tools:

  • list_docs — list documentation pages by category
  • read_doc — read a full documentation page
  • search_docs — keyword search with typo tolerance
  • get_component_api — get props table for a component
  • get_examples — get code examples from a doc page
  • get_changelog — get changelog entries
  • get_installation — get setup guide for a framework
  • suggest_components — describe a need and get ranked suggestions
  • semantic_search — natural language search using TF-IDF

To connect your agent to the MCP server, add this to your project's .mcp.json:

{
  "mcpServers": {
    "duck-ui-docs": {
      "type": "url",
      "url": "https://ui.gentleduck.org/api/mcp"
    }
  }
}
{
  "mcpServers": {
    "duck-ui-docs": {
      "type": "url",
      "url": "https://ui.gentleduck.org/api/mcp"
    }
  }
}

How Skills Work

Each skill is a SKILL.md file with YAML frontmatter and markdown instructions:

---
name: duck-ui
description: Use when working with styled @gentleduck/registry-ui components...
allowed-tools: Read Grep Glob
---
 
# Instructions for the agent...
---
name: duck-ui
description: Use when working with styled @gentleduck/registry-ui components...
allowed-tools: Read Grep Glob
---
 
# Instructions for the agent...

The agent reads the description to decide when to activate the skill. The markdown body provides the actual instructions. Reference files in a references/ subdirectory provide deeper context loaded on demand.

Contributing Skills

Want to add a skill for a new package or improve an existing one? The general workflow is:

  1. Create a directory under skills/ with a SKILL.md containing frontmatter and markdown instructions.
  2. Optionally add a references/ subdirectory for detailed content the agent loads on demand.
  3. Test locally by symlinking into .claude/skills/ and starting a new agent session.
  4. Open a pull request. The skill becomes installable as soon as it merges.

See the skills README for the full authoring guide, quality checklist, and publishing instructions.

MCP ServerFAQs