ui

星标10,092

分支3,130

更新时间2026年3月26日 15:29

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

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

baptisteArno

baptisteArno/typebot.io

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

相关职业SOC

基于 SOC 职业分类

网页与数字界面设计师计算机与数学类职业·SOC 15-1255

SKILL.md

readonly

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

同仓库更多 Skills

同仓库

web-animation-design

baptisteArno/typebot.io

Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use, animation best practices, or accessibility considerations for motion. Triggers on: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions, entrance/exit animations, page transitions, stagger, will-change, GPU acceleration, prefers-reduced-motion, modal/dropdown/tooltip/popover/drawer animations, gesture animations, drag interactions, button press feel, feels janky, make it smooth.

2026-03-2610.1k

update-models

baptisteArno/typebot.io

Use this skill when you need to update the AI models on the project.

2026-03-2510.1k

commit

baptisteArno/typebot.io

Reviews the current git changes and creates a commit with an emoji-prefixed message that matches the dominant type of work.

2026-03-1310.1k

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