Agent skill

Zoonk Compound Components

Create or refactor reusable Zoonk React UI primitives using flat compound components.

MITAuto-check passedDevelopment

Install Zoonk Compound Components

skills CLI

$ npx skills add zoonk/zoonk --skill zoonk-compound-components -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install zoonk/zoonk zoonk-compound-components --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/zoonk/zoonk.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/zoonk-compound-components .claude/skills/zoonk-compound-components && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "zoonk-compound-components" agent skill from https://github.com/zoonk/zoonk/tree/main/.agents/skills/zoonk-compound-components into .claude/skills/zoonk-compound-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zoonk-compound-components", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/zoonk/zoonk/tree/main/.agents/skills/zoonk-compound-components

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add zoonk/zoonk --skill zoonk-compound-components -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install zoonk/zoonk zoonk-compound-components --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/zoonk/zoonk.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/zoonk-compound-components .agents/skills/zoonk-compound-components && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "zoonk-compound-components" agent skill from https://github.com/zoonk/zoonk/tree/main/.agents/skills/zoonk-compound-components into .agents/skills/zoonk-compound-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zoonk-compound-components", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add zoonk/zoonk --skill zoonk-compound-components -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install zoonk/zoonk zoonk-compound-components --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/zoonk/zoonk.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/zoonk-compound-components .cursor/skills/zoonk-compound-components && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "zoonk-compound-components" agent skill from https://github.com/zoonk/zoonk/tree/main/.agents/skills/zoonk-compound-components into .cursor/skills/zoonk-compound-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zoonk-compound-components", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/zoonk/zoonk.git --path .agents/skills/zoonk-compound-components

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add zoonk/zoonk --skill zoonk-compound-components -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install zoonk/zoonk zoonk-compound-components --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/zoonk/zoonk.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/zoonk-compound-components .gemini/skills/zoonk-compound-components && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "zoonk-compound-components" agent skill from https://github.com/zoonk/zoonk/tree/main/.agents/skills/zoonk-compound-components into .gemini/skills/zoonk-compound-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zoonk-compound-components", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install zoonk/zoonk zoonk-compound-components

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add zoonk/zoonk --skill zoonk-compound-components -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/zoonk/zoonk.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/zoonk-compound-components .github/skills/zoonk-compound-components && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "zoonk-compound-components" agent skill from https://github.com/zoonk/zoonk/tree/main/.agents/skills/zoonk-compound-components into .github/skills/zoonk-compound-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zoonk-compound-components", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add zoonk/zoonk --skill zoonk-compound-components -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install zoonk/zoonk zoonk-compound-components --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/zoonk/zoonk.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/zoonk-compound-components .opencode/skills/zoonk-compound-components && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "zoonk-compound-components" agent skill from https://github.com/zoonk/zoonk/tree/main/.agents/skills/zoonk-compound-components into .opencode/skills/zoonk-compound-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zoonk-compound-components", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: zoonk-compound-components
GitHub stars: 157
Token cost: ~583 tokens
SKILL.md length: 261 words
Files: 1
Skills in repo: 11
Repo updated: Oct 8, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Create or refactor reusable Zoonk React UI primitives using flat compound components.

Development work in your project
SKILL.md covers Repository conventions and Shared state
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Zoonk Compound Components is an agent skill from zoonk/zoonk. Create or refactor reusable Zoonk React UI primitives using flat compound components.

Its SKILL.md is about 580 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development. It works with React, Vercel and Tailwind CSS. The repository describes itself as: Turn any topic into clear, structured lessons. The licence is MIT.

When your agent uses it

Development work in your project

Example prompts

“/zoonk-compound-components”

What it can do on your machine

Read from SKILL.md and the folder at commit d6d96be. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Zoonk Compound Components loads about 583 tokens when it runs. Until then it costs about 28 tokens; SKILL.md has 261 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~28
When it runs · the whole SKILL.md, loaded when a task matches: ~583

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Download SKILL.mdSave it as .claude/skills/zoonk-compound-components/SKILL.md (or your agent's skills folder).

name: zoonk-compound-components
description: Create or refactor reusable Zoonk React UI primitives using flat compound components.
license: MIT
metadata.author: zoonk
metadata.version: 2.0.0

Compound components

Use small composable primitives when callers need to arrange content or share styling. This convention applies to reusable UI building blocks; a page or domain composition can assemble several elements without turning every element into a new API.

Repository conventions

Prefer existing @zoonk/ui primitives. Put generic patterns in packages/ui and domain compositions in the owning app or feature.
A presentational primitive normally wraps one semantic element, accepts children and className, and exposes the relevant native props. Keep domain data fetching and orchestration in the composition that uses it.
Use flat names such as MediaCard, MediaCardTitle, and MediaCardDescription; do not introduce namespaced exports such as MediaCard.Title.
Use children for caller-owned content and className for styling overrides. Avoid bundles of title/description/action props or boolean variants when composition expresses the structure directly.
Name shared primitives by their UI purpose. Domain-specific names remain appropriate for domain compositions.
Use data-slot and Tailwind group/has variants for CSS coordination when needed. These attributes are not E2E selectors; preserve semantic elements, labels, and accessible relationships.
Translate fixed copy in the component that owns it. Caller-supplied content is appropriate when it is part of the intended reusable API.

tsx

<MediaCard>
  <MediaCardContent>
    <MediaCardTitle>{title}</MediaCardTitle>
    <MediaCardDescription>{description}</MediaCardDescription>
  </MediaCardContent>
</MediaCard>

Shared state

Pure visual composition does not need a provider. Use context when siblings must share state/actions or controls outside the main frame need access to them. For those cases, consult Vercel composition patterns, retaining Zoonk's flat naming. Do not add a provider solely to pass static content.

Use E2E coverage for user interactions according to the repository testing guidance; do not add isolated React component tests for these primitives.

Files

Just SKILL.md in .agents/skills/zoonk-compound-components of zoonk/zoonk.

Open the folder on GitHubat commit d6d96be

Compare with similar skills

Zoonk Compound Components next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Zoonk Compound Components compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Zoonk Compound Components this skillzoonk/zoonk	157	—	~583	Automated safety check: Pass	MIT	yesterday
Petdexcrafter-station/petdex	4.2k	—	~614	Automated safety check: Pass	MIT	11 days ago
Coss Particlescrafter-station/petdex	4.2k	—	~10k	Automated safety check: Pass	MIT	11 days ago
Vercel Composition Patternssupabase/supabase	111k	58 repos	~726	Automated safety check: Pass	MIT	today
Run Paritymillionco/react-doctor	15k	—	~4.1k	Automated safety check: Pass	Custom licence	today
Next Best Practicesvercel-labs/openreview	1.7k	18 repos	~1k	Automated safety check: Pass	None	7 mo ago

Similar skills

Petdex
crafter-station/petdex
Browse, install, submit, and edit pixel-art pets with the Petdex CLI.
4.2k GitHub stars~614 tokensUpdated 11 days ago
Game DevelopmentAuto-check passed
Coss Particles
crafter-station/petdex
Index of all COSS UI particle examples. An agent skill from crafter-station/petdex.
4.2k GitHub stars~10k tokensUpdated 11 days ago
Game DevelopmentAuto-check passed
Vercel Composition Patterns
supabase/supabase
Official
React composition patterns that scale. An agent skill from supabase/supabase.
111k GitHub starsUsed in 58 repos~726 tokens
DevelopmentAuto-check passed
Run Parity
millionco/react-doctor
Compare React Doctor diagnostics for a GitHub pull request (PR) with Vercel Sandbox.
15k GitHub stars~4.1k tokensUpdated today
DevelopmentAuto-check passed
Next Best Practices
vercel-labs/openreview
Official
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
1.7k GitHub starsUsed in 18 repos~1k tokens
DevelopmentAuto-check passed
Coss
crafter-station/petdex
Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.
4.2k GitHub stars~1.4k tokensUpdated 11 days ago
Frontend & DesignAuto-check passed

More from zoonk/zoonk

All 11 skills in this repo

Workflow
zoonk/zoonk
Creates durable, resumable workflows using Vercel's Workflow DevKit.
157 GitHub stars~3.1k tokensUpdated yesterday
Auto-check passed
Android Material Guidelines
zoonk/zoonk
A skill your agent uses when designing, reviewing, or implementing Android UI or features for phones, tablets, foldables, ChromeOS, desktop windowing, Wear OS, Android TV, Android for Cars, Android…
157 GitHub stars~1.1k tokensUpdated yesterday
Auto-check passed
Apple Human Interface Guidelines
zoonk/zoonk
A skill your agent uses when designing, reviewing, or implementing any Apple-platform UI or feature for iOS, iPadOS, macOS, visionOS, tvOS, watchOS, SwiftUI, UIKit, AppKit, WatchKit, app icons, Dark…
157 GitHub stars~942 tokensUpdated yesterday
Auto-check passed
Zoonk GitHub Issues
zoonk/zoonk
Create or update problem-focused Zoonk GitHub issues and their requested metadata or relationships.
157 GitHub stars~632 tokensUpdated yesterday
Auto-check passed
Zoonk Commit
zoonk/zoonk
Write Zoonk commit messages and PR titles or descriptions when preparing a commit or pull request.
157 GitHub stars~578 tokensUpdated yesterday
Auto-check passed
Zoonk Issue Planning
zoonk/zoonk
Break work into GitHub issues, epics, or dependencies when the user explicitly requests an issue breakdown.
157 GitHub stars~707 tokensUpdated yesterday
Auto-check passed

Works with

Questions about Zoonk Compound Components

What does Zoonk Compound Components do?

Create or refactor reusable Zoonk React UI primitives using flat compound components. Zoonk Compound Components is an agent skill from zoonk/zoonk. Create or refactor reusable Zoonk React UI primitives using flat compound components.

When should I use Zoonk Compound Components?

Zoonk Compound Components fits situations like: development work in your project.

How do I install Zoonk Compound Components in Claude Code?

Run `npx skills add zoonk/zoonk --skill zoonk-compound-components -a claude-code`. Or copy the skill folder (.agents/skills/zoonk-compound-components in zoonk/zoonk) into .claude/skills/zoonk-compound-components in your project. Claude Code loads it when a task matches its description.

How do I install Zoonk Compound Components in Codex?

Run `npx skills add zoonk/zoonk --skill zoonk-compound-components -a codex`. Or copy the skill folder (.agents/skills/zoonk-compound-components in zoonk/zoonk) into .agents/skills/zoonk-compound-components in your project. Codex loads it when a task matches its description.

Can I use Zoonk Compound Components in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add zoonk/zoonk --skill zoonk-compound-components -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/zoonk-compound-components, .gemini/skills/zoonk-compound-components, .github/skills/zoonk-compound-components and .opencode/skills/zoonk-compound-components in your project.

What does Zoonk Compound Components need to run?

SKILL.md names no scripts, command-line tools or credentials: Zoonk Compound Components is instructions for the agent only.

Does Zoonk Compound Components access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Zoonk Compound Components safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Zoonk Compound Components use?

Zoonk Compound Components is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Zoonk Compound Components use?

About 583 tokens (SKILL.md is roughly 2.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Zoonk Compound Components?

Skills that share tags, products or a category with Zoonk Compound Components: Petdex (crafter-station/petdex, 4.2k stars), Coss Particles (crafter-station/petdex, 4.2k stars), Vercel Composition Patterns (supabase/supabase, 111k stars) and Run Parity (millionco/react-doctor, 15k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Zoonk Compound Components?

zoonk (a GitHub organization) maintains it in zoonk/zoonk, which has 157 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on October 8, 2026.

Source: zoonk/zoonk on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Zoonk Compound Components

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Compound components

Repository conventions

Shared state

Files

Compare with similar skills

Similar skills

More from zoonk/zoonk

Related

Questions about Zoonk Compound Components