# Components

> Use when designing, implementing, or reviewing React/TypeScript components with naming conventions, props typing, hooks usage, and UnoCSS styling standards.

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

---


# Components

## Overview
Design and review React/TypeScript components with consistent naming, typing, hooks, and UnoCSS styling.

## Quick Workflow
1. Define component type and responsibility (UI, business, container, page, layout).
2. Define props and dependencies explicitly.
3. Implement with typed props and function components.
4. Apply UnoCSS classes and CSS variables.
5. Review against the checklist.

## Common Mistakes
- Mixing UI and data-fetch logic in a single component.
- Missing props types or using `any`.
- Inline styles instead of UnoCSS utilities.
- Unstable callbacks and missing dependency arrays.

## Resources
- `references/standards.md`
- `references/checklist.md`
- `references/templates.md`