Baseline Ui
技能 已验证 活跃在 Tailwind CSS 项目中验证动画持续时间，强制执行排版比例，检查组件可访问性，并防止布局反模式。适用于构建 UI 组件、审查 CSS 工具类、 styling React 视图或强制执行设计一致性。
通过在 Tailwind CSS 项目中强制执行一套严格的设计和开发规则，来防止 UI 不一致并确保高质量、可访问的界面。
功能
- 验证动画持续时间和属性
- 强制执行排版比例和渲染
- 检查组件可访问性和可访问性图元
- 防止常见的布局反模式
- 确保遵循 Tailwind CSS 默认值和最佳实践
使用场景
- 将 UI 约束应用于新的 UI 开发任务
- 审查 CSS 工具类和组件代码是否合规
- 使用一致的设计系统 styling React 视图
- 在整个项目中强制执行设计一致性
非目标
- 执行 UI 最佳实践之外的一般代码 linting
- 管理项目依赖项或构建过程
- 在没有用户输入的情况下从头开始生成 UI 组件
安装
npx skills add ibelick/ui-skills通过 npx 运行 Vercel skills CLI(skills.sh)— 需要本地安装 Node.js,以及至少一个兼容 skills 的智能体(Claude Code、Cursor、Codex 等)。前提是仓库遵循 agentskills.io 格式。
质量评分
已验证类似扩展
Color Audit
100Color-only audit to extract, evaluate, and recommend improvements for the project's color system
Epic Design
99Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required. Use this skill for any web design task: landing pages, product sites, hero sections, scroll animations, parallax, sticky sections, section overlaps, floating products between sections, clip-path reveals, text that flies in from sides, words that light up on scroll, curtain drops, iris opens, card stacks, bleed typography, and any site that should feel cinematic or premium. Trigger on phrases like "make it feel alive", "Apple-style animation", "sections that overlap", "product rises between sections", "immersive", "scrollytelling", or any scroll-driven visual effect. Covers 45+ techniques across 8 categories. Always inspects, judges, and plans assets before coding. Use aggressively for ANY web design task.
Android Design Guidelines
100Material Design 3 和 Android 平台指南。在构建使用 Jetpack Compose 或 XML 布局的 Android 应用、实现 Material You、导航或可访问性时使用。在涉及 Android UI、Compose 组件、动态颜色或 Material Design 合规性的任务上触发。
Setup Tailwind Typescript
100Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.
Review Ux Ui
99Review user experience and interface design using Nielsen's heuristics, WCAG 2.1 accessibility guidelines, keyboard and screen reader audit, user flow analysis, cognitive load assessment, and form usability evaluation. Use when conducting a usability review before release, assessing WCAG 2.1 accessibility compliance, evaluating user flows for efficiency, reviewing form design, or performing a heuristic evaluation of an existing interface.
Impeccable
99当用户希望设计、重新设计、塑造、批评、审计、打磨、澄清、提炼、加固、优化、改编、动画化、着色、提取或以其他方式改进前端界面时使用。涵盖网站、登陆页面、仪表板、产品 UI、应用外壳、组件、表单、设置、入职流程和空状态。处理用户体验审查、视觉层次、信息架构、认知负荷、可访问性、性能、响应行为、主题化、反模式、排版、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边缘情况、i18n 以及可复用的设计系统或令牌。也适用于需要从平淡变得更大胆或更令人愉悦的设计，需要变得更安静的醒目设计，对 UI 元素的实时浏览器迭代，或应该感觉技术上非凡的雄心勃勃的视觉效果。不适用于仅限后端或非 UI 任务。