CSS样式引擎(免费版)

核心功能: 本技能提供中文交互、化工作流场景等能力。

CSS样式引擎(免费版)

CSS样式与布局辅助引擎，覆盖现代CSS布局、动画效果、响应式设计与组件样式生成。

依赖说明

运行环境

• Agent平台: 支持SKILL.md的任意AI Agent（Claude Code / Cursor / Codex / Gemini CLI等）
• 操作系统: Windows / macOS / Linux

依赖项

API Key 配置

需要配置对应API Key，详见上文环境配置章节

可用性分类

• 分类: MD+EXEC（）

API Key配置方式:

export API_KEY="${API_KEY:?请设置环境变量}"

配置后需重启会话或开启新终端生效。API Key应妥善保管,避免泄露到版本控制系统。

核心能力

1. 现代CSS布局

/* Flexbox 居中 */
.center { display: flex; align-items: center; justify-content: center; }

/* Grid 响应式网格 */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Holy Grail 布局 */
.holy-grail {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  min-height: 100vh;
}

/* Container Queries */
@container sidebar (min-width: 400px) {
  .card { flex-direction: row; }
}

输出: 返回现代CSS布局的执行结果,包含操作状态和输出数据。

2. CSS动画与过渡效果

/* 过渡效果 */
.btn { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }

/* @keyframes 动画 */
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
.animate-slide-in { animation: slideIn 0.5s ease-out forwards; }

/* Scroll-driven Animations */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.scroll-fade {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

输出: 返回CSS动画与过渡效果的执行结果,包含操作状态和输出数据。- 验证执行结果,确认输出符合预期格式

• 异常时参考错误处理章节进行恢复
• 关键参数: css动画与过渡效果 选项

3. 响应式设计

/* 移动优先断点策略 */
.container {
  width: 100%;
  padding: 1rem;
}
@media (min-width: 768px) {
  .container { max-width: 720px; padding: 2rem; }
}
@media (min-width: 1024px) {
  .container { max-width: 960px; }
}

/* 暗色模式 */
:root { --bg: #ffffff; --text: #1a1a1a; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f172a; --text: #f1f5f9; }
}

/* clamp() 流体排版 */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }

输出: 返回响应式设计的执行结果,包含操作状态和输出数据。- 验证执行结果,确认输出符合预期格式

• 异常时参考错误处理章节进行恢复
• 关键参数: 响应式设计 选项

4. 组件样式生成

支持多种CSS方法论：

• BEM：.block__element--modifier
• CSS Modules：局部作用域类名
• Tailwind：工具类组合
• CSS-in-JS：styled-components/emotion模式

输出: 返回组件样式生成的执行结果,包含操作状态和输出数据。

适用场景

不适用于：Canvas/WebGL渲染、SVG路径动画、CSS预处理器编译。

使用流程

1. 明确布局需求（类型/响应式/浏览器兼容性）
2. 选择CSS方法论（原生/BEM/Tailwind/CSS Modules）
3. 生成CSS代码（含兼容性注释）
4. 提供HTML结构配合示例
5. 标注浏览器兼容性要求

示例

示例1：响应式卡片网格

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
}

.card {
  background: var(--surface, #fff);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

@media (max-width: 640px) {
  .card-grid { grid-template-columns: 1fr; padding: 1rem; }
}

错误处理

常见问题

Q1: Flexbox和Grid什么时候用哪个？

Flexbox用于一维布局（行或列），适合导航栏、工具栏、按钮组、卡片内容排列。Grid用于二维布局（行和列同时控制），适合页面整体布局、画廊网格、仪表盘面板。经验法则：如果需要在两个方向上对齐和控制间距用Grid，如果只是沿一个方向排列用Flexbox。两者可以嵌套使用——Grid控制页面布局，Flexbox控制组件内部排列。

Q2: 如何实现真正的垂直居中？

现代CSS推荐三种方式：1) Flexbox：display: flex; align-items: center; justify-content: center;（最常用）；2) Grid：display: grid; place-items: center;（最简洁）；3) 绝对定位+transform：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);（兼容性优质但需定位上下文）。避免使用line-height或vertical-align，它们只适用于行内元素。

Q3: Tailwind和手写CSS如何选择？

Tailwind适合快速原型开发和团队协作（工具类即标准），减少命名负担。手写CSS适合需要高度定制动画、复杂选择器、CSS变量主题系统的场景。混合策略：用Tailwind处理布局和间距（flex gap-4 p-6），用@layer components或CSS文件处理复杂组件样式和动画。如果项目已有设计系统token，Tailwind配置映射token值可两者兼得。

已知限制

• 无法实时预览渲染效果（仅输出代码）
• 浏览器兼容性需用户自行测试
• CSS-in-JS方案需配合对应框架运行

升级提示

本免费版提供基础功能。升级到完整版 css 获取全部能力和高级特性。

安全注意事项

使用前请确认已阅读依赖说明章节，确保运行环境满足安全要求。

效率量化分析

差异化对比

核心功能

• 自动化执行: 基于指令驱动的自动化流程
• 文件处理: 支持多种文件格式的读取、解析和写入操作
• API集成: 通过标准化接口调用外部服务并处理响应
• 命令执行: 在安全沙箱中执行系统命令并收集结果
• 信息检索: 快速搜索和过滤目标数据