Project Graphに新しいショートカットを登録し、キー割り当てや設定画面の分類、各言語の説明文まで追加する手順を案内するスキルです。
- 新しいショートカットを追加したいとき
- 既定のキー割り当てを変更したいとき
- 設定画面にショートカットを分類表示したいとき
shadcn/uiを土台にした追加UI部品を使い、確認・入力・コピー用のダイアログや、成功・失敗などの通知を実装するための案内です。
建立于 shadcn/ui 之上的附加 UI 组件
実行スコア 未検証
インストール方法を見るshadcn/uiを基盤にした追加UI部品の使い方を説明します。Dialog.confirmで確認を求め、Dialog.inputで入力を受け取り、Dialog.copyでコピー用の対話画面を表示できます。任意のボタンを並べるDialog.buttonsも扱います。各ダイアログはPromiseを返し、確定や選択などの結果を受け取れる仕組みです。また、sonnerのtoastを使った成功・エラー・警告通知や、非同期処理の進行中・成功・失敗を伝えるtoast.promiseの例も示します。
アプリ内でユーザーに確認を求めたいとき、値を入力してもらいたいとき、操作結果や非同期処理の状態を通知したいときに向いています。既存のダイアログや通知の使い分けを知りたい開発者にも役立ちます。
ダイアログ部品はアプリ内のdialog.tsx、通知はsonnerのtoastを使います。
この紹介文は、公開されている SKILL.md をもとに AI(OpenAI Codex)が作成しました。正確な仕様は下の原文を確認してください。
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Dialog (app/src/components/ui/dialog.tsx)Dialog.confirm: 显示一个确认对话框,返回一个 Promise,用户点击确认时 resolve,点击取消时 reject。Dialog.input: 显示一个输入对话框,返回一个 Promise,用户输入内容并点击确认时 resolve,点击取消时 reject。Dialog.copy: 显示一个复制对话框,返回一个 Promise,用户关闭对话框时 resolve。Dialog.buttons: 显示一个带有自定义按钮的对话框,返回一个 Promise,用户点击任意按钮时 resolve,参数为被点击按钮的 id。toast() (import { toast } from "sonner")toast: 显示一个通用的、info 类型的 toast 消息,参数为消息内容,尽量不要使用此函数,推荐使用下面的 toast.success() 等方法。toast.success: 显示一个成功类型的 toast 消息,参数为消息内容。toast.error: 显示一个错误类型的 toast 消息,参数为消息内容。toast.warning: 显示一个警告类型的 toast 消息,参数为消息内容。toast.promise: 见下面的示例代码。await toast
.promise(
async () => {
// 异步操作
},
{
loading: "promise进行中的提示",
success: "resolve后的提示",
error: "reject后的提示",
},
)
// unwrap方法会直接把传入的promise返回出来
.unwrap();
まだレビューはありません。使ってみた感想をお寄せください。
ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。
まだコメントはありません。最初のコメントを書いてみませんか。
Project Graphに新しいショートカットを登録し、キー割り当てや設定画面の分類、各言語の説明文まで追加する手順を案内するスキルです。
Project Graphに設定項目を追加し、値の型や初期値、アイコン、翻訳、設定画面での分類まで反映する手順を案内するスキルです。
Project Graphの翻訳ファイルの場所と対応言語を確認し、新しい翻訳の追加や既存訳の更新、翻訳システムの把握を支援します。
コーディング作業で、依頼を満たすために必要な最小限の変更を選び、影響範囲や確認事項も含めて簡潔に進め方を整えるスキルです。
shadcn/uiのコンポーネントを探して追加・更新し、プロジェクト設定に沿ったUIの構成や修正を支援するスキルです。
表したい概念や画面の配置に合うLucideアイコンを候補から探し、実在確認を経て意味や見た目を比べ、用途ごとにおすすめを提示します。