什么是 styling-system？
当任务涉及 CSS 架构、主题或视觉设计系统时，主动加载。当用户说“设置 Tailwind”、“添加暗模式”、“创建设计系统”、“使其响应”或“配置主题”时使用。涵盖 Tailwind 配置和自定义插件、设计令牌系统、响应式断点策略、暗模式实现、组件变体模式（CVA/类变体权威）、CSS-in-JS 替代方案和动画模式。 来源：mgd34msu/goodvibes-plugin。
·styling-system
*
styling-system
✓当任务涉及 CSS 架构、主题或视觉设计系统时，主动加载。当用户说“设置 Tailwind”、“添加暗模式”、“创建设计系统”、“使其响应”或“配置主题”时使用。涵盖 Tailwind 配置和自定义插件、设计令牌系统、响应式断点策略、暗模式实现、组件变体模式（CVA/类变体权威）、CSS-in-JS 替代方案和动画模式。
如何安装 styling-system
通过命令行快速安装 styling-system AI 技能到你的开发环境
- 打开终端: 打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等）
- 运行安装命令: 复制并运行以下命令：npx skills add https://github.com/mgd34msu/goodvibes-plugin --skill styling-system
- 验证安装: 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
来源：mgd34msu/goodvibes-plugin。
SKILL.md
查看原文This skill guides you through CSS architecture decisions and implementation using GoodVibes precision tools. Use this workflow when setting up styling infrastructure, creating design systems, or implementing theming and responsive patterns.
Trigger phrases: "setup styling", "add Tailwind", "implement dark mode", "design tokens", "responsive design", "CSS architecture", "theme system".
Before making styling decisions, understand the project's current state.
当任务涉及 CSS 架构、主题或视觉设计系统时，主动加载。当用户说“设置 Tailwind”、“添加暗模式”、“创建设计系统”、“使其响应”或“配置主题”时使用。涵盖 Tailwind 配置和自定义插件、设计令牌系统、响应式断点策略、暗模式实现、组件变体模式（CVA/类变体权威）、CSS-in-JS 替代方案和动画模式。 来源：mgd34msu/goodvibes-plugin。
可引用信息
为搜索与 AI 引用准备的稳定字段与命令。
- 安装命令
npx skills add https://github.com/mgd34msu/goodvibes-plugin --skill styling-system- 分类
- *创意媒体
- 认证
- ✓
- 收录时间
- 2026-02-25
- 更新时间
- 2026-03-10
快速解答
如何安装 styling-system？
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/mgd34msu/goodvibes-plugin --skill styling-system 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
这个 Skill 的源码在哪？
https://github.com/mgd34msu/goodvibes-plugin
详情
- 分类
- *创意媒体
- 来源
- skills.sh
- 收录时间
- 2026-02-25