css-debug SKILL.md skillA
css-debug from majiayu000/spellbook is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add majiayu000/spellbook/css-debug@git:20260306.9e556b1Pins git:20260306.9e556b1 in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- majiayu000/spellbook
- Path
skills/css-debug/SKILL.md- Versions recorded
- 1
- Latest version
- git:20260306.9e556b1, committed Mar 6, 2026
- Size
- 6,046 bytes
- Repository stars
- 290
- License
- MIT
Use this skill to diagnose CSS and frontend layout issues such as positioning, overflow clipping, Tailwind class conflicts, z-index stacking, and React rendering visibility problems.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# CSS Debug Skill <command-name>css-debug</command-name> <user-invocable>true</user-invocable> ## 使用场景 当用户遇到以下问题时使用此 skill： - CSS 定位问题（元素位置不正确、被裁剪、溢出等） - React 组件渲染问题 - Tailwind CSS 类不生效 - 绝对定位/相对定位问题 - Flexbox/Grid 布局问题 - z-index 层叠问题 ## 调试步骤 ### 1. 收集信息 首先向用户询问或获取： - 浏览器开发者工具中的 HTML 结构 - 相关元素的 computed styles - 父容器的 CSS 属性（特别是 position、overflow、display） - 截图（如果有的话） ### 2. 常见问题检查清单 #### 绝对定位内容被裁剪 ``` 问题：position: absolute 的元素被父容器裁剪 检查： - [ ] 父容器是否有 overflow: hidden 或 overflow: auto - [ ] 祖先容器是否有 overflow: hidden - [ ] 父容器是否设置了 position: relative - [ ] 元素的 top/left/right/bottom 值是否超出父容器 解决方案： 1. 将 overflow: hidden 改为 overflow: visible 2. 或将绝对定位元素移到更外层的容器 3. 或使用 fixed 定位（相对于视口） ``` #### 元素位置偏移 ``` 问题：元素位置与预期不符 检查： - [ ] positionX/positionY 或 left/top 值是否正确 - [ ] 最近的 position: relative 祖先是哪个 - [ ] 是否有 margin/padding 影响 - [ ] transform 是否影响定位上下文 解决方案： 1. 确认定位参考点是正确的祖先元素 2. 检查 CSS 单位（px vs % vs rem） 3. 使用浏览器检查器的"元素选择"功能定位问题 ``` #### 内容不显示 ``` 问题：React 组件渲染但内容不可见 检查： - [ ] 元素是否有 width/height（可能为 0） - [ ] opacity 是否为 0 - [ ] visibility 是否为 hidden - [ ] display 是否为 none - [ ] z-index 是否被其他元素遮挡 - [ ] color 是否与背景色相同 解决方案： 1. 在开发者工具中检查 Computed 面板 …
Read the whole file at its exact version.
How to install
mdr add majiayu000/spellbook/css-debug@sha256:38bfe7d7ab0bcd46The line at the top of this page pins the label git:20260306.9e556b1, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_edtg5xfatk5s6edk)
3 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 1 version of this file, committed on Mar 6, 2026.
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (6046 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
majiayu000/spellbook · 290 stars · license MIT · pushed 2026-11-04 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_edtg5xfatk5s6edk GET https://markdownregistry.com/api/v1/resolve?ref=majiayu000/spellbook/css-debug GET https://markdownregistry.com/api/v1/blob/38bfe7d7ab0bcd4671f2bf04b7ea25b28b588994d4f4709aeedf345d56d8cda0
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.