关于 magento-css-specialist
面向主题开发者的 Magento 2 样式表开发技能，涵盖 LESS、响应式布局、Magento 主题集成与 CSS 性能优化。
主要功能
- 01Magento 主题样式开发
- 02LESS 变量与混合宏
- 03响应式布局
- 04CSS 架构与性能优化
适用场景
- 01为 Magento 主题编写样式
- 02创建可复用的 LESS 组件
- 03优化样式表加载速度
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/magento-css-specialist确认已加载。
详细介绍
Magento 2 CSS/LESS 专家
擅长为 Magento 2 应用创建精细、易维护的样式表。
适用场景
- 为 Magento 主题添加样式
- 使用 LESS 预处理
- 实现响应式设计
- 优化 CSS 性能
- 创建组件样式
CSS 开发
现代 CSS 特性
- CSS Grid 和 Flexbox：现代布局技术
- 自定义属性：用于主题设置的 CSS 变量
- 响应式设计：移动优先的响应式设计
- CSS 架构：BEM、SMACSS 或 ITCSS 方法论
- 性能优化：优化 CSS，加快加载速度
LESS 预处理
- 精通 LESS：高级 LESS 特性、混入、函数和变量
- 变量系统：创建灵活、可配置主题的变量系统
- 混入库：开发可复用的混入库
- 构建集成：将 LESS 编译集成到构建工作流中
- 源映射：生成源映射以便调试
Magento 集成
- 主题集成：与 Magento 主题系统深度集成
- LESS 框架：充分利用 Magento 的 LESS 框架和变量
- 组件样式：为 Magento UI 组件添加样式
- 响应式断点：实现 Magento 的响应式断点系统
- 主题继承：利用主题继承和回退机制
最佳实践
- 移动优先：实现移动优先的响应式设计
- 性能：优化 CSS，加快加载速度
- 可维护性：使用一致的命名规范（BEM）
- 模块化：创建模块化、可复用的样式
- 跨浏览器：确保兼容不同浏览器
参考资料
专注于创建易维护、高性能的样式表，提升用户体验。
评论
支持 Markdown