# Willyu1007 AI First Template Component Patterns

> Component Patterns

- Skill: `tomevault-io/willyu1007-ai-first-template-component-patterns` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/willyu1007-ai-first-template-component-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/willyu1007-ai-first-template-component-patterns/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/willyu1007-ai-first-template-component-patterns

---


# Component Patterns

This skill provides pragmatic patterns for React components.

---

## 1. Recommended component structure

Order (top to bottom):
1. Types (`Props`)
2. Hooks/state
3. Derived values (`useMemo` where useful)
4. Handlers (`useCallback` when passed to children)
5. Render

---

## 2. Props and boundaries

- Prefer small `Props` and explicit types.
- Avoid passing "bags of data"; pass exactly what the component needs.
- Keep components pure: do not fetch data directly inside presentational components unless that is the design.

---

## 3. Composition

- Prefer composition over deep prop drilling:
  - `children` slots
  - context providers (sparingly, with clear boundaries)
- Keep reusable components in a shared `components/` directory; keep domain-specific UI in `features/<feature>/`.

---

## 4. Common anti-patterns

- Inline anonymous functions in deep lists without need
- Multiple early returns that change layout unpredictably
- Doing expensive computation during render without memoization

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/willyu1007) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-14 -->