ui
Use this skill when you need to write any frontend components. It explains project's UI best practices
Datos de origen
- Repositorio
- baptisteArno/typebot.io
- Última actividad en el origen
- 26 de marzo de 2026 a las 15:29
- Idioma detectado de SKILL.md
- inglés
- Estrellas
- 10.587
- Forks
- 3245
Opciones de instalación
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Revisa los archivos de origen
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Mostrando SKILL.md
SKILL.md
Instrucciones de origen · Vista previa de solo lectura- 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
Ver en GitHub