跳到正文
cccskills
免费在 GitHub 公开

ui

Use this skill to build React frontend components that follow the project’s UI conventions. It guides layout choices, reuse of shared UI primitives, conditional Tailwind classes, prop ordering, and the organization of hooks, handlers, and derived values.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

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

baptisteArno/typebot.io星标 10,582(GitHub 10,582 + cccskills 0)

实测评分 未实测

查看安装方法

适用场景

  • Building a new React component
  • Choosing layout and shared UI primitives
  • Organizing hooks and event handlers

包含的文件（1）

  • SKILL.md1.2 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

  • 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

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护，适用 Google 的隐私权政策和服务条款。

同一仓库的技能

commit

免费

Choose one emoji prefix that reflects a change’s primary intent, then write concise commit messages or pull request titles. The skill also prompts a cleanup review before committing and explains how to preserve history after a PR is opened.

中文简介正在准备中。当前显示英语简介。

  • Writing a commit title with the required emoji prefix
  • Preparing a concise pull request title
  • Reviewing temporary files before committing
baptisteArno/typebot.io1.1万2026年10月26日 更新

update-models

免费

Use this skill to refresh the project’s available OpenAI and Anthropic model lists. It checks model IDs against models.dev, adds newer entries at the top while retaining older ones for compatibility, and updates image URL support patterns when needed.

中文简介正在准备中。当前显示英语简介。

  • Refreshing OpenAI model IDs
  • Updating Anthropic model lists
  • Checking image URL support patterns
baptisteArno/typebot.io1.1万2026年10月26日 更新

web-animation-design

免费

Use this skill to design and implement purposeful web animations. It helps choose easing and duration for common interactions, improve performance by animating suitable properties, and support people who prefer reduced motion, with practical guidance for CSS and JavaScript approaches.

中文简介正在准备中。当前显示英语简介。

  • Choosing easing for a dropdown or modal
  • Tuning interaction timing and motion
  • Improving animation performance
baptisteArno/typebot.io1.1万2026年10月26日 更新

查看 baptisteArno 的全部技能

报告此技能的问题