ui
SkillDev toolsLets your agent add extra UI components built on top of shadcn/ui to your project.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the ui skill
About this capability
Additional UI components built on top of shadcn/ui
What this skill tells your AI
The instructions your AI receives, as published by graphif/project-graph in .agents/skills/ui/SKILL.md and read by ahel’s review.
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();
Signals
- GitHub stars
- 4k
- Forks
- 281
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
ui-graphif- Source
- github.com/graphif/project-graph