Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

shadcn-ui · nexu-io — Claude Code skill: what it does, how to install

This skill helps an agent build structured, accessible UI components with shadcn/ui. Use it while planning an interface with the Stitch design loop.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nexu-io/open-design --skill shadcn-ui -a claude-code
Open on GitHub

What shadcn-ui does

shadcn-ui helps an agent build UI components with shadcn/ui. It pairs with the Stitch design loop and guides work on structured components where accessibility is part of the task.

The OpenDesign entry lets the agent discover the skill during planning. The full upstream workflow uses its original assets, scripts, and references, so the bundle must be added to the active skills directory when that workflow is needed.

The skill is available for Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode. Check the install path for the selected agent first, because each platform uses its own location.

What it helps with

  • build UI components with shadcn/ui
  • plan an interface structure
  • account for component accessibility
  • connect the Stitch design loop to agent work
  • make the skill discoverable during planning

Example prompts for the agent

  • Use `shadcn-ui` to build an accessible login form with shadcn/ui.
  • Use `shadcn ui` to plan the page structure and its UI components.
  • Apply `shadcn components` during the Stitch design loop for the current interface.

How to install shadcn-ui

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill shadcn-ui -a claude-code

2Manually: put the files in place

~/.claude/skills/shadcn-ui/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/shadcn-ui/

From the same set106

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs design-md nexu-io Creates and maintains DESIGN.md with design direction, tokens, and visual rules. Useful when an agent needs one source of truth for a project’s design system. Claude Code CX Codex Cursor +1 3,100installs

Other versions of shadcn-ui

shadcn-ui official google-labs-code Helps discover, add, and customize shadcn/ui components in React projects. Useful when building interfaces with Tailwind CSS. Claude Code CX Codex Cursor +1 53,400installs

Similar

argent-screenshot-diff software-mansion Compares before and after screenshots to catch layout shifts, spacing, color and text rendering changes. Claude Code CX Codex Cursor +1 24,900installs presentation iii-hq Turns a technical-spec directory into an interactive web presentation. Use it when a specification needs a shareable deck with a clear narrative. Claude Code CX Codex Cursor +1 3,400installs popular-web-designs Hermes Agent + Teknium (design systems sourced from VoltAgent/awesome-design-md) 54 real-world design systems (Stripe, Linear, Vercel, Claude) with CSS tokens, typography, and components for building pages styled after known brands. Claude Code CX Codex Cursor +1 914installs expo-data-fetching expo Configures data fetching, caching, and screen states in Expo apps. Guides network calls with expo/fetch and TanStack Query. Claude Code CX Codex Cursor +1 27,200installs playwright-skill lackeyjb Write and run Playwright scripts directly in your IDE. Auto-detects dev servers, takes screenshots, checks responsive layouts, tests login flows, and validates web functionality. Claude Code CX Codex Cursor +1 6,900installs angular-migration Seth Hobson Helps move AngularJS applications to Angular through a full rewrite or staged migration. Use it for hybrid apps, component conversion, and dependency injection changes. Claude Code CX Codex Cursor 10,900installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about shadcn-ui

How do I install shadcn-ui in Claude Code?

Run these steps in order: npx skills add nexu-io/open-design --skill shadcn-ui -a claude-code, then run npx skills add nexu-io/open-design --skill shadcn-ui -a claude-code again, and check ~/.claude/skills/shadcn-ui/SKILL.md.

What does shadcn-ui do?

The skill helps an agent build structured UI components with shadcn/ui and account for accessibility. It also connects the work to the Stitch design loop.

What is needed for the full shadcn-ui workflow?

The full upstream workflow uses the original assets, scripts, and references. Add that bundle to the active skills directory when the full workflow is required.

Source text

SKILL.md · Apache-2.0 
---
name: shadcn-ui
description: |
  Build UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly.
triggers:
  - "shadcn"
  - "shadcn ui"
  - "shadcn components"
  - "accessible components"
od:
  mode: design-system
  category: design-systems
  upstream: "https://github.com/google-labs-code/skills"
---

# shadcn-ui

> Curated from Google Labs (Stitch).

## What it does

Build UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly.

## Source

- Upstream: https://github.com/google-labs-code/skills
- Category: `design-systems`

## How to use

This catalogue entry advertises the skill in OpenDesign so the agent
discovers it during planning. To run the full upstream workflow with
its original assets, scripts, and references, install the upstream
bundle into your active agent's skills directory:

```bash
# Inspect the upstream README for exact paths
open https://github.com/google-labs-code/skills
```

Then ask the agent to invoke this skill by name (`shadcn-ui`) or with
one of the trigger phrases listed in this skill's frontmatter.

© nexu-io · Apache-2.0 · nexu-io/open-design

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor