tailwind by pproenca/dot-skills
npx skills add https://github.com/pproenca/dot-skills --skill tailwindTailwind CSS v4 应用程序的全面性能优化指南。包含 8 个类别共 44 条规则,按影响优先级排序,以指导自动化重构和代码生成。
在以下情况下参考这些指南:
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 构建配置 | 关键 | build- |
| 2 | CSS 生成 | 关键 | gen- |
| 3 | 包优化 | 高 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
bundle-| 4 | 实用工具模式 | 高 | util- |
| 5 | 组件架构 | 中高 | comp- |
| 6 | 主题与设计令牌 | 中 | theme- |
| 7 | 响应式与自适应 | 中 | resp- |
| 8 | 动画与过渡 | 低中 | anim- |
build-vite-plugin - 使用 Vite 插件而非 PostCSSbuild-css-import - 使用 CSS 导入而非 @tailwind 指令build-content-detection - 利用自动内容检测build-node-version - 使用 Node.js 20+ 以获得最佳性能build-postcss-simplify - 移除冗余的 PostCSS 插件build-cli-package - 使用正确的 CLI 包gen-css-first-config - 使用 CSS 优先配置而非 JavaScriptgen-avoid-theme-bloat - 避免过多的主题变量gen-oklch-colors - 使用 OKLCH 色彩空间以获得鲜艳色彩gen-utility-directive - 使用 @utility 定义自定义实用工具gen-dynamic-utilities - 使用动态实用工具值gen-css-variable-syntax - 使用括号引用 CSS 变量bundle-remove-unused-plugins - 移除内置插件bundle-avoid-preprocessors - 避免使用 Sass/Less 预处理器bundle-css-minification - 在生产环境中启用 CSS 压缩bundle-avoid-cdn-production - 避免在生产环境中使用 Play CDNbundle-split-critical-css - 提取关键 CSS 用于初始渲染util-renamed-utilities - 使用重命名后的实用工具类util-important-modifier - 使用尾随的 !important 修饰符util-variant-stacking - 使用从左到右的变体堆叠util-explicit-colors - 使用明确的边框和轮廓颜色util-opacity-modifier - 使用斜杠不透明度修饰符util-gradient-via-none - 使用 via-none 重置渐变节点comp-avoid-apply-overuse - 避免过度使用 @applycomp-reference-directive - 使用 @reference 进行 CSS 模块集成comp-utility-file-scope - 理解实用工具文件作用域comp-smart-sorting - 利用智能实用工具排序comp-container-customize - 使用 @utility 自定义容器comp-custom-variant - 使用 @custom-variant 定义自定义变体theme-semantic-tokens - 使用语义化的设计令牌名称theme-dark-mode-class - 使用基于类的深色模式以获得控制权theme-prefix-variables - 使用前缀进行变量命名空间隔离theme-runtime-variables - 利用运行时 CSS 变量theme-color-scheme - 设置 color-scheme 以支持原生深色模式theme-inline-static - 使用 @theme inline 和 @theme static 控制变量resp-mobile-first - 使用移动优先的响应式设计resp-container-queries - 使用容器查询实现组件级响应式resp-custom-breakpoints - 在 @theme 中定义自定义断点resp-hover-capability - 将 Hover 与 Active 配对以实现触控友好的交互resp-logical-properties - 使用逻辑属性以支持 RTLanim-gpu-accelerated - 使用 GPU 加速的变换属性anim-starting-style - 使用 @starting-style 实现进入动画anim-gradient-interpolation - 使用 OKLCH 渐变插值anim-3d-transforms - 使用内置的 3D 变换实用工具阅读各个参考文件以获取详细解释和代码示例:
要查看包含所有规则详情的完整指南,请参阅 AGENTS.md。
| 文件 | 描述 |
|---|---|
| AGENTS.md | 包含所有规则的完整编译指南 |
| references/_sections.md | 类别定义和排序 |
| assets/templates/_template.md | 新规则模板 |
| metadata.json | 版本和参考信息 |
每周安装量
172
代码仓库
GitHub 星标数
85
首次出现
2026 年 1 月 22 日
安全审计
安装于
opencode144
codex142
gemini-cli137
claude-code133
cursor123
github-copilot123
Comprehensive performance optimization guide for Tailwind CSS v4 applications. Contains 44 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Build Configuration | CRITICAL | build- |
| 2 | CSS Generation | CRITICAL | gen- |
| 3 | Bundle Optimization | HIGH | bundle- |
| 4 | Utility Patterns | HIGH | util- |
| 5 | Component Architecture | MEDIUM-HIGH | comp- |
| 6 | Theming & Design Tokens | MEDIUM | theme- |
| 7 | Responsive & Adaptive | MEDIUM | resp- |
| 8 | Animation & Transitions | LOW-MEDIUM | anim- |
build-vite-plugin - Use Vite Plugin Over PostCSSbuild-css-import - Use CSS Import Over @tailwind Directivesbuild-content-detection - Leverage Automatic Content Detectionbuild-node-version - Use Node.js 20+ for Optimal Performancebuild-postcss-simplify - Remove Redundant PostCSS Pluginsbuild-cli-package - Use Correct CLI Packagegen-css-first-config - Use CSS-First Configuration Over JavaScriptgen-avoid-theme-bloat - Avoid Excessive Theme Variablesgen-oklch-colors - Use OKLCH Color Space for Vivid Colorsgen-utility-directive - Use @utility for Custom Utilitiesgen-dynamic-utilities - Use Dynamic Utility Valuesgen-css-variable-syntax - Use Parentheses for CSS Variable Referencesbundle-remove-unused-plugins - Remove Built-in Pluginsbundle-avoid-preprocessors - Avoid Sass/Less Preprocessorsbundle-css-minification - Enable CSS Minification in Productionbundle-avoid-cdn-production - Avoid Play CDN in Productionbundle-split-critical-css - Extract Critical CSS for Initial Renderutil-renamed-utilities - Use Renamed Utility Classesutil-important-modifier - Use Trailing Important Modifierutil-variant-stacking - Use Left-to-Right Variant Stackingutil-explicit-colors - Use Explicit Border and Ring Colorsutil-opacity-modifier - Use Slash Opacity Modifierutil-gradient-via-none - Use via-none to Reset Gradient Stopscomp-avoid-apply-overuse - Avoid Overusing @applycomp-reference-directive - Use @reference for CSS Module Integrationcomp-utility-file-scope - Understand Utility File Scopecomp-smart-sorting - Leverage Smart Utility Sortingcomp-container-customize - Customize Container with @utilitycomp-custom-variant - Use @custom-variant for Custom Variant Definitionstheme-semantic-tokens - Use Semantic Design Token Namestheme-dark-mode-class - Use Class-Based Dark Mode for Controltheme-prefix-variables - Use Prefix for Variable Namespacingtheme-runtime-variables - Leverage Runtime CSS Variablestheme-color-scheme - Set color-scheme for Native Dark Modetheme-inline-static - Use @theme inline and @theme static for Variable Controlresp-mobile-first - Use Mobile-First Responsive Designresp-container-queries - Use Container Queries for Component-Level Responsivenessresp-custom-breakpoints - Define Custom Breakpoints in @themeresp-hover-capability - Pair Hover with Active for Touch-Friendly Interactionsresp-logical-properties - Use Logical Properties for RTL Supportanim-gpu-accelerated - Use GPU-Accelerated Transform Propertiesanim-starting-style - Use @starting-style for Entry Animationsanim-gradient-interpolation - Use OKLCH Gradient Interpolationanim-3d-transforms - Use Built-in 3D Transform UtilitiesRead individual reference files for detailed explanations and code examples:
For a complete guide with all rules expanded, see AGENTS.md.
| File | Description |
|---|---|
| AGENTS.md | Complete compiled guide with all rules |
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |
Weekly Installs
172
Repository
GitHub Stars
85
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubFailSocketPassSnykPass
Installed on
opencode144
codex142
gemini-cli137
claude-code133
cursor123
github-copilot123
GSAP 框架集成指南:Vue、Svelte 等框架中 GSAP 动画最佳实践
2,900 周安装