# UI

> Use this skill when you need to write any frontend components. It explains project's UI best practices

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

---


- Keep it simple. Use the least amount of class names as possible
- We like to rely mostly on Flexbox layout. Instead of `w-full` try `flex-1` instead.
- UI primitives are defined in packages/ui. Use them whenever possible. Be very careful when you add custom class names to a primitive components, it should be last resort for a very local exception: we want the design system to be respected.
- You can write `useEffect` only if syncing with external storage or with DOM event. Otherwise, just derive values from others.
- Sort component props: values first, functions last
- Never add explicit type annotations on callback parameters when the type can be inferred from the component prop. e.g. `onValueCommit={(name) =>` not `onValueCommit={(name: string) =>`
- Use `cn()` when conditionally applying Tailwind classes that may conflict (e.g. border colors).
- In React components, order declarations as follows:
  1. Context hooks (useWorkspace, useTranslate, etc.)
  2. useState / useRef
  3. useQuery
  4. useMutation
  5. Handlers
  6. Derived variables