AgentSkillsCN

shadcn-ui

基于Radix UI与Tailwind CSS构建的现代React组件库。

SKILL.md
--- frontmatter
name: shadcn-ui
description: Modern React component library built on Radix UI and Tailwind CSS
license: MIT
compatibility: opencode
metadata:
  framework: react
  styling: tailwind
  accessibility: radix-ui

What I do

I provide up-to-date knowledge and implementation guidance for Shadcn/UI, a modern React component library. I help you:

  • •Find and implement the right components for your use case
  • •Understand component APIs, props, and customization options
  • •Set up and configure Shadcn/UI in your project
  • •Follow best practices for component composition and theming
  • •Integrate with Tailwind CSS and design tokens

When to use me

Load this skill when you're:

  • •Building React applications with Shadcn/UI components
  • •Need to research component APIs or implementation patterns
  • •Setting up a new project with Shadcn/UI
  • •Customizing or extending Shadcn/UI components
  • •Troubleshooting component behavior or styling issues

How I work

I use the Context7 MCP to fetch the latest documentation and examples from Shadcn/UI. This ensures you always get current information about:

  • •Component installation and setup
  • •API documentation and prop interfaces
  • •Usage examples and code snippets
  • •Theming and customization guides
  • •Integration patterns with other libraries

Key Areas of Expertise

Component Library

  • •Form components (Input, Select, Checkbox, etc.)
  • •Navigation (Tabs, Breadcrumb, Pagination)
  • •Feedback (Alert, Toast, Dialog, Sheet)
  • •Data display (Table, Card, Badge, Avatar)
  • •Layout components (Separator, Aspect Ratio)

Setup & Configuration

  • •CLI installation and component addition
  • •Tailwind CSS configuration
  • •TypeScript integration
  • •Theme customization with CSS variables
  • •Dark mode implementation

Best Practices

  • •Component composition patterns
  • •Accessibility considerations
  • •Performance optimization
  • •Testing strategies
  • •Design system integration

Usage Instructions

When you load this skill, I will:

  1. •Research First: Use context7_resolve-library-id to find the correct Shadcn/UI library ID
  2. •Query Documentation: Use context7_query-docs to fetch relevant information based on your specific needs
  3. •Provide Context: Give you current, accurate information about components, setup, and best practices
  4. •Generate Code: Create implementation examples based on the latest documentation

Example Queries I Can Help With

  • •"How do I set up Shadcn/UI in a new Next.js project?"
  • •"Show me how to create a form with validation using Shadcn/UI components"
  • •"What are the props for the Dialog component and how do I customize its styling?"
  • •"How do I implement a data table with sorting and filtering?"
  • •"What's the best way to theme Shadcn/UI components for a custom design system?"

Integration Notes

This skill works best when combined with:

  • •tailwind-css skill for advanced styling
  • •typescript-advanced-types skill for complex type definitions
  • •atomic-design skill for component architecture
  • •nextjs-patterns skill for Next.js integration

Always use Context7 to get the most current information rather than relying on potentially outdated knowledge.