Menu
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/microwind/ai-skills --skill cssThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Based on SOC occupation classification
Showing 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()