{"enrichment":{"faq":[{"a":"Shadcn Skills covers the complete shadcn/ui workflow for Next.js 16 projects. Start by installing shadcn components into your project, then explore the pre-built component library to find UI elements matching your needs. The skill teaches you to configure components, build forms with validation, implement dark mode theming, and use Sonner for notifications. Each component is copy-paste ready and fully customizable to match your design system.","q":"How do I use shadcn component library and skills?"},{"a":"Shadcn Skills provides access to a comprehensive component library designed for React development. You'll find form components with built-in validation, notification systems via Sonner integration, dark mode-ready UI elements, and pre-built blocks that accelerate development. All components follow accessibility best practices and come with theming support, allowing you to customize appearance while maintaining consistency across your Next.js 16 application.","q":"What shadcn UI components are available for React development?"},{"a":"Shadcn Skills walks you through the complete setup process for integrating shadcn/ui into your Next.js 16 project. The installation guide covers initial project configuration, adding shadcn components to your codebase, and configuring your development environment. Once installed, you can begin using individual components immediately and customize them according to your project's design requirements and theming preferences.","q":"What does the shadcn installation guide cover?"},{"a":"Shadcn Skills teaches you the full customization workflow for the shadcn design system. Components are built with Tailwind CSS, making them easy to modify through utility classes. You can adjust colors, spacing, and behavior to match your brand. The skill covers dark mode implementation, theming strategies, and how to extend components with custom functionality while maintaining the accessibility and validation features that come built-in.","q":"How can I customize shadcn components for my project?"},{"a":"Yes, Shadcn Skills covers both dark mode implementation and comprehensive theming features. Learn how to enable dark mode across your component library, customize color schemes, and manage theme switching in your Next.js 16 application. The skill demonstrates how to leverage shadcn's built-in theming capabilities to create cohesive, accessible interfaces that adapt to user preferences while maintaining visual consistency.","q":"Does Shadcn Skills include dark mode and theming support?"},{"a":"Absolutely. Shadcn Skills emphasizes the copy-paste component approach, which is central to shadcn's philosophy. Rather than installing a package, you copy component code directly into your project, giving you full control and ownership. This method lets you customize components without worrying about package updates breaking your implementation, and Shadcn Skills teaches you how to effectively integrate and maintain these components in your Next.js 16 workflow.","q":"Can I use shadcn copy-paste components in my project?"}],"shadow_tags":["component-library","ui-framework","react-toolkit","design-system","developer-tools","web-components","customizable-ui","accessibility-first"],"summary_rewrite":"This skill covers the complete shadcn/ui workflow for Next.js 16 projects, from initial setup through component installation and configuration. Learn to build forms with validation, implement dark mode theming, use Sonner for notifications, and leverage pre-built blocks for faster development."},"gist":{"api_url":"https://skillfed.io/api/skills/gocallum/nextjs16-agent-skills/shadcn-skills.json","as_of":"2026-01-21","description":"Shadcn Skills teaches you to install and configure shadcn/ui components in Next.js 16 projects using pnpm.","install":{"manual":["git clone https://github.com/gocallum/nextjs16-agent-skills","cp -r nextjs16-agent-skills ~/.claude/skills/shadcn-skills"],"primary":"npx skillfed install gocallum/nextjs16-agent-skills/shadcn-skills","version":"8b75339f"},"kind":"skill","mirror_url":"https://skillfed.io/gocallum/nextjs16-agent-skills/shadcn-skills.md","similar":[{"id":"elophanto/EloPhanto/shadcn","name":"Shadcn","publisher":"elophanto/EloPhanto","url":"https://skillfed.io/elophanto/EloPhanto/shadcn"},{"id":"shep-ai/shep/shadcn-ui","name":"shadcn-ui","publisher":"shep-ai/shep","url":"https://skillfed.io/shep-ai/shep/shadcn-ui"},{"id":"bobmatnyc/claude-mpm-skills/shadcn","name":"shadcn","publisher":"bobmatnyc/claude-mpm-skills","url":"https://skillfed.io/bobmatnyc/claude-mpm-skills/shadcn"},{"id":"giuseppe-trisciuoglio/developer-kit/shadcn-ui","name":"shadcn-ui","publisher":"giuseppe-trisciuoglio/developer-kit","url":"https://skillfed.io/giuseppe-trisciuoglio/developer-kit/shadcn-ui"},{"id":"nextlevelbuilder/ui-ux-pro-max-skill/ui-styling","name":"ui-styling","publisher":"nextlevelbuilder/ui-ux-pro-max-skill","url":"https://skillfed.io/nextlevelbuilder/ui-ux-pro-max-skill/ui-styling"}],"title":"Shadcn Skills by gocallum: Learn how to use shadcn component library and skills \u2014 SkillFed","use":{"when":["Shadcn Skills provides access to a comprehensive component library designed for React development.","Shadcn Skills walks you through the complete setup process for integrating shadcn/ui into your Next.js 16 project."]},"what":{"lead":"Shadcn Skills teaches you to install and configure shadcn/ui components in Next.js 16 projects using pnpm.","rest":"This skill covers the complete shadcn/ui workflow for Next.js 16 projects, from initial setup through component installation and configuration. Learn to build forms with validation, implement dark mode theming, use Sonner for notifications, and leverage pre-built blocks for faster development."}},"id":"gocallum/nextjs16-agent-skills/shadcn-skills","install":{"mode":"external","repo":"https://github.com/gocallum/nextjs16-agent-skills"},"links":{"html":"https://skillfed.io/gocallum/nextjs16-agent-skills/shadcn-skills","md":"https://skillfed.io/gocallum/nextjs16-agent-skills/shadcn-skills.md","repo":"https://github.com/gocallum/nextjs16-agent-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":7,"language":"JavaScript","last_updated":"2026-01-21","license":null,"name":"Shadcn Skills","publisher":"gocallum","stars":22},"relations":{"similar":[{"id":"elophanto/EloPhanto/shadcn"},{"id":"shep-ai/shep/shadcn-ui"},{"id":"bobmatnyc/claude-mpm-skills/shadcn"},{"id":"giuseppe-trisciuoglio/developer-kit/shadcn-ui"},{"id":"dirnbauer/webconsulting-skills/shadcn-ui"},{"id":"binjuhor/shadcn-lar/ui-styling"},{"id":"nextlevelbuilder/ui-ux-pro-max-skill/ui-styling"},{"id":"mrgoonie/claudekit-skills/ui-styling"},{"id":"inertia-rails/skills/shadcn-inertia"},{"id":"MajesteitBart/TalentMatcher/shadcn-ui-expert"}]},"slug":{"owner":"gocallum","repo":"nextjs16-agent-skills","skill":"shadcn-skills"},"version":"8b75339f"}