Agent skill

Moai Library Shadcn

by Asymmetric-al in Asymmetric-al/core

Build UI with Core's shadcn/Base UI system. An agent skill from Asymmetric-al/core.

AGPL-3.0Auto-check passedFrontend & Design

Install Moai Library Shadcn

skills CLI
$ npx skills add Asymmetric-al/core --skill moai-library-shadcn -a claude-code

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

GitHub CLI
$ gh skill install Asymmetric-al/core moai-library-shadcn --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/Asymmetric-al/core.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/moai-library-shadcn .claude/skills/moai-library-shadcn && 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/

Facts

Skill name
moai-library-shadcn
GitHub stars
381
Token cost
~1.6k tokens
SKILL.md length
620 words
Files
3 (incl. references)
Skills in repo
43
Repo updated
First seen
Licence
AGPL-3.0

At a glance

Build UI with Core's shadcn/Base UI system. An agent skill from Asymmetric-al/core.

  • Works in 6 steps: Read packages/ui/components.json and… → Run bunx shadcn@latest info --json from… → Search existing @asym/ui components… → …
  • Customizing shadcn/ui
  • SKILL.md covers This repository…, Rules, Workflow and Checklists, plus 3 more sections
  • Calls bun and bunx

What it does

Moai Library Shadcn is an agent skill from Asymmetric-al/core. Build UI with Core's shadcn/Base UI system. Use for selecting, installing, composing, or customizing shadcn/ui, registry items, themes, and wrappers. Always preserve exact style base-maia, Zinc-oriented semantic CSS-variable tokens, and Base UI primitives. Do not use to switch styles, run shadcn init, or introduce Radix/React Aria. Pair with packages/ui/AGENTS.md.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `reference-links.md` and `references/design-system-lint.md`).

It sits in Frontend & Design, covering Design systems. It works with shadcn/ui and React. The repository describes itself as: A high-performance, enterprise-grade Next.js 16 application for mission-focused non-profit organizations. Built for high impact teams. The licence is AGPL-3.0.

When your agent uses it

  • Customizing shadcn/ui
  • Run shadcn init
  • Introduce Radix/React Aria

Example prompts

  • “/moai-library-shadcn”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Read packages/ui/components.json and confirm style: "base-maia",
  2. Run bunx shadcn@latest info --json from packages/ui (never from an app).
  3. Search existing @asym/ui components before adding anything new.
  4. For registry or generated components, inspect CLI output, adapt to Maia, and
  5. Use Base UI render (not Radix asChild). Prefer semantic tokens over
  6. Follow Core design-system lint for

What it can do on your machine

Read from SKILL.md and the folder at commit c30c8ff. 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

    Shell commands in SKILL.md call:

    • bun
    • bunx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use bunx, which can reach the network depending on how they are called.

    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

Moai Library Shadcn loads about 1.6k tokens when it runs, and up to ~8k if it reads all its reference files. Until then it costs about 98 tokens; SKILL.md has 620 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~98
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~8k

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

The full file from Asymmetric-al/core at commit c30c8ff, republished under its AGPL-3.0 licence (© Asymmetric-al). 620 words, ~1,550 tokens.

Download SKILL.mdSave it as .claude/skills/moai-library-shadcn/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
moai-library-shadcn
description
Build UI with Core's shadcn/Base UI system. Use for selecting, installing, composing, or customizing shadcn/ui, registry items, themes, and wrappers. Always preserve exact style `base-maia`, Zinc-oriented semantic CSS-variable tokens, and Base UI primitives. Do not use to switch styles, run `shadcn init`, or introduce Radix/React Aria. Pair with `packages/ui/AGENTS.md`.

This repository (Asymmetric-al/core)

These repo-owned sections are intentionally kept on top of the vendored shadcn skill. If upstream refreshes replace this file, reconcile this overlay before running bun run skills:sync.

Triggers
  • Use for selecting, installing, composing, or customizing shadcn/ui, registry items, themes, and wrappers in this repo.
  • Use together with packages/ui/AGENTS.md and docs/ai/rules/frontend.md.
  • Do not use to switch styles, run shadcn init / shadcn create, or introduce Radix or React Aria. Never run shadcn init. Do not switch Core to base-nova, base-luma, base-mira, base-rhea, base-sera, base-vega, base-lyra, a Radix-based style, or a React Aria-based style.
Workflow
  1. Read packages/ui/components.json and confirm style: "base-maia", tailwind.baseColor: "zinc", tailwind.cssVariables: true.
  2. Run bunx shadcn@latest info --json from packages/ui (never from an app).
  3. Search existing @asym/ui components before adding anything new.
  4. For registry or generated components, inspect CLI output, adapt to Maia, and review the full diff. Never --overwrite without reviewing customizations.
  5. Use Base UI render (not Radix asChild). Prefer semantic tokens over literal zinc-* or hardcoded colors.
  6. Follow Core design-system lint for scoped lint, raw-finding review, authoring exceptions, and checking consumers after shared changes. Preserve other shadcn guardrails and browser evidence when visible. Do not load this workflow for unrelated work.
Checklist
  • Exact base-maia / Zinc / CSS variables remain unchanged
  • Shared ownership stays in packages/ui
  • Registry output adapted to Core tokens, radii, and primitives
  • No shadcn init, preset-switch, Radix, or React Aria
  • Overlay reconciled before bun run skills:sync

shadcn/ui Design System - Skill

Name: moai-library-shadcn Purpose: Build consistent, accessible UI using shadcn/ui components, tokens, and composable primitives. Use this skill whenever selecting, installing, composing, or customizing shadcn/ui in this repo.

Applies when: Working with shadcn/ui components, Tailwind tokens/themes, registry items, or component wrappers. Do not use when: Switching shadcn styles, running shadcn init / shadcn create, or introducing Radix / React Aria. Core UI is always Base UI + exact base-maia; pair this skill with packages/ui/AGENTS.md. Use base-ui for primitive API details after this skill.

Show full SKILL.md (300 more words)Show less

Rules

  • Docs first: Start with reference-links.md, then open the exact component doc before editing.
  • Copied-in code is first-party: Treat components/ui/* as owned project code with stable conventions.
  • Prefer install over reinvention: Use CLI/registry install paths for base components, then customize in wrappers.
  • Behavior primitives stay intact: Keep accessibility and keyboard behavior from the Base UI-backed internals (this repo is Base UI only).
  • Tokens over one-offs: Centralize color, radius, spacing, and typography; avoid hardcoded one-off styles.
  • Composable APIs: Keep props minimal, use Base UI's render prop intentionally (no asChild here), and avoid boolean-prop explosion.
  • Interoperability guardrail: If mixing with Base UI primitives, document the boundary and keep one clear owner per interaction.

Workflow

  1. Check whether an existing component already solves the need in components/ui/*.
  2. Open the relevant docs from reference-links.md.
  3. Choose install path:
    • CLI/registry install for standard components and blocks.
    • Manual composition only when customization requires it.
  4. Compose app-specific wrappers outside components/ui/*.
  5. Verify keyboard, focus, labels/descriptions, and light/dark behavior.
  6. Run scoped quality gates for changed packages.

Checklists

Implementation checklist
  • Existing shadcn component evaluated before creating new primitive
  • Token-based styling used (no unnecessary arbitrary values)
  • cn() and variants are consistent with existing patterns
  • render prop and composition semantics are correct
  • a11y behavior (focus, keyboard, ARIA) preserved
Review checklist
  • No duplicate component variants that should be shared
  • Wrapper components are outside components/ui/*
  • Forms include labels, help text, and error messaging
  • Any Base UI crossover is explicit and justified

Minimal examples

Reuse existing primitive
tsx
import { Button } from "@/components/ui/button";

export function Actions() {
  return (
    <div className="flex gap-2">
      <Button>Save</Button>
      <Button variant="secondary">Cancel</Button>
    </div>
  );
}
Extend in wrapper layer
tsx
import { Button } from "@/components/ui/button";

type LoadingButtonProps = React.ComponentProps<typeof Button> & {
  loading?: boolean;
};

export function LoadingButton({
  loading,
  children,
  ...props
}: LoadingButtonProps) {
  return (
    <Button disabled={loading} {...props}>
      {children}
    </Button>
  );
}

Additional resources

Common mistakes / pitfalls

  • Editing copied-in primitives when a thin wrapper is enough
  • Ignoring docs updates and relying on stale memory
  • Mixing primitive systems inside one component without clear ownership
  • Breaking keyboard/focus behavior while styling

© Asymmetric-al, AGPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (references) in .agents/skills/moai-library-shadcn of Asymmetric-al/core.

  • SKILL.md
  • reference-links.md
  • references/design-system-lint.md

Open the folder on GitHubat commit c30c8ff

Compare with similar skills

Moai Library Shadcn 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.

Moai Library Shadcn compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Moai Library Shadcn this skillAsymmetric-al/core381—~1.6kAutomated safety check: PassAGPL-3.0
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT
Cosscrafter-station/petdex4.2k—~1.4kAutomated safety check: PassMIT
Ss Learnbitjaru/styleseed973—~1.3kAutomated safety check: PassMIT
Migrate Radix To BaseTheOrcDev/youtube-to-blog1802 repos~2.3kAutomated safety check: PassMIT
UithingBayBreezy/ui-thing729—~1.3kAutomated safety check: PassCustom licence

Similar skills

  • Creative Tim UI Blocks

    creativetimofficial/ui

    Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

    12k GitHub stars~2.1k tokensUpdated 7 mo ago
    Frontend & DesignAuto-check: notes
  • Coss

    crafter-station/petdex

    Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.

    4.2k GitHub stars~1.4k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Ss Learn

    bitjaru/styleseed

    Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or…

    973 GitHub stars~1.3k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed
  • Migrate Radix To Base

    TheOrcDev/youtube-to-blog

    Migrates React projects and components from Radix UI to Base UI.

    180 GitHub starsUsed in 2 repos~2.3k tokens
    Frontend & DesignAuto-check passed
  • Uithing

    BayBreezy/ui-thing

    Manages UI Thing components, prose, blocks, themes, shortcuts, docs, and MCP-driven workflows in Nuxt projects and in the UI Thing source repo.

    729 GitHub stars~1.3k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed
  • Avoid AI Design

    sunkaifei/FlyCms

    Audit and rewrite frontend UI to remove generic AI design patterns ("AI slop"), both the first-order defaults (purple gradients, Inter, a centered hero over three cards, untouched shadcn) and the…

    656 GitHub stars~3.5k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

More from Asymmetric-al/core

All 43 skills in this repo
  • Idempotency Handling

    Asymmetric-al/core

    Implement idempotency keys and handling to ensure operations can be safely retried without duplicate effects.

    381 GitHub stars~867 tokensUpdated today
    Auto-check passed
  • Accessibility Review

    Asymmetric-al/core

    Audit and fix accessibility in Core UI. An agent skill from Asymmetric-al/core.

    381 GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Agent Email Inbox

    Asymmetric-al/core

    A skill your agent uses when building any system where email content triggers actions — AI agent inboxes, automated support handlers, email-to-task pipelines, or any workflow processing untrusted…

    381 GitHub stars~4.1k tokensUpdated today
    Auto-check: notes
  • Components Build

    Asymmetric-al/core

    Build modern, composable, and accessible React UI components following the components.build specification.

    381 GitHub stars~2.1k tokensUpdated today
    Auto-check passed
  • Create Agent

    Asymmetric-al/core

    Guides a one-question-at-a-time design interview, captures alignment in agent/EVE-BRIEF.md, then scaffolds and implements a runnable eve agent with verbose teaching comments.

    381 GitHub stars~2.6k tokensUpdated today
    Auto-check: notes
  • Emil Design Engineering

    Asymmetric-al/core

    Design engineering principles and patterns for building polished, accessible web interfaces.

    381 GitHub stars~1.4k tokensUpdated today
    Auto-check passed

Works with

Questions about Moai Library Shadcn

What does Moai Library Shadcn do?

Build UI with Core's shadcn/Base UI system. An agent skill from Asymmetric-al/core. Moai Library Shadcn is an agent skill from Asymmetric-al/core. Build UI with Core's shadcn/Base UI system.

When should I use Moai Library Shadcn?

Moai Library Shadcn fits situations like: customizing shadcn/ui; run shadcn init; introduce Radix/React Aria.

How do I install Moai Library Shadcn in Claude Code?

Run `npx skills add Asymmetric-al/core --skill moai-library-shadcn -a claude-code`. Or copy the skill folder (.agents/skills/moai-library-shadcn in Asymmetric-al/core) into .claude/skills/moai-library-shadcn in your project. Claude Code loads it when a task matches its description.

How do I install Moai Library Shadcn in Codex?

Run `npx skills add Asymmetric-al/core --skill moai-library-shadcn -a codex`. Or copy the skill folder (.agents/skills/moai-library-shadcn in Asymmetric-al/core) into .agents/skills/moai-library-shadcn in your project. Codex loads it when a task matches its description.

Can I use Moai Library Shadcn 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 Asymmetric-al/core --skill moai-library-shadcn -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/moai-library-shadcn, .gemini/skills/moai-library-shadcn, .github/skills/moai-library-shadcn and .opencode/skills/moai-library-shadcn in your project.

What does Moai Library Shadcn need to run?

Going by SKILL.md and its folder, Moai Library Shadcn needs the command-line tools its instructions call (bun and bunx).

Does Moai Library Shadcn 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 Moai Library Shadcn 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 Moai Library Shadcn use?

Moai Library Shadcn is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Moai Library Shadcn use?

About 1.6k tokens (SKILL.md is roughly 6.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 6.5k tokens, read only when the agent opens those files.

What are the alternatives to Moai Library Shadcn?

Skills that share tags, products or a category with Moai Library Shadcn: Creative Tim UI Blocks (creativetimofficial/ui, 12k stars), Coss (crafter-station/petdex, 4.2k stars), Ss Learn (bitjaru/styleseed, 973 stars) and Migrate Radix To Base (TheOrcDev/youtube-to-blog, 180 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Moai Library Shadcn?

Asymmetric-al (a GitHub organization) maintains it in Asymmetric-al/core, which has 381 GitHub stars. The repository holds 43 skills in this directory. The repository was last updated on October 9, 2026.

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