skills.rest
langfuse
langfuseOFFICIAL
Explore all skills by this author →
Website𝕏@langfuseGitHub

react-component-guidelines

Enforces design rules for writing encapsulated and composable React components.

34.0k|3.7k|Updated May 18, 2023
Search Tags:#components#Frontend#Guidelines#props#typeScript#Composition#reAct
One-click install
npx skills add https://github.com/langfuse/langfuse --skill react-component-guidelines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-component-guidelines
Source: https://github.com/langfuse/langfuse/tree/main/.agents/skills/react-component-guidelines
Command: npx skills add https://github.com/langfuse/langfuse --skill react-component-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React components often become hard to reuse because of ambiguous props, leaked implementation details, and mixed presentation with behavior. This Skill provides concrete guidelines so new components stay isolatable, composable, and type-safe.

Core Features & Use Cases

  • Minimal Prop Interfaces: Rules against unused, optional, or conflicting props, favoring Pick<> over Omit<> and discriminated unions for explicit states.
  • Composition & Encapsulation: Guidance on when to extract components versus hooks or pure functions, avoiding polymorphic components and className/style leakage.
  • Overlay Patterns: Conventions for composing DropdownMenuController, PopoverController, and DialogController with Trigger asChild patterns.
  • Use Case: When creating a new shared dialog or button component in the Langfuse codebase, apply these rules to keep its interface explicit and its styling deterministic via cva variants.

Quick Start

Use the react-component-guidelines skill to review the new component I am about to create and ensure its props and composition follow the project conventions.

Frequently Asked Questions about react-component-guidelines

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

FAQPage Schema
How do I design React component props for reusability?▼

Keep the interface minimal: no unused props, avoid optional props and default values unless they bring major ergonomic benefit, and prevent conflicting props like having both onClick and onSelect. Prefer Pick<> over Omit<> so the accepted props stay explicit.

When should I extract a React component versus a hook or function?▼

Extract a component only when it owns meaningful presentation or complex logic shared across call sites. If the logic is JSX-independent, use a pure function; use a hook only when React lifecycle or state is required.

Should React components accept className or style props?▼

No, unless the component is headless and contains no styling or layout logic itself. Accepting className or style props breaks encapsulation by leaking presentation control into callers.

How do I compose dialogs and popovers with dropdown menus in React?▼

Use controller components like DropdownMenuController, PopoverController, or DialogController, keeping trigger presentation in the caller. Keep controllers outside transient overlays, since a dialog owned by DropdownMenuContent unmounts when the dropdown closes.

Why should a React component not return null?▼

Returning null usually means a conditional rendering decision belongs in the parent component. Handle that condition in the parent, often via a hook or higher-order component, so the child keeps a single well-defined output.

Related Skills

Explore More Software Engineering Skills→
techdiary-devtechdiary-dev
13

new-component

Scaffold typed React components with props interfaces, Tailwind styling, and shadcn/ui primitives.

Official
Intermediate
scooter-lacroixscooter-lacroix
8

completion-check

Trace execution paths and validate hook registrations, database connections, and end-to-end functionality.

Community
Intermediate
youssefKadaouiAbbassiyoussefKadaouiAbbassi

pre-review-checklist

Run tests, type checks, and lint checks on a codebase before submission.

Community
Intermediate
retrip-airetrip-ai
2

base-ui-design

Standardize React UI components with Base UI design guidelines.

Official
Basic