编写 CSS 时没有一致的方法论会导致维护性问题，并造成项目之间样式不一致。本技能提供关于应用行业标准方法（如 Tailwind、BEM 和 CSS Modules）的结构化指导，确保样式表干净、可维护且可扩展。
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"frontend-css" 사용 중입니다. 为带下拉菜单的导航组件应用响应式设计样式
예상 결과:
- BEM 类命名：.nav、.nav__item、.nav__link、.nav__dropdown
- Tailwind 方法：flex、悬停效果、带 md: 前缀的响应断点
- 移动优先媒体查询用于小屏幕的汉堡菜单
"frontend-css" 사용 중입니다. 创建带阴影和悬停提升效果的卡片组件
예상 결과:
- CSS 方法：卡片类使用 box-shadow 属性和 transform 过渡
- Tailwind 方法：shadow-lg、hover:shadow-xl、hover:-translate-y-1
- 设计令牌建议：将阴影值提取到语义令牌集
"frontend-css" 사용 중입니다. 为设计系统设置间距比例
예상 결과:
- 定义间距令牌：space-1 到 space-8，使用 4px 基准单位
- Tailwind 配置：使用语义名称扩展 theme.spacing
- 使用边距/填充工具类或 CSS 自定义属性一致地应用
보안 감사
안전This is a pure documentation skill containing only YAML frontmatter and markdown files. No executable code, scripts, network calls, or filesystem access beyond reading its own documentation files. All 37 static findings are false positives triggered by URL strings in metadata, relative path references in documentation, and hex strings in hash identifiers.
위험 요인
🌐 네트워크 접근 (1)
📁 파일 시스템 액세스 (4)
품질 점수
만들 수 있는 것
维护一致的样式
在为 React、Vue 或原生项目编写新 CSS 组件时，应用 BEM 或工具优先方法论。
定义设计令牌
使用设计令牌模式创建一致的颜色调色板、间距比例和排版系统。
配置 Tailwind CSS
使用自定义颜色、响应断点和工具类设置和自定义 Tailwind 配置文件。
이 프롬프트를 사용해 보세요
使用 BEM 方法论为按钮组件编写 CSS，包含悬停和聚焦状态。
将此弹性盒布局转换为带有响应断点的 Tailwind CSS 工具类。
为包含主色、辅助色和语义色的颜色系统创建设计令牌结构。
审查此 CSS 文件并将其重构为遵循工具优先原则，然后建议如何优化生产环境。
모범 사례
- 使用描述目的（而非外观）的语义类名
- 从移动优先样式开始，添加响应断点
- 将重复值提取到设计令牌中以保持一致性
피하기
- 使用内联样式而非工具类或 CSS 类
- 过度嵌套的选择器导致特异性冲突
- 硬编码魔法数字而非使用设计令牌