mcpField
B
baseline-ui

baseline-ui

github.com/podo设计与 UI29176 次安装4 天前更新
代码仓库

关于 baseline-ui

baseline-ui 是 ibelick/ui-skills 的 UI 技能，为界面工作应用一组约束，并检查文件中的违规项。它面向基于 Tailwind 的 Web UI，涵盖交互、动效、排版、布局和性能。

主要功能

  1. 01应用 UI 设计约束
  2. 02标出违规项及代码片段
  3. 03说明问题并提供修复建议
  4. 04涵盖动效、排版和布局
  5. 05涉及性能与交互模式

适用场景

  1. 01在 UI 工作中应用统一基线
  2. 02检查文件中的设计规则违规
  3. 03为 Tailwind UI 问题查找具体修复方法

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill baseline-ui

安装后在 Claude Code 中输入/baseline-ui确认已加载。

附带文件stub.yaml

详细介绍

baseline-ui

目录占位条目 — 完整技能：ibelick/ui-skills

决策树

  1. 是否已安装完整技能？

    • 全局：f=~/.agents/skills/baseline-ui/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • 项目：f=.agents/skills/baseline-ui/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → 技能已安装为 baseline-ui，调用该技能并继续
    • pointer → 转到第 2 步

  2. 检测作用范围，然后安装：

    [ -e ~/.agents/skills/baseline-ui ] && echo "global" || echo "project"

    全局：

    npx skills add ibelick/ui-skills --skill baseline-ui -g -y

    项目：

    npx skills add ibelick/ui-skills --skill baseline-ui -y

    Claude Code： 发送以 ! 开头的命令作为聊天消息，即可在不离开对话的情况下运行命令。

注意

  • 许可证： MIT

安装后调用

  • 技能名称：baseline-ui
  • 斜杠命令：/baseline-ui（在本次对话中将基线应用于 UI 工作），/baseline-ui <file>（审查文件，并列出违规项及修复方法）
  • 触发短语："baseline UI"、"animation validation"、"typography scale"、"Tailwind anti-patterns"

功能

应用一套有主见的 UI 基线，以防止 AI 生成的界面粗制滥造。这些规则以 MUST / SHOULD / NEVER 约束的形式编写，涵盖 Tailwind CSS 技术栈、无障碍组件原语、交互模式（危险操作对话框、加载骨架屏、安全区域）、动画限制（仅使用合成器属性、简短反馈时长、减少动态效果）、排版（标题平衡、等宽数字）、布局（固定 z-index 层级）、性能和设计克制（不使用紫色渐变，不以发光作为主要提示）。提供文件后，它会报告每项违规，包括问题代码片段、其重要性，以及具体的修复方法。

不适用场景

  • 完整的 WCAG 审核，或键盘与屏幕阅读器修复 → 使用 accessibility-catalogue
  • 非 Tailwind 或非 Web UI（SwiftUI、Android）→ 使用 swiftui-design-skill 或 material-3-skill
  • 持续执行的设计审查命令和更全面的设计工具链 → 使用 impeccable

评论

支持 Markdown