{"_id":"@adonis0123/css-tailwind-styling","_rev":"4-49237153c9b03b2171fd69e1453e5a9b","name":"@adonis0123/css-tailwind-styling","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.1":{"name":"@adonis0123/css-tailwind-styling","version":"1.0.1","keywords":["claude-code","skill","css","tailwindcss","styling","best-practices","responsive-design","accessibility"],"author":{"name":"adonis"},"license":"MIT","_id":"@adonis0123/css-tailwind-styling@1.0.1","maintainers":[{"name":"adonis0123","email":"513554676@qq.com"}],"homepage":"https://github.com/Adonis0123/agent-skill-npm-boilerplate/tree/main/packages/css-tailwind-styling#readme","bugs":{"url":"https://github.com/Adonis0123/agent-skill-npm-boilerplate/issues"},"dist":{"shasum":"36e9abedc1753ec5fc25f84bce8b9cf02dcf24bd","tarball":"https://registry.npmjs.org/@adonis0123/css-tailwind-styling/-/css-tailwind-styling-1.0.1.tgz","fileCount":8,"integrity":"sha512-BrCEegXCmZ/GHoGBy/qrhzQnJB+OdJRgfIwNJX3NcpZiveV8mcGsbk4XhmVn1kld8iHFwB+rsmSEPAH8/sAbFg==","signatures":[{"sig":"MEUCIFg9bBhEsAuyaC0PYuFW0+DohhKLpaslB0K3lHjPp0dSAiEAk1oJA5WEYzYNredAMhOl0PYyKONZyDU/xYRALh+v4Ao=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":69851},"gitHead":"fb99494ab9f32d2a93f7b41b8f5ec35f61ead233","scripts":{"test":"node install-skill.js && echo 'Installation test completed.'","postinstall":"node install-skill.js","preuninstall":"node uninstall-skill.js"},"_npmUser":{"name":"adonis0123","email":"513554676@qq.com"},"repository":{"url":"git+https://github.com/Adonis0123/agent-skill-npm-boilerplate.git","type":"git","directory":"packages/css-tailwind-styling"},"_npmVersion":"10.9.3","description":"Claude Code 技能 - CSS 和 Tailwind CSS 样式规范与最佳实践","directories":{},"_nodeVersion":"22.18.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/css-tailwind-styling_1.0.1_1768832980362_0.5905067242099626","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Deprecated: these skills moved to https://adonis-skills.vercel.app/. This package is no longer maintained."},"1.0.2":{"name":"@adonis0123/css-tailwind-styling","version":"1.0.2","keywords":["claude-code","skill","css","tailwindcss","styling","best-practices","responsive-design","accessibility"],"author":{"name":"adonis"},"license":"MIT","_id":"@adonis0123/css-tailwind-styling@1.0.2","maintainers":[{"name":"adonis0123","email":"513554676@qq.com"}],"homepage":"https://github.com/Adonis0123/agent-skill-npm-boilerplate/tree/main/packages/css-tailwind-styling#readme","bugs":{"url":"https://github.com/Adonis0123/agent-skill-npm-boilerplate/issues"},"dist":{"shasum":"f31ccd944f6b43a5deea19a341b472b63b97ecd4","tarball":"https://registry.npmjs.org/@adonis0123/css-tailwind-styling/-/css-tailwind-styling-1.0.2.tgz","fileCount":8,"integrity":"sha512-2f7VPtovJ5mKkuT/mC/5Rbrkpu0G94rjywrq7aZEDx3OogAPn0Fedd1CzH2Xio4VqXT7fKG++5jWGyu3FFNEiw==","signatures":[{"sig":"MEUCIQDj6UgIPDfibB7UEI4zo6wBNvcnVHYz5egCpC0rMUxvEgIgKOecBY7HJ5Z6C0kY2Qxjwd4JoZAky+uE0ZZ1yrRf/i0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":75394},"gitHead":"bcb88e5a04355cfc28bfe541264aaa121295ebb2","scripts":{"test":"node install-skill.js && echo 'Installation test completed.'","postinstall":"node install-skill.js","preuninstall":"node uninstall-skill.js"},"_npmUser":{"name":"adonis0123","email":"513554676@qq.com"},"repository":{"url":"git+https://github.com/Adonis0123/agent-skill-npm-boilerplate.git","type":"git","directory":"packages/css-tailwind-styling"},"_npmVersion":"10.9.3","description":"Claude Code 技能 - CSS 和 Tailwind CSS 样式规范与最佳实践","directories":{},"_nodeVersion":"22.18.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/css-tailwind-styling_1.0.2_1769080959023_0.5857649220694743","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Deprecated: these skills moved to https://adonis-skills.vercel.app/. This package is no longer maintained."},"1.0.3":{"name":"@adonis0123/css-tailwind-styling","version":"1.0.3","keywords":["claude-code","skill","css","tailwindcss","styling","best-practices","responsive-design","accessibility"],"author":{"name":"adonis"},"license":"MIT","_id":"@adonis0123/css-tailwind-styling@1.0.3","maintainers":[{"name":"adonis0123","email":"513554676@qq.com"}],"homepage":"https://github.com/Adonis0123/agent-skill-npm-boilerplate/tree/main/packages/css-tailwind-styling#readme","bugs":{"url":"https://github.com/Adonis0123/agent-skill-npm-boilerplate/issues"},"dist":{"shasum":"b9192e80ac5117399e2896f2b704ef026164cfdf","tarball":"https://registry.npmjs.org/@adonis0123/css-tailwind-styling/-/css-tailwind-styling-1.0.3.tgz","fileCount":8,"integrity":"sha512-19a9hWn+vUqvSiHke3bQ32Uqdry7qjskKH/UNUe1fAwamNMluPOI6FIdMYhb1lv9Ccac8lzA+xm0lNXkew9cOw==","signatures":[{"sig":"MEUCIHVdi8Lk2CyMbaPyhV5bQEDdlawGXOYP5Xyu8FnR9PG9AiEA6i+xeGZ5yOwIpXfcfa5y2ZSY50VqLXmwMMfVHyb8gG4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":89144},"gitHead":"a00a4ec9667c5c1b4cfd4f332f4e23293d8c29d9","scripts":{"test":"node install-skill.js && echo 'Installation test completed.'","postinstall":"node install-skill.js","preuninstall":"node uninstall-skill.js"},"_npmUser":{"name":"adonis0123","email":"513554676@qq.com"},"repository":{"url":"git+https://github.com/Adonis0123/agent-skill-npm-boilerplate.git","type":"git","directory":"packages/css-tailwind-styling"},"_npmVersion":"10.9.3","description":"Claude Code 技能 - CSS 和 Tailwind CSS 样式规范与最佳实践","directories":{},"_nodeVersion":"22.18.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/css-tailwind-styling_1.0.3_1769506696760_0.8793599985175609","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Deprecated: these skills moved to https://adonis-skills.vercel.app/. This package is no longer maintained."}},"time":{"created":"2026-01-19T14:29:40.262Z","modified":"2026-09-05T11:13:16.623Z","1.0.1":"2026-01-19T14:29:40.494Z","1.0.2":"2026-01-22T11:22:39.149Z","1.0.3":"2026-01-27T09:38:16.890Z"},"bugs":{"url":"https://github.com/Adonis0123/agent-skill-npm-boilerplate/issues"},"author":{"name":"adonis"},"license":"MIT","homepage":"https://github.com/Adonis0123/agent-skill-npm-boilerplate/tree/main/packages/css-tailwind-styling#readme","keywords":["claude-code","skill","css","tailwindcss","styling","best-practices","responsive-design","accessibility"],"repository":{"url":"git+https://github.com/Adonis0123/agent-skill-npm-boilerplate.git","type":"git","directory":"packages/css-tailwind-styling"},"description":"Claude Code 技能 - CSS 和 Tailwind CSS 样式规范与最佳实践","maintainers":[{"name":"adonis0123","email":"513554676@qq.com"}],"readme":"# @adonis0123/css-tailwind-styling\n\n> **Claude Code 技能** - CSS 和 Tailwind CSS 样式规范与最佳实践\n\n专业的 CSS 和 Tailwind CSS 开发指南，涵盖现代样式技术、性能优化、响应式设计和团队协作标准。\n\n## 功能特性\n\n### 核心能力\n\n- ✅ **Tailwind CSS 最佳实践** - 类排序、组件抽象、动态类处理\n- ✅ **传统 CSS 规范** - BEM 命名、属性排序、选择器优化\n- ✅ **响应式设计** - 移动优先策略、断点管理\n- ✅ **性能优化** - 关键 CSS、代码分割、渲染优化\n- ✅ **无障碍访问** - WCAG AA 合规、对比度检查、焦点管理\n- ✅ **现代 CSS 特性** - 嵌套、容器查询、:has() 选择器\n\n### 涵盖场景\n\n- 创建或重构组件样式\n- 建立项目样式架构\n- 优化 CSS/Tailwind 性能\n- 制定团队样式规范\n- 代码审查和调试\n- 实现响应式设计\n- 确保无障碍合规\n\n## 安装\n\n```bash\nnpm install -g @adonis0123/css-tailwind-styling\n```\n\n## 使用方法\n\n在 Claude Code 中使用以下触发词：\n\n- \"优化 Tailwind 类\"\n- \"CSS 最佳实践\"\n- \"响应式设计规范\"\n- \"样式性能优化\"\n- \"无障碍样式检查\"\n\n或直接调用技能：\n\n```\n/css-tailwind-styling\n```\n\n## 核心原则\n\n1. **可维护性优先** - 编写易于理解和修改的样式\n2. **性能导向** - 最小化包体积和渲染阻塞\n3. **默认无障碍** - 确保 WCAG AA 合规（4.5:1 对比度）\n4. **移动优先响应式** - 从移动端开始渐进增强\n5. **一致性胜过技巧** - 建立并遵循模式\n\n## 技能内容\n\n### Tailwind CSS 指南\n\n- 类排序规范（Concentric CSS 方法）\n- 组件抽象策略（优先组件 > @apply）\n- 动态类处理模式（避免字符串插值）\n- 配置文件最佳实践\n- 性能优化技巧\n\n### 传统 CSS 指南\n\n- 文件组织结构\n- BEM/SMACSS 命名规范\n- 属性排序（Concentric CSS）\n- CSS 自定义属性（变量）\n- 选择器最佳实践\n\n### 响应式设计\n\n- 移动优先断点策略\n- Flexbox 和 Grid 布局\n- 容器查询（2024+）\n- 媒体查询最佳实践\n\n### 性能优化\n\n- 关键 CSS 内联\n- 代码压缩和分割\n- 昂贵属性识别\n- will-change 使用规范\n\n### 无障碍实践\n\n- 色彩对比度检查（WCAG AA）\n- 焦点指示器设计\n- 屏幕阅读器支持\n- 减少动画偏好\n\n## 工具推荐\n\n### 必备工具\n\n- [Prettier + Tailwind Plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) - 自动格式化类排序\n- [ESLint + Tailwind Plugin](https://www.npmjs.com/package/eslint-plugin-tailwindcss) - Tailwind 类检查\n- [Autoprefixer](https://github.com/postcss/autoprefixer) - 自动添加浏览器前缀\n- [cssnano](https://cssnano.co/) - CSS 压缩\n\n### 测试工具\n\n- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - 对比度检查\n- [WAVE](https://wave.webaim.org/) - 无障碍测试\n- [Lighthouse](https://developers.google.com/web/tools/lighthouse) - 性能和无障碍审计\n\n## 快速参考\n\n### Tailwind 检查清单\n\n- [ ] 类排序规范（安装 Prettier 插件）\n- [ ] 使用简写工具类（mx, py）\n- [ ] 避免字符串插值生成类名\n- [ ] 使用预定义变体而非任意类\n- [ ] 配置文件设置设计令牌\n- [ ] 正确配置 content 路径\n- [ ] 安装 ESLint Tailwind 插件\n\n### 提交前检查\n\n- [ ] 移除未使用的 CSS（启用 JIT）\n- [ ] 生产环境压缩\n- [ ] 必要时内联关键 CSS\n- [ ] 无障碍测试（键盘导航、屏幕阅读器）\n- [ ] 多屏幕尺寸响应式测试\n- [ ] 跨浏览器兼容性测试\n\n## 更多技能\n\n- [@adonis0123/weekly-report](https://www.npmjs.com/package/@adonis0123/weekly-report) - 周报生成\n- [@adonis0123/agent-browser](https://www.npmjs.com/package/@adonis0123/agent-browser) - 浏览器自动化\n- [@adonis0123/react-best-practices](https://www.npmjs.com/package/@adonis0123/react-best-practices) - React 最佳实践\n- [@adonis0123/skill-development](https://www.npmjs.com/package/@adonis0123/skill-development) - 技能开发指南\n- [@adonis0123/commit](https://www.npmjs.com/package/@adonis0123/commit) - 提交信息生成\n- [@adonis0123/staged-changes-review](https://www.npmjs.com/package/@adonis0123/staged-changes-review) - 代码审查\n- [@adonis0123/create-skill](https://www.npmjs.com/package/@adonis0123/create-skill) - 创建新技能包\n- [@adonis0123/code-doc-generator](https://www.npmjs.com/package/@adonis0123/code-doc-generator) - 代码文档生成\n## 贡献\n\n欢迎提交 Issue 和 Pull Request！\n\n## License\n\nMIT © adonis\n","readmeFilename":"README.md"}