Agent-Skills.md

Agent Skills: ui

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

UncategorizedID: baptistearno/typebot.io/ui

Repository

baptistearno/typebot.io
baptisteArnoLicense: NOASSERTION
9,8423,043

Install this agent skill to your local

pnpm dlx add-skill https://github.com/baptisteArno/typebot.io/tree/HEAD/.agents/skills/ui

Skill Files

Browse the full folder contents for ui.

Download Skill

Loading file tree…

.agents/skills/ui/SKILL.md

Skill Metadata

Name
ui
Description
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