# UI Cookbook

> Guide for frontend component design, library API usage, and architectural decisions. Use when building or refactoring UI components, choosing state management solutions, styling approaches, or optimizing frontend performance and accessibility.

- Skill: `lurui1997/ui-cookbook` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add lurui1997/ui-cookbook`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lurui1997/ui-cookbook/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: lurui1997 (https://skillmd.com/u/lurui1997)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/lurui1997/ui-cookbook

---


# Frontend Design

Provide concise, actionable guidance for modern frontend development.

## Component Design

- Prefer composition over inheritance.
- Keep components focused on a single responsibility.
- Lift state only when necessary; co-locate related logic.

## State Management

- **Local state**: use built-in primitives (useState, ref, signal).
- **Cross-component**: prefer context or lightweight stores (Zustand, Pinia) before reaching for Redux.
- **Server state**: use a data-fetching library (TanStack Query, SWR, RTK Query) to handle caching, deduplication, and background updates.

## Styling

- Use utility-first CSS (Tailwind) or CSS-in-JS based on team consensus.
- Maintain design tokens for colors, spacing, and typography.
- Avoid deeply nested selectors; keep specificity low.

## Performance

- Lazy-load routes and heavy components.
- Memoize expensive computations and stable callbacks where profiling shows benefit.
- Optimize images (modern formats, responsive srcset).

## Accessibility

- Use semantic HTML elements.
- Ensure keyboard navigability and visible focus states.
- Add meaningful alt text and ARIA labels where native semantics are insufficient.