用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/microwind/ai-skills --skill css命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | CSS验证器 |
| description | 当验证CSS代码时，分析CSS语法，检查样式规范，优化CSS性能。验证响应式设计，检查可访问性，和最佳实践。 |
| license | MIT |
CSS验证是保证前端样式质量的重要环节。不当的CSS会导致样式冲突、性能问题和维护困难。需要系统性的CSS验证和优化方法。
核心原则: 好的CSS应该结构清晰、性能优良、易于维护。坏的CSS会导致样式冲突、加载缓慢、难以调试。
始终:
触发短语:
问题:
CSS选择器优先级过高，难以覆盖
错误示例:
.container .section .item.special#main { color: red; } (优先级过高)
后果:
- 难以覆盖样式
- CSS代码膨胀
- 维护困难
解决方案:
1. 使用低优先级选择器
2. 采用BEM命名规范
3. 避免过度嵌套
4. 使用CSS模块化
问题:
固定宽度设计，缺少媒体查询
错误示例:
.container { width: 1200px; } /* 固定宽度 */
后果:
- 移动端显示异常
- 用户体验差
- SEO排名降低
解决方案:
1. 使用相对单位
2. 添加媒体查询
3. 采用弹性布局
4. 移动优先设计
问题:
CSS性能低效，影响页面加载
错误示例:
- 过度使用@import
- 大量重复样式
- 复杂选择器
- 未优化的动画
解决方案:
1. 减少CSS文件大小
2. 优化选择器性能
3. 使用CSS压缩
4. 优化动画性能
问题:
CSS可访问性不足，影响用户使用
错误示例:
- 颜色对比度不足
- 缺少焦点样式
- 依赖颜色传达信息
- 字体大小过小
解决方案:
1. 确保颜色对比度
2. 添加焦点指示器
3. 提供多种信息传达方式
4. 使用合适的字体大小
import re
from typing import List, Dict, Any, Optional, Tuple
from dataclasses import dataclass
from enum import Enum
class IssueSeverity(Enum):
"""问题严重程度"""
ERROR = "error"
WARNING = "warning"
INFO = "info"
class IssueCategory(Enum):
"""问题类别"""
SYNTAX = "syntax"
PERFORMANCE = "performance"
ACCESSIBILITY = "accessibility"
BEST_PRACTICE = "best_practice"
@dataclass
class CSSIssue:
"""CSS问题"""
line_number: int
column: int
severity: IssueSeverity
category: IssueCategory
message: str
suggestion: str
rule_id: str
@dataclass
class ValidationResult:
"""验证结果"""
file_path: str
issues: List[CSSIssue]
metrics: Dict[str, Any]
score: float
class CSSValidator:
def __init__():
.issues: [CSSIssue] = []
.css_rules = []
() -> ValidationResult:
.issues = []
.css_rules = ._parse_css(css_content)
._check_syntax(css_content)
._check_performance(css_content)
._check_accessibility(css_content)
._check_best_practices(css_content)
metrics = ._calculate_metrics(css_content)
score = ._calculate_score()
ValidationResult(
file_path=file_path,
issues=.issues,
metrics=metrics,
score=score
)
() -> [[, ]]:
rules = []
selector_pattern =
matches = re.finditer(selector_pattern, css_content, re.MULTILINE)
matches:
selector = .group().strip()
properties = .group().strip()
rules.append({
: selector,
: properties,
: css_content[:.start()].count() +
})
rules
() -> :
lines = css_content.split()
line_num, line (lines, ):
line = line.strip()
line line.startswith():
line:
selector_part = line.split()[].strip()
._is_valid_selector(selector_part):
.issues.append(CSSIssue(
line_number=line_num,
column=,
severity=IssueSeverity.ERROR,
category=IssueCategory.SYNTAX,
message=,
suggestion=,
rule_id=
))
line line.startswith():
._is_valid_property(line):
.issues.append(CSSIssue(
line_number=line_num,
column=,
severity=IssueSeverity.ERROR,
category=IssueCategory.SYNTAX,
message=,
suggestion=,
rule_id=
))
() -> :
lines = css_content.split()
line_num, line (lines, ):
line = line.strip()
._has_high_specificity(line):
.issues.append(CSSIssue(
line_number=line_num,
column=,
severity=IssueSeverity.WARNING,
category=IssueCategory.PERFORMANCE,
message=,
suggestion=,
rule_id=
))
expensive_props = [, , , ]
prop expensive_props:
prop line line:
.issues.append(CSSIssue(
line_number=line_num,
column=,
severity=IssueSeverity.INFO,
category=IssueCategory.PERFORMANCE,
message=,
suggestion=,
rule_id=
))
() -> :
lines = css_content.split()
line_num, line (lines, ):
line = line.strip()
line (unit line unit [, ]):
.issues.append(CSSIssue(
line_number=line_num,
column=,
severity=IssueSeverity.WARNING,
category=IssueCategory.ACCESSIBILITY,
message=,
suggestion=,
rule_id=
))
line (keyword css_content keyword [, , ]):
.issues.append(CSSIssue(
line_number=line_num,
column=,
severity=IssueSeverity.WARNING,
category=IssueCategory.ACCESSIBILITY,
message=,
suggestion=,
rule_id=
))
() -> :
lines = css_content.split()
line_num, line (lines, ):
line = line.strip()
line:
.issues.append(CSSIssue(
line_number=line_num,
column=,
severity=IssueSeverity.WARNING,
category=IssueCategory.BEST_PRACTICE,
message=,
suggestion=,
rule_id=
))
line line:
selector = line.split()[].strip()
id_count = selector.count()
id_count > :
.issues.append(CSSIssue(
line_number=line_num,
column=,
severity=IssueSeverity.WARNING,
category=IssueCategory.BEST_PRACTICE,
message=,
suggestion=,
rule_id=
))
() -> :
selector:
invalid_chars = [, , , , , , ]
(char selector char invalid_chars)
() -> :
line:
parts = line.split(, )
(parts) != :
property_name = parts[].strip()
property_value = parts[].strip()
re.(, property_name):
property_value property_value.endswith():
() -> :
line:
selector = line.split()[].strip()
id_count = selector.count()
class_count = selector.count()
element_count = (re.findall(, selector)) - class_count
id_count > class_count > element_count >
() -> [, ]:
lines = css_content.split()
metrics = {
: (lines),
: (.css_rules),
: ( rule .css_rules rule[]),
: ((rule[].split()) rule .css_rules),
: {
severity.value: ([issue issue .issues issue.severity == severity])
severity IssueSeverity
},
: {
category.value: ([issue issue .issues issue.category == category])
category IssueCategory
}
}
metrics[] = ._calculate_average_specificity()
metrics[] = ._estimate_unused_percentage()
metrics
() -> :
.css_rules:
total_specificity =
rule .css_rules:
selector = rule[]
specificity = ._calculate_specificity(selector)
total_specificity += specificity
total_specificity / (.css_rules)
() -> :
id_count = selector.count()
class_count = selector.count()
element_count = (re.findall(, selector)) - class_count
id_count * + class_count * + element_count
() -> :
() -> :
score =
severity_weights = {
IssueSeverity.ERROR: ,
IssueSeverity.WARNING: ,
IssueSeverity.INFO:
}
issue .issues:
score -= severity_weights[issue.severity]
(, score)
:
():
.optimizations = []
() -> :
optimized = css_content
optimized = ._remove_comments(optimized)
optimized = ._minify_whitespace(optimized)
optimized = ._merge_selectors(optimized)
optimized = ._remove_unused_css(optimized)
optimized = ._optimize_colors(optimized)
optimized
() -> :
re.sub(, , css_content, flags=re.DOTALL)
() -> :
css_content = re.sub(, , css_content)
css_content = re.sub(, , css_content)
css_content = re.sub(, , css_content)
css_content = re.sub(, , css_content)
css_content.strip()
() -> :
css_content
() -> :
css_content
() -> :
css_content = re.sub(, , css_content)
css_content
():
sample_css =
validator = CSSValidator()
result = validator.validate_css(sample_css, )
()
()
()
()
()
issue result.issues:
()
()
()
()
()
metric, value result.metrics.items():
(value, ):
()
k, v value.items():
()
:
()
()
optimizer = CSSOptimizer()
optimized_css = optimizer.optimize_css(sample_css)
()
(optimized_css)
__name__ == :
main()
from typing import List, Dict, Any
class CSSChecklistGenerator:
def __init__(self):
self.checklist_items = []
def generate_checklist(self, project_type: str = "web") -> List[Dict[str, Any]]:
"""生成CSS检查清单"""
checklist = []
# 语法检查
checklist.extend(self._get_syntax_checks())
# 性能检查
checklist.extend(self._get_performance_checks())
# 可访问性检查
checklist.extend(self._get_accessibility_checks())
# 最佳实践检查
checklist.extend(self._get_best_practice_checks())
# 项目特定检查
if project_type == "mobile":
checklist.extend(self._get_mobile_specific_checks())
elif project_type == "enterprise":
checklist.extend(self._get_enterprise_specific_checks())
return checklist
def _get_syntax_checks(self) -> List[Dict[str, Any]]:
"""获取语法检查项"""
[
{
: ,
: ,
: ,
: ,
:
},
{
: ,
: ,
: ,
: ,
:
},
{
: ,
: ,
: ,
: ,
:
}
]
() -> [[, ]]:
[
{
: ,
: ,
: ,
: ,
:
},
{
: ,
: ,
: ,
: ,
:
},
{
: ,
: ,
: ,
: ,
:
}
]
() -> [[, ]]:
[
{
: ,
: ,
: ,
: ,
:
},
{
: ,
: ,
: ,
: ,
:
},
{
: ,
: ,
: ,
: ,
:
}
]
() -> [[, ]]:
[
{
: ,
: ,
: ,
: ,
:
},
{
: ,
: ,
: ,
: ,
:
},
{
: ,
: ,
: ,
: ,
:
}
]
() -> [[, ]]:
[
{
: ,
: ,
: ,
: ,
:
},
{
: ,
: ,
: ,
: ,
:
}
]
() -> [[, ]]:
[
{
: ,
: ,
: ,
: ,
:
},
{
: ,
: ,
: ,
: ,
:
}
]
() -> :
== :
._export_markdown(checklist)
== :
._export_json(checklist)
:
(checklist)
() -> :
output = []
current_category =
item checklist:
item[] != current_category:
current_category = item[]
output.append()
output.append()
output.append()
output.append()
.join(output)
() -> :
json
json.dumps(checklist, indent=, ensure_ascii=)
():
()
generator = CSSChecklistGenerator()
web_checklist = generator.generate_checklist()
markdown_checklist = generator.export_checklist(web_checklist, )
()
(markdown_checklist)
mobile_checklist = generator.generate_checklist()
()
item mobile_checklist[-:]:
()
__name__ == :
main()