ui

SkillDev tools

Guides your agent to write frontend components following this project's UI conventions.

Available today. Use it from your connected AI after setup.

No other account needed.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the ui skill

About this capability

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

What this skill tells your AI

The instructions your AI receives, as published by baptistearno/typebot.io in .agents/skills/ui/SKILL.md and read by ahel’s review.

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

Advanced