ui

SkillDev tools

Adds a ui skill that teaches your agent to write frontend components following the project's coding conventions.

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

No other account needed.

Add ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

Then ask your AI: use the ui skill

About this skill

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