此内容尚未提供您的语言版本,正在以英文显示。

UI Styling Skill

技能已验证活跃

Style UIs with shadcn/ui components (Radix UI + Tailwind CSS). Use for accessible components, themes, dark mode, responsive layouts, design systems, color customization.

目的

Style UIs efficiently and accessibly using shadcn/ui components and Tailwind CSS.

功能

Style UIs with shadcn/ui components
Utilize Tailwind CSS for utility-first styling
Implement accessible components
Support dark mode and themes
Create responsive layouts
Build design systems and customize colors

使用场景

Building UI with React-based frameworks
Implementing accessible components
Styling with utility-first CSS
Creating responsive, mobile-first layouts
Implementing dark mode and theme customization
Building design systems

非目标

Backend development
General programming assistance
Cloud infrastructure management

工作流

Initialize project with shadcn/ui and Tailwind CSS
Add desired components using CLI
Integrate components into React application
Apply Tailwind CSS utility classes for styling
Customize themes and implement dark mode
Ensure accessibility and responsive design

实践

Component Composition
Utility-First Styling
Mobile-First Responsive Design
Accessibility-First
Design Tokens Usage
Dark Mode Consistency

先决条件

Node.js 18+
npm or pnpm
React-based framework (Next.js, Vite, Remix, Astro)

安装

npx skills add binjuhor/shadcn-lar

通过 npx 运行 Vercel skills CLI(skills.sh)— 需要本地安装 Node.js,以及至少一个兼容 skills 的智能体(Claude Code、Cursor、Codex 等)。前提是仓库遵循 agentskills.io 格式。

质量评分

已验证

95 /100

1 day ago 分析

信任信号

最近提交2 days ago

GitHub 所有者 binjuhor

星标80

许可证MIT

网站shadcn-admin.binjuhor.com

状态

查看源代码

类似扩展

UI UX Pro Max Skill

使用 shadcn/ui 组件（基于 Radix UI + Tailwind 构建）、Tailwind CSS 的原子化样式以及基于画布的视觉设计，创建美观、无障碍的用户界面。适用于构建用户界面、实施设计系统、创建响应式布局、添加无障碍组件（对话框、下拉菜单、表单、表格）、自定义主题和颜色、实现暗黑模式、生成视觉设计和海报，或跨应用程序建立一致的样式模式。

技能

nextlevelbuilder