Skip to content
cccskills
FreePublished on 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.

OriginalShow the original description

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

baptisteArno/typebot.io10,580 stars(GitHub 10,580 + cccskills 0)

Run score Not tested

See how to install

Good for

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

Files included (1)

  • SKILL.md1.2 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

  • 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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

commit

FreeSummary

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.io10.6KUpdated Oct 26, 2026

update-models

FreeSummary

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.io10.6KUpdated Oct 26, 2026

web-animation-design

FreeSummary

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.io10.6KUpdated Oct 26, 2026

See all skills by baptisteArno

Report a problem with this skill