Menü
样式编写技能。当用户需要编写CSS样式、使用Tailwind CSS、实现响应式布局、或询问如何组织样式代码时使用此skill。
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | styling |
| description | 样式编写技能。当用户需要编写CSS样式、使用Tailwind CSS、实现响应式布局、或询问如何组织样式代码时使用此skill。 |
前端样式编写指导，帮助 AI 完成 CSS 编写、样式方案选择、响应式布局等任务。
| 能力 | 说明 |
|---|---|
| 🎨 CSS 编写 | 原生 CSS/SCSS/Less |
| 🌊 Tailwind | 原子化 CSS |
| 📦 CSS Modules | 模块化样式 |
| 💅 CSS-in-JS | styled-components |
| 📱 响应式 | 移动端适配 |
| 方案 | 优点 | 缺点 | 推荐场景 |
|---|---|---|---|
| CSS Modules | 作用域隔离 | 类名动态 | 通用 |
| Tailwind | 快速开发 | 类名长 | 快速原型 |
| styled-components | 动态样式 | 运行时开销 | 主题切换 |
| SCSS | 功能强大 | 需编译 | 大型项目 |
<!-- 布局 -->
<div class="flex items-center justify-between gap-4">
<div class="grid grid-cols-3 gap-4">
<!-- 间距 -->
<div class="p-4 m-2 px-6 py-3">
<!-- 尺寸 -->
<div class="w-full h-screen max-w-md min-h-[200px]">
<!-- 颜色 -->
<div class="bg-blue-500 text-white hover:bg-blue-600">
<!-- 响应式 -->
<div class="w-full md:w-1/2 lg:w-1/3">
<!-- 暗黑模式 -->
<div class="bg-white dark:bg-gray-800">
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: '#1890ff',
},
spacing: {
'18': '4.5rem',
},
},
},
};
// Button.module.css
.button {
padding: 8px 16px;
border-radius: 4px;
}
.primary {
background: #1890ff;
color: white;
}
// Button.tsx
import styles from './Button.module.css';
function Button({ variant = 'primary' }) {
return (
<button className={`${styles.button} ${styles[variant]}`}>
Click
</button>
);
}
/* 移动优先 */
.container { width: 100%; }
@media (min-width: 768px) {
.container { width: 750px; }
}
@media (min-width: 1024px) {
.container { width: 970px; }
}
<div class="
text-sm /* 默认 */
md:text-base /* >= 768px */
lg:text-lg /* >= 1024px */
">
✅ 推荐：
- 使用 CSS 变量
- 移动优先设计
- 统一设计系统
- 避免 !important
❌ 避免：
- 内联样式过多
- 深层选择器嵌套
- 硬编码数值
| 类型 | 关键词示例 |
|---|---|
| CSS | "CSS样式"、"写样式"、"布局" |
| Tailwind | "Tailwind"、"原子类"、"utility" |
| 响应式 | "响应式"、"移动端"、"自适应" |
使用AI代码生成引擎MCP工具进行智能前端代码生成。当用户需要生成页面代码、创建组件、做列表页/表单页/详情页、或询问如何使用代码生成MCP工具时使用此skill。
浏览器兼容性检测技能。当用户需要检测CSS/JS兼容性、处理浏览器差异、添加polyfill、或询问如何支持旧版浏览器时使用此skill。
无障碍访问技能。当用户需要改进无障碍支持、添加ARIA属性、检查可访问性、或询问如何让网页对残障用户友好时使用此skill。
API接口对接技能。当用户需要对接接口、调用API、封装请求、处理接口数据、或询问如何进行接口集成时使用此skill。
打包优化技能。当用户需要优化打包体积、分析Bundle大小、实现代码分割、或询问如何减小构建产物时使用此skill。
代码审查技能。当用户需要审查代码、检查代码质量、发现潜在问题、评估代码规范、或询问如何改进代码时使用此skill。