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 저장소 열기 Creator 저장소 보기

다운로드

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