tailwind-ui-refactor by pproenca/dot-skills
npx skills add https://github.com/pproenca/dot-skills --skill tailwind-ui-refactor基于 Adam Wathan 和 Steve Schoger 的《重构 UI》理念,使用 Tailwind CSS 工具类实现的全面 UI 重构指南。包含 9 大类共 52 条规则,按设计影响优先级排序,以指导自动化重构和代码生成。使用 Tailwind CSS v4 语法(若语法不同,会提供 v3 的说明)。
重要提示:先思考,再设计样式。 在应用任何视觉规则之前,请先理解 UI 的目的,识别对用户重要的内容,并移除不必要的元素。在进行任何样式更改之前,必须优先考虑设计意图类别(优先级 1)。元素更少的简单组件总是胜过带有不必要标记的装饰性组件。
在以下情况下参考本指南:
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 设计意图 | 关键 | intent- |
| 2 | 视觉层次 | 关键 | hier- |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 3 | 布局与间距 | 关键 | space- |
| 4 | 排版 | 高 | type- |
| 5 | 色彩系统 | 高 | color- |
| 6 | 深度与阴影 | 中 | depth- |
| 7 | 边框与分隔 | 中 | sep- |
| 8 | 图像与内容 | 中低 | img- |
| 9 | 润色与细节 | 低 | polish- |
intent-audit-before-styling - 在更改任何 CSS 之前,审核每个元素传达的信息intent-remove-before-decorating - 在装饰剩余元素之前,先移除不必要的元素intent-reduce-cognitive-load - 减少每个屏幕的选择——更少的选项胜过更漂亮的选项intent-progressive-disclosure - 将次要信息隐藏在交互之后intent-content-drives-layout - 让真实内容决定布局——而不是相反intent-simplify-over-decorate - 倾向于移除一个包装器,而不是为其添加 5 个工具类intent-match-context-fidelity - 使设计精细度与上下文匹配——管理后台 vs 消费者端 vs 产品页intent-match-existing-patterns - 在重新设计样式之前,审核兄弟组件的模式hier-size-weight-color - 使用大小、粗细和颜色来建立层次——不仅仅是大小hier-deemphasize-secondary - 弱化次要内容,而不是强调主要内容hier-button-hierarchy - 根据视觉层次而非语义重要性来设计按钮样式hier-label-value-pairs - 将标签和值组合成自然语言hier-semantic-vs-visual - 将视觉层次与文档层次分开hier-icon-sizing - 根据相邻文本调整图标大小,而不是为了填充空间hier-color-hierarchy-on-dark - 在彩色背景上使用不透明度或柔和颜色来建立层次space-start-generous - 从过多的留白开始,然后逐步移除space-systematic-scale - 使用受约束的间距比例,而不是任意值space-relationship-proximity - 使用间距来显示元素之间的关系space-dont-fill-screen - 限制内容宽度——避免填满整个屏幕space-grids-not-required - 在不需要网格时使用固定宽度space-relative-sizing-fails - 避免在没有限制的情况下使用原始视口单位space-mobile-first - 在约 400px 处进行移动端优先设计,然后扩展type-line-length - 保持行宽在 45-75 个字符之间type-line-height-inverse - 行高与字体大小成反比type-font-weight-variety - 选择至少具有 5 种字重变化的字体type-no-center-long-text - 正文内容左对齐——避免居中对齐长文本type-letter-spacing - 收紧标题的字母间距,为大写字母放宽间距type-align-numbers-right - 在表格中将数字右对齐以便于比较color-define-palette-upfront - 预先定义完整的调色板——不要临时挑选颜色color-grayscale-first - 先以灰度设计,最后添加颜色color-accessible-contrast - 确保正文文本的对比度达到 4.5:1color-dark-gray-not-black - 使用深灰色代替纯黑色作为文本颜色color-saturated-grays - 为灰色添加微妙的饱和度以增加温暖感或冷感color-light-backgrounds-dark-text - 为徽章使用浅色背景和深色文字depth-shadow-scale - 定义固定的阴影比例——从小到特大depth-shadow-vertical-offset - 使用垂直偏移来创建自然的阴影效果depth-interactive-elevation - 使用阴影变化来传达交互性depth-light-closer-dark-recedes - 浅色感觉更近,深色感觉更远depth-overlap-layers - 重叠元素以创建视觉层次sep-fewer-borders - 使用更少的边框——用间距、阴影或背景色替代sep-background-color-separation - 使用背景色差异来分隔区域sep-table-spacing-not-lines - 在简单表格中使用间距代替线条sep-card-radio-buttons - 将单选按钮升级为可选择的卡片,用于关键选择img-control-user-content - 控制用户上传图像的大小和宽高比img-text-overlay - 在图像上添加叠加层或降低对比度以放置文字img-dont-scale-up-icons - 避免放大为小尺寸设计的图标img-empty-states - 设计具有明确号召性用语的有意义的空状态polish-accent-borders - 添加强调边框以突出重要元素polish-custom-bullets - 用图标或勾选标记替换默认的项目符号polish-border-radius-personality - 使边框圆角与品牌个性相匹配polish-gradient-close-hues - 使用色相在 30 度以内的渐变polish-inner-shadow-images - 添加内阴影以防止图像背景溢出本技能基于《重构 UI》原则,涵盖布局、层次、间距、色彩和润色。它不涵盖:
对于这些关注点,请将本技能与涵盖创意方向和美学执行的设计思维或前端设计技能结合使用。
阅读各个参考文件以获取详细说明和代码示例:
| 文件 | 描述 |
|---|---|
| references/_sections.md | 类别定义和排序 |
| assets/templates/_template.md | 新规则模板 |
| metadata.json | 版本和参考信息 |
每周安装次数
107
代码仓库
GitHub 星标数
85
首次出现
2026年2月11日
安全审计
安装于
codex103
github-copilot102
gemini-cli102
opencode102
kimi-cli100
amp99
Comprehensive UI refactoring guide based on Refactoring UI by Adam Wathan & Steve Schoger, implemented with Tailwind CSS utility classes. Contains 52 rules across 9 categories, prioritized by design impact to guide automated refactoring and code generation. Uses Tailwind CSS v4 syntax (v3 notes provided where syntax differs).
Important: Think first, style second. Before applying any visual rule, understand the UI's purpose, identify what matters to the user, and remove unnecessary elements. The Design Intent category (priority 1) must be considered before any styling changes. A simpler component with fewer elements always beats a decorated component with unnecessary markup.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Design Intent | CRITICAL | intent- |
| 2 | Visual Hierarchy | CRITICAL | hier- |
| 3 | Layout & Spacing | CRITICAL | space- |
| 4 | Typography | HIGH | type- |
| 5 | Color Systems | HIGH | color- |
| 6 | Depth & Shadows | MEDIUM | depth- |
| 7 | Borders & Separation | MEDIUM | sep- |
| 8 | Images & Content | LOW-MEDIUM | img- |
| 9 | Polish & Details | LOW | polish- |
intent-audit-before-styling - Audit what each element communicates before changing any CSSintent-remove-before-decorating - Remove unnecessary elements before styling what remainsintent-reduce-cognitive-load - Reduce choices per screen — fewer options beat prettier optionsintent-progressive-disclosure - Hide secondary information behind interactionsintent-content-drives-layout - Let real content determine layout — not the other way aroundhier-size-weight-color - Use size, weight, and color for hierarchy — not just sizehier-deemphasize-secondary - De-emphasize secondary content instead of emphasizing primaryhier-button-hierarchy - Style buttons by visual hierarchy, not semantic importancehier-label-value-pairs - Combine labels and values into natural languagehier-semantic-vs-visual - Separate visual hierarchy from document hierarchyspace-start-generous - Start with too much whitespace, then removespace-systematic-scale - Use a constrained spacing scale, not arbitrary valuesspace-relationship-proximity - Use spacing to show relationships between elementsspace-dont-fill-screen - Constrain content width — avoid filling the whole screenspace-grids-not-required - Use fixed widths when grids are not neededtype-line-length - Keep line length between 45-75 characterstype-line-height-inverse - Line height and font size are inversely proportionaltype-font-weight-variety - Choose fonts with at least 5 weight variationstype-no-center-long-text - Left-align body content — avoid centering long-form texttype-letter-spacing - Tighten letter spacing for headlines, loosen for uppercasecolor-define-palette-upfront - Define a complete color palette upfront — don't pick colors ad-hoccolor-grayscale-first - Design in grayscale first, add color lastcolor-accessible-contrast - Ensure 4.5:1 contrast ratio for body textcolor-dark-gray-not-black - Use dark gray instead of pure black for textcolor-saturated-grays - Add subtle saturation to grays for warmth or coolnessdepth-shadow-scale - Define a fixed shadow scale — small to extra largedepth-shadow-vertical-offset - Use vertical offset for natural-looking shadowsdepth-interactive-elevation - Use shadow changes to communicate interactivitydepth-light-closer-dark-recedes - Lighter colors feel closer, darker colors recededepth-overlap-layers - Overlap elements to create visual layerssep-fewer-borders - Use fewer borders — replace with spacing, shadows, or background colorsep-background-color-separation - Use background color differences to separate sectionssep-table-spacing-not-lines - Use spacing instead of lines in simple tablessep-card-radio-buttons - Upgrade radio buttons to selectable cards for key choicesimg-control-user-content - Control user-uploaded image size and aspect ratioimg-text-overlay - Add overlays or reduce contrast for text over imagesimg-dont-scale-up-icons - Avoid scaling up icons designed for small sizesimg-empty-states - Design meaningful empty states with clear CTAspolish-accent-borders - Add accent borders to highlight important elementspolish-custom-bullets - Replace default bullets with icons or checkmarkspolish-border-radius-personality - Match border radius to brand personalitypolish-gradient-close-hues - Use gradients with hues within 30 degrees of each otherpolish-inner-shadow-images - Add inner shadow to prevent image background bleedThis skill covers layout, hierarchy, spacing, color, and polish based on Refactoring UI principles. It does NOT cover:
For these concerns, pair this skill with a design-thinking or frontend-design skill that covers creative direction and aesthetic execution.
Read individual reference files for detailed explanations and code examples:
| File | Description |
|---|---|
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |
Weekly Installs
107
Repository
GitHub Stars
85
First Seen
Feb 11, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex103
github-copilot102
gemini-cli102
opencode102
kimi-cli100
amp99
Android 整洁架构指南:模块化设计、依赖注入与数据层实现
1,200 周安装
通话总结AI工具:自动提取行动项、生成会议纪要和跟进邮件 | 销售效率提升
462 周安装
Salesforce DevOps自动化部署指南:sf-deploy技能详解与最佳实践
451 周安装
营销绩效报告生成工具 - 自动分析关键指标与优化建议 | 营销数据分析
467 周安装
list-npm-package-content:列出npm包tarball内容,分析打包文件组成
453 周安装
小红书CLI工具 - 命令行管理小红书笔记、评论、用户,支持搜索、互动、自动化
468 周安装
Python代码规范与最佳实践指南:编写优雅、可维护的Python 3.10-3.13代码
471 周安装
intent-simplify-over-decorate - Prefer removing a wrapper over adding 5 utility classes to itintent-match-context-fidelity - Match design polish to context — admin vs consumer vs productintent-match-existing-patterns - Audit sibling component patterns before restylinghier-icon-sizinghier-color-hierarchy-on-dark - Use opacity or muted colors for hierarchy on colored backgroundsspace-relative-sizing-failsspace-mobile-first - Design mobile-first at ~400px, then expandtype-align-numbers-rightcolor-light-backgrounds-dark-text