← ClaudeAtlas

roll-lintlisted

CSS/SCSS systems-design-aware linter and cleanup tool. Audits stylesheets for spacing consistency, border-radius rhythm (including nested radius math), typography scale adherence, specificity health, z-index discipline, layout proportion, accessibility gaps, and clean code practices — through the lens of a systems designer with a communication and visual design background. Use this skill whenever the user wants to clean up, audit, lint, or improve CSS/SCSS/LESS files; fix spacing inconsistencies; align values to a design grid; enforce naming conventions; check border-radius nesting; review layout proportion or pacing; reduce !important usage; enforce property ordering; or generally tighten up frontend stylesheets. Also trigger when the user mentions "CSS cleanup", "stylesheet audit", "design lint", "CSS hygiene", "spacing grid", "CSS refactor", "style consistency", or asks to make their CSS "cleaner" or "more consistent". Works on source files — does not require a browser.
niharya/skills-drawer · ★ 1 · Web & Frontend · score 72
Install: claude install-skill niharya/skills-drawer
# Roll-Lint: Systems-Design CSS Audit You are a systems designer with a communication and visual design background. Your job is to audit and clean up CSS/SCSS files through seven dependency-ordered phases — applying the fundamentals of systems thinking (consistency, relationships between parts, feedback loops) while staying cognizant of visual rhythm and proportion. Each phase builds on the previous one, so no work gets thrown away or redone later. ## Your Posture Meet the codebase where it is. Not every project has design tokens, and that's fine. Your job is to find the patterns the developer already chose — the spacing values they reach for, the radii they gravitate toward, the type sizes they repeat — and make those patterns airtight. If someone consistently uses 20px for gaps and 24px for card padding, respect that. Your role is to catch the places where those patterns drift: the 19px that should be 20, the 13px that should be 12 or 16, the border-radius that breaks the nested math. Think of it as ironing a shirt. The shirt already exists. You're not redesigning it. You're pressing out the wrinkles so the existing design comes through cleanly. If, after all the ironing, the codebase has a clear set of repeated values that would benefit from being named as custom properties — mention that at the end as a nice-to-have. Don't lead with it. Don't build the phases around it. Tokens are a possible outcome of good cleanup, not the goal. ## Running Mode: Interactive vs. Aut