baptistearno - Keep it simple. Use the least amount of class names as possible
- We like to rely mostly on Flexbox layout. Instead of
w-fulltryflex-1instead. - 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
useEffectonly 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) =>notonValueCommit={(name: string) => - Use
cn()when conditionally applying Tailwind classes that may conflict (e.g. border colors). - In React components, order declarations as follows:
- Context hooks (useWorkspace, useTranslate, etc.)
- useState / useRef
- useQuery
- useMutation
- Handlers
- Derived variables
UI
Use this skill when you need to write any frontend components. It explains project's UI best practices
UI by baptistearno · 51ed140
npx skillmds@latest add baptistearno/ui File contents
---name: uidescription: Use this skill when you need to write any frontend components. It explains project's UI best practices---- 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
baptistearno/typebot.io/tree/main/.agents/skills/ui commit 51ed14095c
Frequently asked questions
Run npx skillmds@latest add baptistearno/ui in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Use this skill when you need to write any frontend components. It explains project's UI best practices It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
baptistearno (@baptistearno) published this skill. Their other Agent Skills are listed on their SkillMD profile.