跳到正文
cccskills
免费在 GitHub 公开

ui

Use this skill to work with additional UI components built on shadcn/ui. It describes promise-based dialogs for confirmation, input, copying, and custom buttons, plus Sonner toast messages for success, errors, warnings, and asynchronous operations.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

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

graphif/project-graph星标 4,510(GitHub 4,510 + cccskills 0)

实测评分 未实测

查看安装方法

适用场景

  • Show a confirmation dialog
  • Collect input through a dialog
  • Display success or error notifications
  • Report the progress of an async operation

包含的文件(1)

  • SKILL.md1.5 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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 的隐私权政策和服务条款。

同一仓库的技能

Use this skill to add or change keyboard shortcuts in Project Graph. It explains how to register a binding, place it in a settings group, add translations, and distinguish project-level, UI-level, and global shortcuts that can work without app focus.

中文简介正在准备中。当前显示英语简介。

  • Add a new keyboard shortcut
  • Change a shortcut's default key binding
  • Show a shortcut in the correct settings group
graphif/project-graph45102026年10月26日 更新

Use this skill to add settings to Project Graph, from defining typed values and defaults to adding icons, translations, and settings groups. It explains how fields are rendered from their schema and how code can read, update, or watch setting values.

中文简介正在准备中。当前显示英语简介。

  • Add a new setting or configuration option
  • Choose a field type and default value
  • Organize a setting in the settings screen
graphif/project-graph45102026年10月26日 更新

Find the locale files and review which languages a Project Graph project supports. Use this guidance when adding translations, updating existing language files, or orienting yourself to the project's translation structure.

中文简介正在准备中。当前显示英语简介。

  • Finding translation files
  • Checking the project's supported languages
  • Adding a new translation
graphif/project-graph45102026年10月26日 更新

ponytail

免费

Use this skill to keep coding work focused on the smallest complete solution. It guides implementation, fixes, refactoring, reviews, and dependency choices, while prompting concise replies that state what was skipped and any remaining risks.

中文简介正在准备中。当前显示英语简介。

  • Implement a feature with minimal code
  • Fix a bug without unnecessary changes
  • Review a change for scope and risks
graphif/project-graph45102026年10月26日 更新

shadcn

免费

Use shadcn/ui to find, add, update, style, and compose interface components. The skill checks project configuration and component documentation so changes follow the project's aliases, framework, styling setup, and installed components.

中文简介正在准备中。当前显示英语简介。

  • Finding a component in a registry
  • Adding or updating shadcn/ui components
  • Debugging an existing interface component
graphif/project-graph45102026年10月26日 更新

Finds Lucide icons that fit a concept or a specific UI placement. It checks candidate names against the icon files, explains why confirmed icons fit, and recommends the strongest option for each design context.

中文简介正在准备中。当前显示英语简介。

  • Choose an icon to represent a concept
  • Find icons for a particular UI placement from a screenshot
  • Compare verified Lucide icon candidates for documentation
graphif/project-graph45102026年10月26日 更新

查看 graphif 的全部技能

报告此技能的问题