New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Admin Shadcn

by speakeasy-api in speakeasy-api/gram

A skill your agent uses when adding, changing, or styling UI in client/admin (the Gram admin dashboard) that touches shadcn/ui — a button, dialog, table, sidebar, badge, select, tabs, tooltip, card…

AGPL-3.0Auto-check passedFrontend & Design

Install Admin Shadcn

skills CLI
$ npx skills add speakeasy-api/gram --skill admin-shadcn -a claude-code

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

GitHub CLI
$ gh skill install speakeasy-api/gram admin-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/speakeasy-api/gram.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/admin-shadcn .claude/skills/admin-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
admin-shadcn
GitHub stars
272
Token cost
~1k tokens
SKILL.md length
488 words
Files
1
Skills in repo
39
Repo updated
First seen
Licence
AGPL-3.0

At a glance

A skill your agent uses when adding, changing, or styling UI in client/admin (the Gram admin dashboard) that touches shadcn/ui — a button, dialog, table, sidebar, badge, select, tabs, tooltip, card…

  • Works in 2 steps: Get components from the CLI. Never… → Never edit a ui/ file. Customize by…
  • Styling UI in client/admin (the Gram admin dashboard) that touches shadcn/ui — a button
  • SKILL.md covers Commands, After you add a component, Customize by composition and Read the --diff output correctly, plus 1 more section
  • Calls pnpm

What it does

Admin Shadcn is an agent skill from speakeasy-api/gram. Use when adding, changing, or styling UI in client/admin (the Gram admin dashboard) that touches shadcn/ui — a button, dialog, table, sidebar, badge, select, tabs, tooltip, card, sheet, or any file under client/admin/src/components/ui/. Triggers include "add a shadcn component", "install shadcn X", "npx shadcn add", "restyle this button", "change the dialog", "that variant does not exist", any edit to client/admin/src/components/ui/, and the errors "No components.json was found" or "sh: 1: oxfmt: not found".

Its SKILL.md is about 1k 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 Frontend & Design, covering Design systems. It works with shadcn/ui. The repository describes itself as: Securely scale AI usage across your organization. A single stack to Connect, Secure, Observe and Distribute agents, MCPs, and Skills within your company. The licence is AGPL-3.0.

When your agent uses it

  • Styling UI in client/admin (the Gram admin dashboard) that touches shadcn/ui — a button
  • Any file under client/admin/src/components/ui/
  • Include add a shadcn component
  • Install shadcn X

Example prompts

  • “add a shadcn component”
  • “install shadcn X”
  • “npx shadcn add”
  • “/admin-shadcn”

Requirements

  • Node.js

Workflow steps

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

  1. Get components from the CLI. Never hand-write a ui/ file. Never paste one from ui.shadcn.com.
  2. Never edit a ui/ file. Customize by composition. If a change looks impossible without editing ui/, stop and ask the user.

What it can do on your machine

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

    • pnpm

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

  • Network

    No URLs in SKILL.md. Its commands use pnpm, 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

Admin Shadcn loads about 1k tokens when it runs. Until then it costs about 132 tokens; SKILL.md has 488 words of instructions outside code blocks.

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

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 speakeasy-api/gram at commit 4d32da1, republished under its AGPL-3.0 licence (© speakeasy-api). 488 words, ~1,044 tokens.

Download SKILL.mdSave it as .claude/skills/admin-shadcn/SKILL.md (or your agent's skills folder).
name
admin-shadcn
description
Use when adding, changing, or styling UI in client/admin (the Gram admin dashboard) that touches shadcn/ui — a button, dialog, table, sidebar, badge, select, tabs, tooltip, card, sheet, or any file under client/admin/src/components/ui/. Triggers include "add a shadcn component", "install shadcn X", "npx shadcn add", "restyle this button", "change the dialog", "that variant does not exist", any edit to client/admin/src/components/ui/, and the errors "No components.json was found" or "sh: 1: oxfmt: not found".
metadata.relevant_files
client/admin/**

shadcn in client/admin

client/admin/src/components/ui/** is vendored. The shadcn CLI owns every file in it. Two rules follow:

  1. Get components from the CLI. Never hand-write a ui/ file. Never paste one from ui.shadcn.com.
  2. Never edit a ui/ file. Customize by composition. If a change looks impossible without editing ui/, stop and ask the user.

client/dashboard does not obey rule 2 today. Its ui/ directory holds custom files. Do not copy that habit into client/admin.

Commands

Run every shadcn command from client/admin. The CLI reads the nearest components.json. From the repo root it resolves the wrong package.

GoalCommand
Add a componentaube dlx shadcn@latest add <name>
Preview before you addaube dlx shadcn@latest add <name> --dry-run
Show the project configaube dlx shadcn@latest info
Read the component docsaube dlx shadcn@latest docs <name>
Compare with upstreamaube dlx shadcn@latest add <name> --diff

Do not use npx, npm, yarn, or pnpm dlx. This repo uses aube.

Read docs <name> before you decide that a variant or a sub-component is missing.

After you add a component

Run these three commands, in this order:

hk fix
aube run -F admin type-check
aube run -F admin lint:oxlint

hk fix is not optional. Every file the shadcn CLI writes fails oxfmt. hk fix reformats it.

Do not run aube run -F admin lint or aube run -F admin lint:format. Both fail before they lint. oxfmt is installed only in the root node_modules/.bin, so the package script stops at sh: 1: oxfmt: not found.

--dry-run lists the dependencies a component pulls in. When the CLI adds a dependency to client/admin/package.json, check pnpm-workspace.yaml for a catalog: entry. Use catalog: when one exists.

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

Customize by composition

Use the first option that works:

  1. Props and className. Layout and spacing only.
  2. Built-in variants. <Button variant="ghost" size="sm">.
  3. A wrapper component in client/admin/src/components/, never in ui/. ConfirmDialog.tsx wraps Dialog. data-table.tsx wraps the table primitives. Follow that pattern and name the wrapper for what it is.
  4. A cva variant object in your own file, applied through cn().

Never override a component's colors with className. Use the semantic tokens: bg-primary, text-muted-foreground, border-border.

Read the --diff output correctly

--diff compares the local file with upstream. Two differences are expected noise:

  • "Formatting-only changes (spacing, quotes, semicolons)" — caused by hk fix. Every admin component reports this. It is not drift.
  • A "use client" line added or removed — components.json sets "rsc": false and admin is a Vite SPA.

Anything else is real drift. Report it to the user. Do not overwrite it silently.

--diff prints at most 5 files per run. Pass one component at a time when you need the full list.

Common mistakes

  • Hand-writing ui/card.tsx because it is short. Run the CLI.
  • Editing ui/button.tsx to add a variant. Wrap it, or ask the user.
  • Running the CLI from the repo root, then finding the file in client/dashboard.
  • Passing --overwrite to clear a conflict. It discards local state. Run --diff first and read it.
  • Skipping hk fix, then failing CI on formatting.

© speakeasy-api, 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

Just SKILL.md in .agents/skills/admin-shadcn of speakeasy-api/gram.

Open the folder on GitHubat commit 4d32da1

Compare with similar skills

Admin 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.

Admin Shadcn compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Admin Shadcn this skillspeakeasy-api/gram272—~1kAutomated safety check: PassAGPL-3.0
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
Shadcnsupabase/evals14342 repos~4.5kAutomated safety check: PassApache-2.0
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT
Cosscrafter-station/petdex4.2k—~1.4kAutomated safety check: PassMIT
Ss Learnbitjaru/styleseed970—~1.3kAutomated safety check: PassMIT

Similar skills

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed

  • Shadcn

    supabase/evals

    Official

    Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI.

    143 GitHub starsUsed in 42 repos~4.5k tokens
    Frontend & DesignAuto-check passed

  • 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 6 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 8 days ago
    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…

    970 GitHub stars~1.3k tokensUpdated 6 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.

    179 GitHub starsUsed in 2 repos~2.3k tokens
    Frontend & DesignAuto-check passed

More from speakeasy-api/gram

All 39 skills in this repo

  • Gram Playwright CLI

    speakeasy-api/gram

    A skill your agent uses when automating the Gram dashboard in a browser, capturing screenshots, inspecting pages.

    272 GitHub stars~3.4k tokensUpdated today
    Auto-check passed

  • Transactional Email

    speakeasy-api/gram

    A skill your agent uses when adding, changing, restyling, reviewing, validating, or previewing a Gram/Speakeasy transactional email, in Go or in LMX/MJML — a template<name.go, a TemplateKey…

    272 GitHub stars~4.7k tokensUpdated today
    Auto-check passed

  • Authoring Platform MCP Skills

    speakeasy-api/gram

    A skill your agent uses when adding, editing, reviewing, testing, or locating a reviewed skill distributed with the Platform MCP plugin; triggers include "Platform MCP skill", "platformmcpskills"…

    272 GitHub stars~2.2k tokensUpdated today
    Auto-check passed

  • Clickhouse

    speakeasy-api/gram

    A skill your agent uses when changing or reviewing Gram ClickHouse schemas, migrations, queries, inserts, access principals, bootstrap SQL, Cloud compatibility, partial migration failures, or…

    272 GitHub stars~3.2k tokensUpdated today
    Auto-check passed

  • Feature Flag

    speakeasy-api/gram

    A skill your agent uses when gating a feature behind a flag, dogfooding or gradually rolling out a change, choosing between productfeatures and PostHog feature flags, adding or checking a product…

    272 GitHub stars~2.6k tokensUpdated today
    Auto-check passed

  • Gram Pubsub Python

    speakeasy-api/gram

    How to build and run GCP Pub/Sub stream subscribers in Python under pystreams/ — the multi command (start at pystreams/src/pystreams/cmd/multi.py), the graminfra.pubsub publisher/subscriber library…

    272 GitHub stars~4.1k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Admin Shadcn

What does Admin Shadcn do?

A skill your agent uses when adding, changing, or styling UI in client/admin (the Gram admin dashboard) that touches shadcn/ui — a button, dialog, table, sidebar, badge, select, tabs, tooltip, card…. Admin Shadcn is an agent skill from speakeasy-api/gram. Use when adding, changing, or styling UI in client/admin (the Gram admin dashboard) that touches shadcn/ui — a button, dialog, table, sidebar, badge, select, tabs, tooltip, card, sheet, or any file under client/admin/src/components/ui/.

When should I use Admin Shadcn?

Admin Shadcn fits situations like: styling UI in client/admin (the Gram admin dashboard) that touches shadcn/ui — a button; any file under client/admin/src/components/ui/; include add a shadcn component; install shadcn X.

How do I install Admin Shadcn in Claude Code?

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

How do I install Admin Shadcn in Codex?

Run `npx skills add speakeasy-api/gram --skill admin-shadcn -a codex`. Or copy the skill folder (.agents/skills/admin-shadcn in speakeasy-api/gram) into .agents/skills/admin-shadcn in your project. Codex loads it when a task matches its description.

Can I use Admin 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 speakeasy-api/gram --skill admin-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/admin-shadcn, .gemini/skills/admin-shadcn, .github/skills/admin-shadcn and .opencode/skills/admin-shadcn in your project.

What does Admin Shadcn need to run?

Going by SKILL.md and its folder, Admin Shadcn needs the command-line tools its instructions call (pnpm). Our summary lists: Node.js.

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

Admin 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 Admin Shadcn use?

About 1k tokens (SKILL.md is roughly 4.2k 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 Admin Shadcn?

Skills that share tags, products or a category with Admin Shadcn: UI Styling (Ohh-889/skyroc, 795 stars), Shadcn (supabase/evals, 143 stars), Creative Tim UI Blocks (creativetimofficial/ui, 12k stars) and Coss (crafter-station/petdex, 4.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Admin Shadcn?

speakeasy-api (a GitHub organization) maintains it in speakeasy-api/gram, which has 272 GitHub stars. The repository holds 39 skills in this directory. The repository was last updated on October 7, 2026.

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