skills.rest
andrewle9510
andrewle9510COMMUNITY
Explore all skills by this author →
GitHub

fd-components

Creates reusable React components with Tailwind and shadcn/ui for web apps.

Updated Jan 17, 2026
Search Tags:#accessibility#Next.js#Tailwind CSS#component design#shadcn ui#UI library#buttons cards modals
One-click install
npx skills add https://github.com/andrewle9510/design-skill-orchestrator --skill fd-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fd-components
Source: https://github.com/andrewle9510/design-skill-orchestrator/tree/main/.opencode/skill/fd-components
Command: npx skills add https://github.com/andrewle9510/design-skill-orchestrator --skill fd-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides expert guidance on UI component design, variants, and shadcn/ui customization to create a cohesive, reusable visual language for applications.

Core Features & Use Cases

  • Button, Card, Input, Dialog, and Dropdown components designed as consistent building blocks.
  • Patterns for composition, such as Compound Components, Slot (asChild), and polymorphic components to enable flexible UIs.
  • Use Case: Build a shared component library in a Next.js project using tailwind and shadcn/ui to ensure brand-consistent UI across pages.

Quick Start

Use the Components Expert to define and implement a Button, Card, and Dialog pattern, and integrate shadcn/ui tokens.

Frequently Asked Questions about fd-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a reusable UI component library with shadcn/ui in Next.js?▼

Apply advanced patterns like compound components, slots (asChild), and polymorphic components to ensure UI components are flexible, accessible, and maintain brand consistency across pages.

How do compound components and slots work in shadcn/ui?▼

These patterns enable precise component design so your UI library elements like dropdowns and modals integrate seamlessly into your Next.js application architecture.

Do I need a design system to use shadcn/ui components in Next.js?▼

Standard tooling like npm or yarn, alongside a configured shadcn/ui setup, is required to manage dependencies and apply your visual language accurately.

What is the best way to customize shadcn/ui components for a cohesive visual language?▼

This approach ensures your buttons, inputs, and modals maintain a cohesive, reusable visual language across your application while remaining fully accessible.

Can I use polymorphic components with Tailwind CSS and shadcn/ui?▼

This pattern allows your UI library components to maintain type safety and design consistency while rendering as different HTML elements dynamically.

Why should I use shadcn/ui instead of other UI libraries for my Next.js project?▼

It integrates deeply with Tailwind CSS and Next.js patterns like compound components, giving you precise control over accessible UI design without locking you into rigid dependencies.

Related Skills

Explore More Design & Creative Skills→
zaid-khan-codezaid-khan-code
3

shadcn-setup

Configure shadcn/ui and Tailwind CSS v4 for Next.js and React projects.

Community
Advanced
yuehanjohnyuehanjohn

heroui-react

Provide reusable React UI components with Tailwind v4 and OKLCH theming.

Community
Intermediate
Mischio95Mischio95
1

tailwind-design-system

Define Tailwind CSS design tokens as CSS variables with shadcn/ui wrappers.

Community
Advanced
djscruggsdjscruggs

shadcn

Apply shadcn/ui patterns with Radix primitives and Tailwind CSS in React or Next.js projects.

Community
Intermediate