components

Structure React components with server and client patterns using cn() for styling.

Updated Aug 23, 2026

Search Tags:#React #UI development #server components #component patterns #client components

Ready to run

npx skills add https://github.com/HUMBLEF0OL/miles-mechanical-web --skill components-humblef0ol

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: components
Source: https://github.com/HUMBLEF0OL/miles-mechanical-web/tree/main/.claude/skills/components
Command: npx skills add https://github.com/HUMBLEF0OL/miles-mechanical-web --skill components-humblef0ol

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating maintainable and efficient UI components in React by providing patterns for server-side vs. client-side components and styling with cn().

Core Features & Use Cases

Server vs. Client Components: Offers guidance on when to use server-side components (default) and when to switch to client-side components for more complex logic.
Styling with cn(): Provides a utility function for combining class names, ensuring consistent styling across components.
Use Case: When building a React application, use this Skill to define component structures and implement styling, improving code organization and performance.

Quick Start

Use the components skill to define a server component for a feature card.

Frequently Asked Questions about components

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

FAQPage Schema

How do I structure React components for better maintainability and performance?▼

To structure React components effectively, apply patterns that distinguish between server-side and client-side components, and utilize the cn() utility for styling to ensure consistent code organization. Defaulting to server components optimizes initial load performance.

When should I use server-side versus client-side components in React?▼

Use server-side components by default for static content and data fetching, and switch to client-side components only when you need complex interactive logic, state management, or browser APIs.

What is the best way to combine class names for consistent React UI styling?▼

The best way to combine class names in React UI development is using the cn() utility function, which ensures consistent styling across your component patterns and prevents class name conflicts.

Can I use this React component pattern approach for complex interactive UI logic?▼

Yes, while server-side components are recommended by default for performance, you can switch to client-side components to handle complex interactive UI logic and state management within your React application.

How do I define a server component for a feature card in React?▼

To define a server component for a feature card, use the component patterns skill to establish a server-side structure by default, ensuring optimized performance before adding any client-side interactivity.