ui-picks SKILL.md skillA
ui-picks from suge8/friedbun is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add suge8/friedbun/ui-picks@git:20261011.d2acec4Pins git:20261011.d2acec4 in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- suge8/friedbun
- Path
skills/frontend/ui-picks/SKILL.md- Versions recorded
- 3
- Latest version
- git:20261011.d2acec4, committed Oct 11, 2026
- First version recorded
- Oct 8, 2026
- Size
- 10,416 bytes
- Repository stars
- 12
- License
- MIT
UI 库选型表：做界面时按场景从表里取组件移植进项目，覆盖装饰特效、卡片编排、状态转场、微交互小件、产品控件、营销/仪表盘块、技术图解与主视觉、AI 聊天界面、界面音效.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# UI Picks 个人品味的 UI 库选型表。组件清单和 API 以各库的 llms.txt / registry / 文档为准，构建时现取；下文只记查不到的获取方式、坑和红线。 ## 使用规则 1. 按任务场景选库，不按用户提到的库名："要个粒子背景"即特效场景。 2. 先查 `package.json`：项目已用表内库直接用；已用竞品时提示本表推荐，保留现有依赖。 3. 装饰性动效不限场景，产品 UI 也可按需用。内容层独立于特效层：文字可选中、链接可点击、核心信息不依赖特效。 4. WebGL / shader 特效（Canvas UI、Paper Shaders）只在用户明确要求时启用，读 [references/shaders.md](references/shaders.md)。 ## 移植流程 复制分发的库（源码落进项目）都按这一步走，完成标准是每个 import 已对账、每个 token 已映射： 1. 取源码进项目，剥掉示例里的 mock 数据、定时状态流、站点专属 CSS 变量和共享 atoms。 2. 依赖对账：逐个看组件带来的依赖（motion、Radix、vaul、three 等），项目已有的复用，没有的先评估 CSS 或原生替代，确实需要再引入并说明。 3. 颜色、圆角、字体、间距映射到项目设计系统；库自带的 token 体系和项目 token 二选一，不并存。 4. 按 ui-craft 核对「标签与页眉」「其他模板痕迹」、性能和 reduced-motion。 ## 路由表 | 场景 | 库 | | --- | --- | | 流光边框、液态 morph、液态金属、思考态 loader、图片生成态 | Libraries.dev | | 卡片空间编排（cover-flow、扇形、arc） | Amicro | | 既有元素的 CSS 状态转场（resize、数字翻转、开合、抖动） | transitions.dev | | 图标 morph（menu→X） | morphicons | | 带动效的 Apple 味小件（Folder、OTP、Gooey Nav、原地确认） | Rare UI | | 扁平无动效的实用小件（表单、日历、票据/名片 mockup、社交卡、Dock） | Opensource UI | | 产品控件，shadcn / 复制源码风格 | Fluid Functionalism | | 产品控件整包，React 19 + Tailwind v4 | Appica UI | | 复杂交互控件（签名、快捷键录制、@提及、滑动操作、长按确认、主题切换转场） | Arc | | 营销页与仪表盘的动效块（hero、卡片块、定价块、图表） | Spectrum UI | …
Read the whole file at its exact version.
How to install
mdr add suge8/friedbun/ui-picks@sha256:acf8ed5871129a31The line at the top of this page pins the label git:20261011.d2acec4, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_leuqmwpkqjd7oikw)
1 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 3 versions of this file, between Oct 8, 2026 and Oct 11, 2026, about one every day.
| version | committed | commit | size | audit | |
|---|---|---|---|---|---|
| git:20261011.d2acec4 latest | 2026-10-11 | d2acec4 | 10,416 B | A | view · diff |
| git:20261008.7cf1a8f | 2026-10-08 | 7cf1a8f | 9,286 B | A | view · diff |
| git:20261008.3911d61 | 2026-10-08 | 3911d61 | 9,240 B | A | view |
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (10416 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
suge8/friedbun · 12 stars · license MIT · pushed 2026-10-21 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_leuqmwpkqjd7oikw GET https://markdownregistry.com/api/v1/resolve?ref=suge8/friedbun/ui-picks GET https://markdownregistry.com/api/v1/blob/acf8ed5871129a3120f2f7d3e1fe195590644090f423ae1ae80350345781b270
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.