ui

SkillDev tools

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

Use ui in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add ui and connect your AI. About a minute.

Then ask your AI: use the ui skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.

No other account needed.

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

About this skill

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

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