Tailwind Ui Refactor
作者 pproencacf93c57cac89无许可证215 个星标收录于 2026年10月8日更新于 2026年10月8日仓库7周前更新
Refactoring UI design patterns for Tailwind CSS applications. This skill should be used when writing, reviewing, or refactoring HTML with Tailwind utility classes to improve visual hierarchy, spacing, typography, color, depth, and polish. Triggers on tasks involving UI cleanup, design review, Tailwind refactoring, component styling, or visual improvements.
仅公开文件列表。将技能安装到工作区后即可查看文件内容。
| 路径 | 大小 | 类型 |
|---|---|---|
| assets/templates/_template.md | 666 B | text/markdown |
| metadata.json | 716 B | application/json |
| references/color-accessible-contrast.md | 1.4 KB | text/markdown |
| references/color-dark-gray-not-black.md | 990 B | text/markdown |
| references/color-define-palette-upfront.md | 1 KB | text/markdown |
| references/color-grayscale-first.md | 1.8 KB | text/markdown |
| references/color-light-backgrounds-dark-text.md | 1.3 KB | text/markdown |
| references/color-saturated-grays.md | 1.3 KB | text/markdown |
| references/depth-interactive-elevation.md | 1 KB | text/markdown |
| references/depth-light-closer-dark-recedes.md | 1.3 KB | text/markdown |
| references/depth-overlap-layers.md | 1.4 KB | text/markdown |
| references/depth-shadow-scale.md | 1.3 KB | text/markdown |
| references/depth-shadow-vertical-offset.md | 994 B | text/markdown |
| references/hier-button-hierarchy.md | 1.2 KB | text/markdown |
| references/hier-color-hierarchy-on-dark.md | 1.4 KB | text/markdown |
| references/hier-deemphasize-secondary.md | 1.5 KB | text/markdown |
| references/hier-icon-sizing.md | 951 B | text/markdown |
| references/hier-label-value-pairs.md | 1.9 KB | text/markdown |
| references/hier-semantic-vs-visual.md | 1.2 KB | text/markdown |
| references/hier-size-weight-color.md | 1.1 KB | text/markdown |
| references/img-control-user-content.md | 1012 B | text/markdown |
| references/img-dont-scale-up-icons.md | 1.3 KB | text/markdown |
| references/img-empty-states.md | 1.2 KB | text/markdown |
| references/img-text-overlay.md | 1.1 KB | text/markdown |
| references/intent-audit-before-styling.md | 2.1 KB | text/markdown |
| references/intent-content-drives-layout.md | 2.1 KB | text/markdown |
| references/intent-match-context-fidelity.md | 2.7 KB | text/markdown |
| references/intent-match-existing-patterns.md | 2.4 KB | text/markdown |
| references/intent-progressive-disclosure.md | 2.1 KB | text/markdown |
| references/intent-reduce-cognitive-load.md | 1.8 KB | text/markdown |
| references/intent-remove-before-decorating.md | 1.8 KB | text/markdown |
| references/intent-simplify-over-decorate.md | 2.2 KB | text/markdown |
| references/polish-accent-borders.md | 1007 B | text/markdown |
| references/polish-border-radius-personality.md | 1.2 KB | text/markdown |
| references/polish-custom-bullets.md | 1.2 KB | text/markdown |
| references/polish-gradient-close-hues.md | 1.2 KB | text/markdown |
| references/polish-inner-shadow-images.md | 1.1 KB | text/markdown |
| references/_sections.md | 2.3 KB | text/markdown |
| references/sep-background-color-separation.md | 1.2 KB | text/markdown |
| references/sep-card-radio-buttons.md | 2.2 KB | text/markdown |
| references/sep-fewer-borders.md | 1.3 KB | text/markdown |
| references/sep-table-spacing-not-lines.md | 2.1 KB | text/markdown |
| references/space-dont-fill-screen.md | 1.3 KB | text/markdown |
| references/space-grids-not-required.md | 1.3 KB | text/markdown |
| references/space-mobile-first.md | 1.8 KB | text/markdown |
| references/space-relationship-proximity.md | 1.6 KB | text/markdown |
| references/space-relative-sizing-fails.md | 1.4 KB | text/markdown |
| references/space-start-generous.md | 1.3 KB | text/markdown |
| references/space-systematic-scale.md | 1.1 KB | text/markdown |
| references/type-align-numbers-right.md | 1.9 KB | text/markdown |
| references/type-font-weight-variety.md | 1.2 KB | text/markdown |
| references/type-letter-spacing.md | 1 KB | text/markdown |
| references/type-line-height-inverse.md | 1.3 KB | text/markdown |
| references/type-line-length.md | 1.2 KB | text/markdown |
| references/type-no-center-long-text.md | 1.3 KB | text/markdown |
| SKILL.md | 10 KB | text/markdown |
来源与署名
来源：pproenca/dot-skills位于skills/.experimental/tailwind-ui-refactor提交cf93c57
许可证： 无许可证
内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。
更多来自 pproenca/dot-skills 的技能
Typescript Refactor
pproenca
用于重构和现代化 TypeScript 与 React/TSX 代码的指南，涵盖九大类共 47 条规则。
Shell
pproenca
一份包含 49 条 shell 脚本最佳实践的参考指南，用于编写安全、可移植且易维护的 bash 与 sh 脚本。
React Refactor
pproenca
面向 React 应用的架构重构指南，包含组件、状态、Hook 与数据模式方面的 40 条规则。
Expo React Native Performance
pproenca
针对 Expo React Native 应用的性能优化指南，涵盖启动、列表、重渲染、动画、资源、内存与异步。
Framer Motion
pproenca
用于优化 React 应用中 Framer Motion 动画性能的指南。
Emilkowal Animations
pproenca
网页动画最佳实践参考指南，涵盖缓动、时长、变换、手势、无障碍与 Tailwind v4。
更多Design & Creative技能
Theme Factory
anthropics
提供 10 套预设配色与字体主题，并可即时生成新主题，用于为幻灯片、文档、报告和 HTML 页面统一风格。
Slack Gif Creator
anthropics
为 Slack 创建尺寸与体积经过优化的动画 GIF，提供 PIL 绘图辅助、缓动函数与校验工具。
Frontend Design
anthropics
在构建或改造用户界面时，提供打造独特、有意图的视觉设计的指导。
Canvas Design
anthropics
依据写好的设计理念创作原创视觉艺术，输出 PNG 或 PDF，适用于海报、艺术作品等静态成品。
Brand Guidelines
anthropics
将 Anthropic 官方品牌配色与字体应用到需要体现 Anthropic 外观风格的各类产物上。
Frontend Design
anthropics
指导智能体为新界面或改版界面进行独特、有意图的视觉设计。