# Elite Frontend UX Compound Components Prefer Over Prop Soup

> Sub-skill of elite-frontend-ux: Compound Components (prefer over prop soup) (+3).

- Skill: `vamseeachanta/elite-frontend-ux-compound-components-prefer-over-prop-soup` (Agent Skill)
- Install (CLI): `npx skillmds@latest add vamseeachanta/elite-frontend-ux-compound-components-prefer-over-prop-soup`
- Raw SKILL.md: https://api.skillmd.com/api/skills/vamseeachanta/elite-frontend-ux-compound-components-prefer-over-prop-soup/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: vamseeachanta (https://skillmd.com/u/vamseeachanta)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/vamseeachanta/elite-frontend-ux-compound-components-prefer-over-prop-soup

---


# Compound Components (prefer over prop soup) (+3)

## Compound Components (prefer over prop soup)

```tsx
<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Content 1</TabsContent>
  <TabsContent value="tab2">Content 2</TabsContent>
</Tabs>
```


## Reduced Motion

```tsx
import { useReducedMotion } from "framer-motion";

function AnimatedCard() {
  const reduce = useReducedMotion();
  return (
    <motion.div
      initial={{ opacity: 0, y: reduce ? 0 : 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: reduce ? 0 : 0.3 }}
    />
  );
}
```


## Loading States (skeleton > spinner)

```tsx
<div className="animate-pulse space-y-2">
  <div className="h-4 bg-muted rounded w-3/4" />
  <div className="h-4 bg-muted rounded w-1/2" />
</div>
```


## Animation Rules

- Button feedback: 100–150ms (must feel instantaneous)
- ONLY animate `transform` and `opacity` (GPU accelerated)
- NEVER animate `width`, `height`, `margin`, `padding` (triggers reflow)

---