本文へ移動
cccskills
無料GitHub で公開日本語紹介

ui

shadcn/uiを土台にした追加UI部品を使い、確認・入力・コピー用のダイアログや、成功・失敗などの通知を実装するための案内です。

原文原文の説明を見る

建立于 shadcn/ui 之上的附加 UI 组件

graphif/project-graphスター 4,510(GitHub 4,510 + cccskills 0)

実行スコア 未検証

インストール方法を見る

こんなときに便利

  • 操作前に確認ダイアログを出したいとき
  • ダイアログでユーザー入力を受け取りたいとき
  • 成功やエラーをトースト通知したいとき
  • 非同期処理の状態を通知したいとき

日本語での紹介

できること

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)が作成しました。正確な仕様は下の原文を確認してください。

含まれるファイル(1)

  • SKILL.md1.5 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

ui

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();

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

create-keybind

無料概要あり

Project Graphに新しいショートカットを登録し、キー割り当てや設定画面の分類、各言語の説明文まで追加する手順を案内するスキルです。

  • 新しいショートカットを追加したいとき
  • 既定のキー割り当てを変更したいとき
  • 設定画面にショートカットを分類表示したいとき
graphif/project-graph4,5102026年10月26日 更新

create-setting-item

無料概要あり

Project Graphに設定項目を追加し、値の型や初期値、アイコン、翻訳、設定画面での分類まで反映する手順を案内するスキルです。

  • 設定項目や選択肢を追加したいとき
  • 初期値と入力形式を定義したいとき
  • 設定画面の分類に項目を配置したいとき
graphif/project-graph4,5102026年10月26日 更新

manage-translations

無料概要あり

Project Graphの翻訳ファイルの場所と対応言語を確認し、新しい翻訳の追加や既存訳の更新、翻訳システムの把握を支援します。

  • 翻訳ファイルの場所を確認したいとき
  • 対応言語を調べたいとき
  • 新しい言語の翻訳を追加したいとき
graphif/project-graph4,5102026年10月26日 更新

ponytail

無料概要あり

コーディング作業で、依頼を満たすために必要な最小限の変更を選び、影響範囲や確認事項も含めて簡潔に進め方を整えるスキルです。

  • 最小限の変更で機能を追加したいとき
  • バグの原因と影響範囲を確認したいとき
  • リファクタリングの範囲を絞りたいとき
graphif/project-graph4,5102026年10月26日 更新

shadcn

無料概要あり

shadcn/uiのコンポーネントを探して追加・更新し、プロジェクト設定に沿ったUIの構成や修正を支援するスキルです。

  • レジストリからUI部品を探したいとき
  • コンポーネントを追加・更新したいとき
  • 既存UIの不具合を調べたいとき
graphif/project-graph4,5102026年10月26日 更新

suggest-lucide-icons

無料概要あり

表したい概念や画面の配置に合うLucideアイコンを候補から探し、実在確認を経て意味や見た目を比べ、用途ごとにおすすめを提示します。

  • UIの概念に合うアイコンを選びたいとき
  • 画面配置に合うアイコンを探したいとき
  • 資料やドキュメント用の記号を選びたいとき
graphif/project-graph4,5102026年10月26日 更新

graphif のスキルをすべて見る

このスキルの問題を報告する