JavaScript (Astro, Tailwind CSS)
基于Astro和Tailwind CSS的JavaScript项目开发助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：JavaScript (Astro, Tailwind CSS)。 它的用途是：基于Astro和Tailwind CSS的JavaScript项目开发助手 详细介绍见：https://321skill.com/skills/javascript-astro-tailwind-css/ 请根据该页面的说明完成安装。
使用示例
“我需要一个使用Astro和Tailwind CSS的博客文章卡片组件，要求有图片、标题、摘要和阅读更多链接，并支持暗色模式切换。”，它会生成完整的组件代码，包含响应式布局和暗色模式相关的Tailwind CSS类。或者
对AI说：“我的Astro项目在生产构建后Tailwind样式丢失了，可能是什么原因？”，它会引导你检查配置文件，并给出常见的排查步骤和解决方案。
介绍
这个Skill专为使用Astro和Tailwind CSS的JavaScript开发者设计，旨在简化现代前端项目的开发流程。它通过提供针对性的代码片段、配置指导和最佳实践，帮助开发者快速搭建和优化项目结构，解决从初始化到部署过程中的常见问题。
Skill通过理解开发者的自然语言指令，能够生成特定功能的Astro组件、配置Tailwind CSS主题、优化构建配置，或解答关于这两个技术栈集成的疑问。它就像一个随时待命的技术伙伴，能根据你的项目上下文提供精准帮助。
它非常适合正在构建静态站点、博客、营销页面或需要高性能、SEO友好的Web应用的前端开发者。无论是项目起步阶段需要脚手架，还是开发过程中遇到样式或构建难题，都可以向其求助。
建议在明确项目需求和技术栈（Astro + Tailwind CSS）后使用本Skill。对于复杂的、超出这两个框架范畴的问题，可能需要结合其他工具或查阅官方文档。使用前确保已了解项目的基本结构，以便提供更准确的上下文。
核心特点
与通用前端开发Skill相比，它深度聚焦于Astro框架与Tailwind CSS工具链的集成开发，能提供两者结合时的特定解决方案，如Astro Islands与Tailwind的协同优化、SSG/SSR配置下的样式处理等。
注意事项
不适合处理与Astro或Tailwind CSS无关的后端逻辑、数据库操作或其他前端框架（如React、Vue的独立应用）的深度开发问题。
常见问题
如何用这个Skill快速创建一个Astro页面组件？
直接描述你想要的页面功能和样式，Skill会生成包含Tailwind CSS类名的Astro组件代码。
它能帮我优化Tailwind CSS的生产构建体积吗？
可以，它能提供PurgeCSS配置建议、分析未使用的样式，并给出针对Astro项目的优化方案。