OpenClaw

ui-skills

Opinionated constraints for building better interfaces with agents.

correctroadh0 来源安装数☆ 0 仓库 Stars

查看来源 ↗安装与使用 SKILL.md ↗

安装与使用

请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。

SkillHub CLI

skillhub install correctroadh/ui-skills

打开来源仓库，查看说明和兼容环境后，按来源提供的命令或步骤安装。

将来源链接提供给你的 Agent，让它先读取说明、核对依赖，并向你说明将执行的安装步骤。

查看来源 ↗使用指南

技能说明

UI Skills

Opinionated constraints for building better interfaces with agents.

Stack

MUST use Tailwind CSS defaults (spacing, radius, shadows) before custom values
MUST use motion/react (formerly framer-motion) when JavaScript animation is required
SHOULD use tw-animate-css for entrance and micro-animations in Tailwind CSS
MUST use cn utility (clsx + tailwind-merge) for class logic

Components

MUST use accessible component primitives for anything with keyboard or focus behavior (Base UI, React Aria, Radix)
MUST use the project’s existing component primitives first
NEVER mix primitive systems within the same interaction surface
SHOULD prefer Base UI for new primitives if compatible with the stack
MUST add an aria-label to icon-only buttons
NEVER rebuild keyboard or focus behavior by hand unless explicitly requested

Interaction

MUST use an AlertDialog for destructive or irreversible actions
SHOULD use structural skeletons for loading states
NEVER use h-screen, use h-dvh
MUST respect safe-area-inset for fixed elements
MUST show errors next to where the action happens
NEVER block paste in input or textarea elements

Animation

NEVER add animation unless it is explicitly requested
MUST animate only compositor props (transform, opacity)
NEVER animate layout properties (width, height, top, left, margin, padding)
SHOULD avoid animating paint properties (background, color) except for small, local UI (text, icons)
SHOULD use ease-out on entrance
NEVER exceed 200ms for interaction feedback
MUST pause looping animations when off-screen
MUST respect prefers-reduced-motion
NEVER introduce custom easing curves unless explicitly requested
SHOULD avoid animating large images or full-screen surfaces

Typography

MUST use text-balance for headings and text-pretty for body/paragraphs
MUST use tabular-nums...

来源信息

Source: github
Repository: openclaw/skills
Path: skills/correctroadh/ui-skills
Version: —
Commit: ba2a102c9efb5b88454c67eb42b057441cf3d0e9
分类来源: rules
状态: active
可见性: public

这些信息来自收录时的来源分析，可能滞后；使用前请核对最新来源文件。

来源内容

SKILL.md

# UI Skills

Opinionated constraints for building better interfaces with agents.

## Stack

- MUST use Tailwind CSS defaults (spacing, radius, shadows) before custom values
- MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required
- SHOULD use `tw-animate-css` for entrance and micro-animations in Tailwind CSS
- MUST use `cn` utility (`clsx` + `tailwind-merge`) for class logic

## Components

- MUST use accessible component primitives for anything with keyboard or focus behavior (`Base UI`, `React Aria`, `Radix`)
- MUST use the project’s existing component primitives first
- NEVER mix primitive systems within the same interaction surface
- SHOULD prefer [`Base UI`](https://base-ui.com/react/components) for new primitives if compatible with the stack
- MUST add an `aria-label` to icon-only buttons
- NEVER rebuild keyboard or focus behavior by hand unless explicitly requested

## Interaction

- MUST use an `AlertDialog` for destructive or irreversible actions
- SHOULD use structural skeletons for loading states
- NEVER use `h-screen`, use `h-dvh`
- MUST respect `safe-area-inset` for fixed elements
- MUST show errors next to where the action happens
- NEVER block paste in `input` or `textarea` elements

## Animation

- NEVER add animation unless it is explicitly requested
- MUST animate only compositor props (`transform`, `opacity`)
- NEVER animate layout properties (`width`, `height`, `top`, `left`, `margin`, `padding`)
- SHOULD avoid animating paint properties (`background`, `color`) except for small, local UI (text, icons)
- SHOULD use `ease-out` on entrance
- NEVER exceed `200ms` for interaction feedback
- MUST pause looping animations when off-screen
- MUST respect `prefers-reduced-motion`
- NEVER introduce custom easing curves unless explicitly requested
- SHOULD avoid animating large images or full-screen surfaces

## Typography

- MUST use `text-balance` for headings and `text-pretty` for body/paragraphs
- MUST use `tabular-nums`...

搜索