Manage shadcn/ui components and projects with best practices.
npx skills add https://github.com/qiubohong/qiubohong.github.io --skill shadcn-qiubohong
Please help me install this Agent Skill. Skill: shadcn Source: https://github.com/qiubohong/qiubohong.github.io/tree/main/.agents/skills/shadcn Command: npx skills add https://github.com/qiubohong/qiubohong.github.io --skill shadcn-qiubohong
This Skill streamlines the process of building user interfaces using the shadcn/ui component library, ensuring consistency, adherence to best practices, and efficient development.
components.json, tailwind.config.js) for accurate command execution.Dialog component to your Next.js application, this Skill can guide you through the npx shadcn@latest add dialog command, ensure it's correctly composed with DialogTitle and DialogContent, and apply the project's specific styling.Use the shadcn skill to add the 'button' and 'card' components to your project.
High-intent search queries and answers about installing and using this skill.
To add and compose shadcn/ui components, you execute CLI commands like `npx shadcn@latest add dialog` and ensure proper composition with sub-components like `DialogTitle`. This enforces best practices for UI development within your project.
Managing shadcn/ui styling and debugging involves reading project context from `components.json` and `tailwind.config.js`. This ensures accurate command execution and applies correct styling based on shadcn/ui principles.
Yes, shadcn/ui works with Next.js and TypeScript projects by reading your project configuration to guide component installation. It ensures components are correctly composed and styled according to your specific environment.
A `components.json` file is required because it provides essential project context awareness for shadcn/ui. It allows the system to understand your configuration and execute accurate component management commands.
Yes, you can search for specific UI elements within the shadcn/ui component registry. The skill manages component searching, allowing you to find, fix, and compose UI elements effectively.
You need to configure `tailwind.config.js` when applying project-specific styling to shadcn/ui components. This ensures the UI elements adhere to your design system and follow best practices for frontend development.
jubalmInitialize shadcn/ui in React projects with Tailwind CSS v4 configuration.
ingbyrConvert high-level frontend requirements into production-grade React, Vue, or HTML/CSS interfaces.
michsindlingerProvide Lit Web Component patterns for frontend development in the Agent OS Web UI.
eserlanStandardize cross-framework UI component design across React, Vue, and Svelte.