React (Styled Components)
一个帮助开发者使用 Styled Components 编写 React 组件的 AI 技能。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：React (Styled Components)。 它的用途是：一个帮助开发者使用 Styled Components 编写 React 组件的 AI 技能。 详细介绍见：https://321skill.com/skills/react-styled-components/ 请根据该页面的说明完成安装。
使用示例
“我需要一个响应式的导航栏组件，使用 Styled Components，在移动端折叠为汉堡菜单，主题色从 props 传入。”，它会生成包含 Styled Components 样式定义、媒体查询和动态属性处理的完整 React 组件代码。或者，你可以说：“帮我修复这个 Styled Component，它的 &:hover 样式好像没生效。”，AI 会分析代码并提供修正建议。
介绍
这个技能旨在解决开发者在编写 React 应用时，使用 Styled Components 进行 CSS-in-JS 样式化所遇到的效率问题。它可以帮助你快速生成样式组件代码、解决常见样式问题，并遵循 Styled Components 的最佳实践。
使用时，你可以直接向 AI 描述你想要创建的 UI 组件及其样式需求，例如“创建一个带悬停效果的按钮组件”，AI 会生成相应的 Styled Components 代码。它也能协助你处理主题（Theme）、全局样式、动态属性等复杂场景。
它非常适合正在使用或计划使用 Styled Components 进行 React 开发的前端工程师、全栈开发者，尤其是那些希望提升 UI 开发效率和代码质量的团队或个人。
建议在使用时，尽量清晰地描述你的组件结构、样式细节（如颜色、间距、状态）以及是否需要复用或继承现有样式。对于非常复杂的动画或性能关键场景，建议结合官方文档和性能分析工具进行手动优化。
核心特点
与通用的 React 代码生成技能不同，本技能深度集成了 Styled Components 的语法特性和最佳实践，能够生成更符合该库范式、可维护性更高的样式组件代码，并直接处理主题提供者（ThemeProvider）、属性适配等 Styled Components 特有的概念。
注意事项
不适合需要生成纯 CSS、Tailwind CSS 或其他 CSS-in-JS 库（如 Emotion）代码的场景，也不擅长处理与 Styled Components 无关的复杂业务逻辑。
常见问题
这个技能能帮我将现有的 CSS 代码转换成 Styled Components 吗？
可以，你可以提供 CSS 代码片段，并请求将其转换为 Styled Components 语法。
它支持 Styled Components 的最新版本和特性吗？
技能知识更新至2024年7月，支持 v6 等主流版本的核心特性，但极新的实验性功能可能未被涵盖。