変更の目的に合う絵文字を1つ選び、コミットメッセージやPRタイトルを整えます。コミット前の一時ファイル確認や、PR後の履歴の扱いも案内します。
- 絵文字付きのコミット文を作りたいとき
- PRタイトルの表記を整えたいとき
- コミット前に一時ファイルを確認したいとき
baptisteArno/typebot.io1.1万2026年10月26日 更新
無料GitHub で公開日本語紹介
ui
Reactのフロントエンド部品を、既存のUIプリミティブやレイアウト方針に沿って実装し、状態やイベント処理を整理するスキルです。
原文原文の説明を見る
Use this skill when you need to write any frontend components. It explains project's UI best practices
baptisteArno/typebot.ioスター 10,580(GitHub 10,580 + cccskills 0)
実行スコア 未検証
インストール方法を見るこんなときに便利
- React部品を新しく実装したいとき
- 共通UI部品を活用したいとき
- コンポーネントの構成を整えたいとき
日本語での紹介
できること
Reactのフロントエンド部品を実装するときに、プロジェクトのUI方針に沿った書き方を確認できます。レイアウトではクラス名を必要最小限にし、主にFlexboxを使います。共通部品はpackages/uiのプリミティブを優先し、独自のクラス名は局所的な例外に限ります。useEffectは外部ストレージやDOMイベントとの同期に使い、それ以外は既存の値から導出します。props、コールバックの型注釈、cn()によるTailwindクラスの扱いに加え、Reactコンポーネント内でフック、ハンドラー、派生値を並べる順序も示します。
こんなときに便利
新しい画面部品を作るときや、既存のデザインシステムに合わせたいときに役立ちます。状態管理やイベント処理の置き場所をそろえたい場合、不要なクラスやuseEffectを増やさずに実装したい場合にも参照できます。
使い方の例
- 「この画面にReactの入力部品を追加して。既存のUI部品とレイアウト方針に合わせてください」
- 「このコンポーネントのフックとハンドラーの順序をプロジェクトの規約に沿って整理して」
注意点
共通UIプリミティブはpackages/uiに定義されています。
この紹介文は、公開されている SKILL.md をもとに AI（OpenAI Codex）が作成しました。正確な仕様は下の原文を確認してください。
含まれるファイル（1）
- SKILL.md1.2 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
- Keep it simple. Use the least amount of class names as possible
- We like to rely mostly on Flexbox layout. Instead of
w-fulltryflex-1instead. - 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
useEffectonly 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) =>notonValueCommit={(name: string) => - Use
cn()when conditionally applying Tailwind classes that may conflict (e.g. border colors). - In React components, order declarations as follows:
- Context hooks (useWorkspace, useTranslate, etc.)
- useState / useRef
- useQuery
- useMutation
- Handlers
- Derived variables
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
コメント
ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。
まだコメントはありません。最初のコメントを書いてみませんか。
同じリポジトリのスキル
OpenAIとAnthropicのモデル一覧を参照元と照合し、新しいモデルを追加しながら既存モデルや画像対応の記録を更新するスキルです。
- 利用可能なモデル一覧を更新したいとき
- 新しいモデルIDを追加したいとき
- 画像入力対応のモデルを見直したいとき
baptisteArno/typebot.io1.1万2026年10月26日 更新
画面要素に合ったイージングや時間を選び、自然な動きと表示性能、動きを抑えたい利用者への配慮を備えたWebアニメーションを設計するスキルです。
- モーダルの動き方を設計したいとき
- アニメーションの時間や速度を調整したいとき
- 画面の動きを軽くしたいとき
baptisteArno/typebot.io1.1万2026年10月26日 更新