fix: cheatsheet sync guard + 15 stale/wrong cheatsheet entries#14
Merged
codeslash-net merged 3 commits intomainfrom May 3, 2026
Merged
fix: cheatsheet sync guard + 15 stale/wrong cheatsheet entries#14codeslash-net merged 3 commits intomainfrom
codeslash-net merged 3 commits intomainfrom
Conversation
- .section--bold: update description to reflect full token cascade (--color-text, --color-text-body, --color-text-muted, all --color-link-*, --color-border) not just color: - .text-info: fix description from var(--info) to var(--info-600) with WCAG AA rationale - .bg-primary/secondary/accent: update descriptions to reflect full contextual cascade including color:, --color-link-hover/visited/active, --color-text-body - .bg-info-100: remove stale "0.5.0.0 proposed" tag (shipped) - slashedUI.openModal: update description to reflect isConnected + !open idempotency guards added in review fixes https://claude.ai/code/session_01QJs8xHtTbo2ZqjxRTiY8At
bin/check-cheatsheet-sync.sh — new semantic CI check: every .class and --token documented in cheatsheet.html must map to a real declaration in css/*.css. Checks 351 classes and 134 tokens. Exits non-zero on drift. bin/setup-hooks.sh — installs a pre-commit hook that blocks commits staging CSS/JS source files without cheatsheet.html, enforcing the "same commit" rule. Idempotent; bypass with --no-verify for pure refactors. CSS additions (found missing via sync check): - .text-default → color: var(--color-text) (slashed-utilities.css) - .bg-info-100 → background: var(--info-100) (slashed-utilities-visual.css) - .duration-fast / .duration-normal / .duration-slow (visual utils) - .ease-out / .ease-in / .ease-in-out (visual utils) - .hover-lift (translate + shadow on hover, visual utils) Cheatsheet corrections (wrong BEM names / missing implementations): - .cs-modal__header → .cs-modal__head, __footer → __foot - .cs-tab → .cs-tabs__tab, .cs-tab-panel → .cs-tabs__panel - .cs-nav-link--active removed (active state = [aria-current="page"]) - .cs-banner--sticky removed (base .cs-banner is already position:sticky) - .cs-tooltip class removed from entry (feature is [data-tooltip] attr only) CLAUDE.md: cheatsheet update rule codified under "framework-surface changes". CONTRIBUTING.md: added first-time setup section (bin/setup-hooks.sh) and check-cheatsheet-sync.sh to the pre-push verification list. https://claude.ai/code/session_01QJs8xHtTbo2ZqjxRTiY8At
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (3)
📝 WalkthroughWalkthroughAdds a cheatsheet synchronization system: a validation script and a pre-commit hook plus installer; updates contributor docs to require updating cheatsheet.html with CSS/JS surface changes; and documents/implements multiple new CSS utilities and cheatsheet content edits. ChangesCheatsheet Sync Enforcement System
CSS Utilities & Cheatsheet Content Updates
Sequence Diagram(s)sequenceDiagram
participant Developer
participant PreCommitHook as Pre-Commit Hook
participant Cheatsheet as cheatsheet.html
participant CSSFiles as CSS Sources
participant CIValidator as CI Validator
Developer->>Developer: Edit CSS/JS source files
Developer->>Developer: Stage changes (git add)
Developer->>PreCommitHook: Attempt commit
rect rgba(100, 150, 200, 0.5)
PreCommitHook->>PreCommitHook: Inspect staged paths for css/ or js/
PreCommitHook->>Cheatsheet: Check if cheatsheet.html is staged
alt cheatsheet.html NOT staged
PreCommitHook->>Developer: Reject commit (error + guidance)
else
PreCommitHook->>Developer: Allow commit
end
end
Developer->>Developer: Push to remote
rect rgba(150, 200, 100, 0.5)
CIValidator->>Cheatsheet: Parse documented .classes and --tokens
CIValidator->>CSSFiles: Grep CSS sources for each documented name
alt Missing declarations found
CIValidator->>Developer: Fail CI, list missing items
else
CIValidator->>Developer: Pass, report counts ok
end
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Review rate limit: 9/10 reviews remaining, refill in 6 minutes. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@bin/check-cheatsheet-sync.sh`:
- Around line 62-83: The classes extraction drops fraction classes and misses
shorthand variants; update the classes pipeline that reads from name_text and
produces the classes variable so it (1) stops replacing fractions with FRAC
(remove or change the sed 's/[0-9][0-9]*\/[0-9][0-9]*/FRAC/g' step) and instead
allow '/' in the class regex, (2) expand the grep -oE pattern to accept '/'
characters and leading hyphen-only variants (e.g. use a pattern that matches
either a dotted class like '\.[a-z][a-z0-9_/-]+' or a standalone variant like
'-[a-z][a-z0-9_-]+'), and (3) post-process any extracted variant that starts
with '-' by prefixing it with the most recent dotted base class (so '.border-b'
+ '-t' → '.border-b-t') before sorting/uniq; reference the name_text input and
the classes variable when making these changes.
In `@bin/setup-hooks.sh`:
- Around line 17-23: Replace the hardcoded HOOKS_DIR assignment and existence
check in setup-hooks.sh with logic that runs git rev-parse --git-path hooks to
get the active hooks path (respecting core.hooksPath), validate the command
output is non-empty, convert a relative path to an absolute path via REPO_ROOT,
leave absolute paths unchanged, then test that resultant HOOKS_DIR exists;
update the code that uses HOOKS_DIR (the variable near REPO_ROOT assignment) to
use this computed path and emit a clear error and exit if git rev-parse fails or
returns an empty value.
In `@cheatsheet.html`:
- Line 1261: The examples for the toast API use the wrong option key; update the
sample calls to the documented API by replacing any use of the "type" option
with "variant" so they match the documented signature of
slashedUI.toast(message, options) (options: { variant:
'success'|'error'|'warning'|'info', duration, urgency }). Locate the sample
usages of slashedUI.toast and change option keys accordingly so copy/paste works
with the slashedUI.toast function.
In `@css/slashed-utilities-visual.css`:
- Around line 238-243: The .hover-lift rule in slashed-utilities-visual.css is
overriding core behavior and ignoring consumer customization variables; update
the visual stylesheet to honor the core customization hooks by using the
existing CSS variables (e.g., --hover-lift-y and --hover-lift-shadow) instead of
hardcoding translate and box-shadow values so .hover-lift:hover uses
translate(0, var(--hover-lift-y)) and box-shadow: var(--hover-lift-shadow) while
keeping the transition declaration on .hover-lift to match core semantics.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: f2e07aa0-288d-4b13-9da8-a69e76641d72
📒 Files selected for processing (10)
CLAUDE.mdCONTRIBUTING.mdbin/bump-version.shbin/check-cheatsheet-sync.shbin/check-version-sync.shbin/setup-hooks.shcheatsheet.htmlcss/slashed-full.csscss/slashed-utilities-visual.csscss/slashed-utilities.css
Comment on lines
+62
to
+83
| classes=$( | ||
| printf '%s\n' "$name_text" \ | ||
| | grep -v 'slashedUI\.' \ | ||
| | sed 's/[0-9][0-9]*\/[0-9][0-9]*/FRAC/g' \ | ||
| | grep -oE '\.[a-z][a-z0-9_-]+' \ | ||
| | grep -v -- '-$' \ | ||
| | grep -vE '^\.(sm|md|lg|xl|print|dark|motion-safe|motion-reduce)$' \ | ||
| | sort -u | ||
| ) | ||
|
|
||
| # --------------------------------------------------------------------------- | ||
| # Extract --token-name tokens. | ||
| # Only process lines that are about tokens (start with -- or contain a token | ||
| # as the primary subject). Exclude lines that start with a CSS class (.) | ||
| # to avoid treating BEM modifiers (e.g. .cs-btn--icon → "--icon") as tokens. | ||
| # --------------------------------------------------------------------------- | ||
| tokens=$( | ||
| printf '%s\n' "$name_text" \ | ||
| | grep -v '^[[:space:]]*\.' \ | ||
| | grep -oE -e '--[a-z][a-z0-9_-]+' \ | ||
| | sort -u | ||
| ) |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
python - <<'PY'
import re, html
from pathlib import Path
text = Path("cheatsheet.html").read_text()
# Approximate current name extraction.
names = []
for m in re.finditer(r'<span class="name">[^<]*(?:<[^>]*>[^<]*</[^>]*>)*[^<]*</span>', text):
s = re.sub(r'<[^>]*>', '', m.group(0))
s = s.replace('span class="name">', '')
s = html.unescape(s)
names.append(s.strip())
# Current class extractor behavior.
classes = set()
for line in names:
if "slashedUI." in line:
continue
line = re.sub(r'[0-9]+/[0-9]+', 'FRAC', line)
for c in re.findall(r'\.[a-z][a-z0-9_-]+', line):
if c.endswith('-'):
continue
if c in {'.sm','.md','.lg','.xl','.print','.dark','.motion-safe','.motion-reduce'}:
continue
classes.add(c)
targets = [".border-b", ".border-t", ".border-l", ".border-r", ".w-1/2", ".w-1/3", ".w-2/3"]
for t in targets:
print(f"{t}: {'checked' if t in classes else 'NOT checked'}")
PYRepository: codeslash-net/SLASHED
Length of output: 213
🏁 Script executed:
# First, verify the file exists and check its content around the specified lines
head -100 bin/check-cheatsheet-sync.sh | tail -50Repository: codeslash-net/SLASHED
Length of output: 2252
🏁 Script executed:
# Also check if there's any usage of this in tests or documentation
find . -type f \( -name "*.md" -o -name "*.sh" \) | xargs grep -l "check-cheatsheet-sync" | head -5Repository: codeslash-net/SLASHED
Length of output: 126
🏁 Script executed:
grep -A 5 -B 5 "check-cheatsheet-sync" CONTRIBUTING.mdRepository: codeslash-net/SLASHED
Length of output: 776
🏁 Script executed:
grep -A 5 -B 5 "cheatsheet.html" CONTRIBUTING.mdRepository: codeslash-net/SLASHED
Length of output: 1551
Classes extraction skips documented shorthand variants and fraction classes, breaking the sync guarantee.
The script claims to "verify every .class documented in cheatsheet.html maps to a real declaration in css/*.css" (CONTRIBUTING.md), but the implementation has two gaps:
-
Fraction classes (e.g.,
.w-1/2,.w-1/3) are replaced with.w-FRACon line 65 before extraction, but the grep pattern on line 66 searches only for literal.[a-z][a-z0-9_-]+, so.w-FRACis never found in CSS—these classes are silently skipped. -
Shorthand variants (e.g.,
.border-b / -t / -l / -rin the cheatsheet) are only partially checked. The-t,-l,-rvariants do not start with a dot, so they are not extracted by the pattern—only the first explicit class (.border-b) is validated.
This causes false "ok" results when these documented variants are missing from css/*.css.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@bin/check-cheatsheet-sync.sh` around lines 62 - 83, The classes extraction
drops fraction classes and misses shorthand variants; update the classes
pipeline that reads from name_text and produces the classes variable so it (1)
stops replacing fractions with FRAC (remove or change the sed
's/[0-9][0-9]*\/[0-9][0-9]*/FRAC/g' step) and instead allow '/' in the class
regex, (2) expand the grep -oE pattern to accept '/' characters and leading
hyphen-only variants (e.g. use a pattern that matches either a dotted class like
'\.[a-z][a-z0-9_/-]+' or a standalone variant like '-[a-z][a-z0-9_-]+'), and (3)
post-process any extracted variant that starts with '-' by prefixing it with the
most recent dotted base class (so '.border-b' + '-t' → '.border-b-t') before
sorting/uniq; reference the name_text input and the classes variable when making
these changes.
bin/check-cheatsheet-sync.sh:
- Allow / in class extraction regex (removes FRAC substitution) so fraction
classes (.w-1/2 etc.) are extracted and checked rather than silently skipped
- Check fraction classes using grep -F against the CSS-escaped form (.w-1\/2)
rather than the ERE path, avoiding complex shell escaping
- Add comment documenting the known shorthand-variant limitation
bin/setup-hooks.sh:
- Use `git rev-parse --git-path hooks` instead of hardcoded .git/hooks so
core.hooksPath is respected; convert relative paths to absolute via REPO_ROOT
cheatsheet.html:
- Toast code sample: replace type: with variant: to match the documented API
signature (slashedUI.toast(msg, { variant: '...' }))
css/slashed-utilities-visual.css:
- .hover-lift: replace hardcoded translate/box-shadow with instance tokens
(--hover-lift-y, --hover-lift-shadow) with sensible defaults
- Wrap :hover rule in @media (hover: hover) to prevent stuck-state on touch
- Use --duration-fast (snappy hover) rather than --duration-normal
check-cheatsheet-sync: ok (357 classes, 134 tokens)
https://claude.ai/code/session_01QJs8xHtTbo2ZqjxRTiY8At
codeslash-net
pushed a commit
that referenced
this pull request
May 3, 2026
Apply the cheatsheet.html edits from PR #14 (Add cheatsheet-sync guard + fix 15 stale/wrong cheatsheet entries): - .cs-banner is now sticky-by-default; remove the .cs-banner--sticky card and update .cs-banner description to reflect the default position behaviour. - Tooltip: remove the .cs-tooltip class form (no such class exists); show only [data-tooltip] with anchor-positioning + ::after fallback. - slashedUI.toast(): update options signature to { variant, duration, urgency } and document the role="alert" vs role="status" behaviour. - slashedUI.initStagger(): describe as a polyfill for browsers that lack native sibling-index() — CSS path runs automatically on Chrome 130+ / FF 131+ / Safari 18+. - Add Nav-dropdown keyboard navigation entry (Arrow / Home / End / first-letter / Escape) — auto-init at DOMContentLoaded. - .text-info / .text-warning: clarify --info-600 use and the warning-on-white WCAG note. - .bg-primary / .bg-secondary / .bg-accent: document the full --color-text-* / --color-link-* / --color-border cascade.
This was referenced May 6, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
$(cat <<'EOF'
Follow-up to #12 — two commits that landed on the feature branch after the PR was merged.
Summary
bin/check-cheatsheet-sync.sh+bin/setup-hooks.shenforce that every.classand--tokendocumented incheatsheet.htmlmaps to a real declaration incss/*.css, and that CSS/JS commits always include a cheatsheet update.text-default,.bg-info-100,.duration-fast/normal/slow,.ease-out/in/in-out,.hover-lift__header/footer→__head/foot,.cs-tab→.cs-tabs__tab), phantom classes removed (.cs-nav-link--active,.cs-banner--sticky,.cs-tooltip)proposedtags removed; 3breakingtag version/name fixes; missing component entries added (.cs-table,.cs-marquee,.cs-bannermodifiers); JS section updatedTest plan
bin/check-cheatsheet-sync.shexits 0 (351 classes, 134 tokens checked)bin/check-version-sync.shexits 0bin/build-bundle.shexits 0, bundle matches sourcesbin/setup-hooks.shinstalls pre-commit hook; staging a CSS file without cheatsheet.html blocks the commithttps://claude.ai/code/session_01QJs8xHtTbo2ZqjxRTiY8At
EOF
)
Generated by Claude Code
Summary by CodeRabbit
New Features
.text-default,.bg-info-100, durations (.duration-fast|normal|slow), easing (.ease-in|out|in-out), and.hover-liftutilitiesDocumentation
Chores