围绕 CSS 机制排查问题并编写组件样式表,而不是凭感觉试错。
作者 Iván99 次安装5 星标
编程
Axiom Css Specificity
试用CSS specificity calculator — compute (a, b, c) specificity for any CSS selector. Handles :is(), :not(), :where(), combinators, attribute selectors. Use when...
它能做什么
CSS specificity calculator — compute (a, b, c) specificity for any CSS selector. Handles :is(), :not(), :where(), combinators, attribute selectors. Use when you need to debug CSS conflicts. Pure stdlib, no LLM.
技能文档
axiom-css-specificity
Version: 0.1.2 Axioma Tools
Computes CSS specificity per W3C Selectors Level 4.
What this skill does
- Computes (a, b, c) tuple per W3C spec
- Handles :is(), :not(), :where() (where() = 0)
- Handles attribute selectors, pseudo-classes
- Supports combinators (>, +, ~, descendant)
- JSON output with breakdown
When to use this skill
- ✅ Debug CSS specificity conflicts
- ✅ Audit CSS for overly-broad selectors
- ✅ Compare specificity of two rules
- ❌ Render CSS (use a browser)
- ❌ Support CSS preprocessor syntax (SCSS/Less)
Usage
python3 axiom_css_specificity.py "body div#main .item:first-child"
python3 axiom_css_specificity.py --compare "a" "div.menu a"
from axiom_css_specificity import compute_specificity
compute_specificity('div#main a:hover') # (0, 2, 2)
Validation
| Check | Status |
|---|---|
| Unit tests | 18 cases |
| Performance | <100ms |
| Security | Pure stdlib, no injection |
| Determinism | Byte-to-byte stable |
| License | Apache-2.0 |
Last updated: 2026-06-14
相关技能
Regex visualizer — parse any regex and visualize its structure (groups, quantifiers, anchors, character classes). Use when you need to understand or document...
4 次安装
Crawl and analyze a website's visual design system from a given URL, identifying design style, color system, typography, component styles, and UI patterns.
10 次安装
Audit a design system for consistency, coverage, and quality. Use when asked to audit a design system, review a component library, assess design token covera...
Improve websites and web apps with clearer layout, better visual hierarchy, modern UI styling, responsive checks, and polished frontend design suggestions or code changes.
2 次安装1 星标
A highly customizable UI design specification system based on headless component libraries (shadcn/ui, Radix UI), integrating Apple HIG, Microsoft Fluent, and Google Material Design. Unlike using off-the-shelf frameworks (Ant Design, Element Plus), this skill is for scenarios requiring full control over component styles and DOM structure, emphasizing design freedom and brand customization. Use when: generating custom UI code, reviewing custom UI designs, or needing to follow platform-specific design guidelines. Supports HIG / Fluent / Material / All specification modes. Keywords: shadcn/ui, Radix UI, headless, custom components, HIG, Fluent, Material Design.