feat: add .sf-width-* content-width utility classes and rename .sf-is-skeleton to .sf-is-shimmer - #650
Conversation
Resolve the naming collision between the shipped shimmer *state* (.sf-is-skeleton, applicable to any element) and the planned .sf-skeleton *component* (roadmap / #384 item 8). Renaming the state to .sf-is-shimmer reserves "skeleton" for the component alone, preserves the framework's state/component axis separation (.sf-is-* = state, .sf-* = structural), and makes the class name mirror its driving token, --sf-animation-shimmer. Shipped ahead of the component so this one breaking rename stays out of the otherwise purely additive .sf-skeleton release. Behaviour, tokens, and markup support are unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017x2JYaWJoPoHWNCEhDA7NR
…531) Opt-in helpers to constrain an element to a fraction of the content column (--sf-content-width) with auto-centering, a common quick-constraint on marketing layouts: - .sf-width-10 … .sf-width-90 — max-inline-size: calc(--sf-content-width * fraction) with inline-size:100% + margin-inline:auto, so the element shrinks on narrow parents and centres in normal flow. - Keyword variants .sf-width-full / -auto / -fit / -min / -max mapping to 100%-uncapped / auto / fit-content / min-content / max-content. Logical properties throughout; driven entirely by the existing --sf-content-width token (no new tokens). Documented in the LLM guide and covered in the demo gallery. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017x2JYaWJoPoHWNCEhDA7NR
Add scripts/gen-llms-txt.js, wired into the npm run docs pipeline, producing a compact llms.txt — the complete, current-version SLASHED token and class vocabulary distilled for AI coding assistants (Claude Code, Cursor, Windsurf…) so they use real --sf-*/.sf-* names instead of hallucinating them. Derived entirely from docs/api-index.json (itself generated + CI-gated), core/layers.css (cascade order) and package.json (version), so it cannot drift: - Registered in scripts/artifacts.json — check-artifacts stages it on source change and CI --check fails on any staleness. - Version header treated like docs/llm-guide.md: added to VERSION_SYNCED_FILES, re-stamped by version-sync, asserted by check-version-sync, and git-added by the release sync-main job (with matching fixture + failure-case tests). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017x2JYaWJoPoHWNCEhDA7NR
|
Warning Review limit reached
Next review available in: 50 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughThis PR renames the shimmer state class, adds content-width utilities, generates ChangesPublic CSS surface
Documentation generation and synchronization
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related issues
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Greptile SummaryThis PR ships 14 new
Confidence Score: 4/5Safe to merge after confirming the intended centering behaviour of the keyword width variants. The rename, tooling, and version-sync additions are all well-constructed and consistently applied. The one real concern is the three intrinsic-sizing keyword variants (.sf-width-fit, .sf-width-min, .sf-width-max) — they don't apply margin-inline: auto, so they sit left-aligned in normal block flow while both the block comment and the PR description say all .sf-width-* classes centre. This is a present behavioural gap on newly shipped classes; correcting it before release avoids a follow-up breaking change or a confusing asymmetry in the API. optional/utilities.css — specifically the five keyword-width rules at the end of the new block. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A["npm run docs"] --> B["gen-llms-txt.js\n(reads api-index.json + package.json)"]
B --> C["llms.txt\n(version-stamped)"]
A --> D["gen-api-index.js\n(reads core/ + optional/)"]
D --> E["docs/api-index.json"]
E --> B
C --> F["version-sync.js\n(re-stamps header only)"]
F --> C
G["npm run check:version"] --> H["check-version-sync.js\ncheck 6: llms.txt header == package.json"]
H --> C
I["release.yml sync-main job"] --> J["git add llms.txt"]
J --> K["commit to main"]
subgraph CSS_Changes
L[".sf-is-skeleton"] -->|renamed| M[".sf-is-shimmer"]
N["optional/utilities.css"] -->|new block| O[".sf-width-10 to .sf-width-90 + keyword variants"]
end
Reviews (1): Last reviewed commit: "feat(docs): generate distilled llms.txt ..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| .sf-width-auto { inline-size: auto; } | ||
| .sf-width-fit { inline-size: fit-content; } | ||
| .sf-width-min { inline-size: min-content; } | ||
| .sf-width-max { inline-size: max-content; } |
There was a problem hiding this comment.
margin-inline: auto, but the PR description says "All centre via margin-inline: auto"
.sf-width-fit, .sf-width-min, and .sf-width-max produce intrinsically-sized elements that are narrower than their containing block, so without margin-inline: auto they will be left-aligned in normal flow — contrary to the stated behaviour. A developer who reaches for .sf-width-fit expecting the same centering behaviour as .sf-width-50 will find it pinned to the start edge.
.sf-width-auto and .sf-width-full are unaffected (both fill the container in block flow, so centering is a no-op), but the three intrinsic-sizing keywords genuinely need the declaration to honour the "centre in normal flow" contract documented in the block comment and PR description.
| .sf-width-auto { inline-size: auto; } | |
| .sf-width-fit { inline-size: fit-content; } | |
| .sf-width-min { inline-size: min-content; } | |
| .sf-width-max { inline-size: max-content; } | |
| .sf-width-full { inline-size: 100%; max-inline-size: none; } | |
| .sf-width-auto { inline-size: auto; } | |
| .sf-width-fit { inline-size: fit-content; margin-inline: auto; } | |
| .sf-width-min { inline-size: min-content; margin-inline: auto; } | |
| .sf-width-max { inline-size: max-content; margin-inline: auto; } |
# Conflicts: # demo/index.html # docs/api-index.json # docs/api-index.md # docs/classes.md # docs/registry.json
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@demo/index.html`:
- Around line 4034-4035: In the documentation for `.sf-is-shimmer`, update the
parenthetical predecessor class from `.sf-is-shimmer` to `.sf-is-skeleton`,
leaving the current class name and all other description text unchanged.
In `@scripts/version-sync.js`:
- Around line 94-98: The llms.txt version patterns are unanchored and can match
prose instead of the header. Update the expressions in scripts/version-sync.js
lines 94-98 and scripts/check-version-sync.js lines 93-97 to match the complete
heading line, enabling multiline matching for the checker; add a regression case
in tests/check-version-sync.test.js lines 119-133 where the version text appears
only in prose and is rejected.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: ee590aba-d909-4e22-a8bd-60049c519d73
⛔ Files ignored due to path filters (1)
configurator/src/data/classes.generated.jsonis excluded by!**/*.generated.*
📒 Files selected for processing (25)
.github/workflows/release.ymlcore/states.cssdemo/index.htmldocs/api-audit-checklist.mddocs/api-index.jsondocs/api-index.mddocs/classes.mddocs/llm-guide.mddocs/migration.mddocs/registry.jsondocs/roadmap.mddocs/states.mddocs/token-annotations.jsonllms.txtoptional/utilities.csspackage.jsonscripts/artifacts.jsonscripts/check-version-sync.jsscripts/gen-llms-txt.jsscripts/version-sync.jsscripts/version-synced-files.jstests/check-version-sync.test.jstests/demo-visual.spec.jstests/states-full.spec.jstests/version-sync.test.js
…t version regex - demo/index.html: the .sf-is-shimmer coverage card said it was renamed from '.sf-is-shimmer' (a broad find/replace had rewritten the historical name); restore the correct predecessor '.sf-is-skeleton', matching token-annotations. - scripts/version-sync.js + check-version-sync.js: line-anchor (multiline) the llms.txt '# SLASHED vX.Y.Z' header match so a '# SLASHED v…' string appearing inline in prose can't be stamped or accepted as the heading. - tests/check-version-sync.test.js: add a regression case where the version appears only inline in prose and must be rejected. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017x2JYaWJoPoHWNCEhDA7NR
2 participants
Summary
This PR adds 14 new content-width utility classes (
.sf-width-10through.sf-width-full) that constrain elements to fractions of the--sf-content-widthtoken and centre them in normal flow. It also renames the.sf-is-skeletonstate class to.sf-is-shimmerto avoid naming collision with the planned.sf-skeletoncomponent (roadmap item #384).The new utilities ship from
optional/utilities.cssand are opt-in. The rename is a breaking change documented inmigration.md.Type
Changes
New utilities:
.sf-width-10,.sf-width-20, …,.sf-width-90— constrain to 10%–90% of content width.sf-width-auto,.sf-width-fit,.sf-width-full,.sf-width-max,.sf-width-min— CSS width keywordsmargin-inline: autoand shrink below the cap on narrower parentsBreaking rename:
.sf-is-skeleton→.sf-is-shimmer(shimmer animation state for loading placeholders)core/states.css, demo, tests, and all generated docsGenerated artifacts updated:
docs/api-index.json— class count: 312 → 326; utility count: 33 → 47docs/api-index.md,docs/classes.md,docs/registry.json— counts and listingsconfigurator/src/data/classes.generated.json— new utilities and renamed statellms.txt— new machine-readable LLM reference (generated by newscripts/gen-llms-txt.js)Version sync:
llms.txtadded toscripts/version-synced-files.jsandscripts/artifacts.jsonscripts/version-sync.jsandscripts/check-version-sync.jsupdated to handlellms.txtheaderChecklist
npm run lint:csspassesnpm run buildrebuildsdist/npm testpasses (unit + Playwright e2e)npm run check:version)npm run docs)CHANGELOG.mdupdated (implied by feature + breaking change)docs/migration.mdNotes
The new
llms.txtfile is a distilled, machine-generated reference of SLASHED's complete token and class vocabulary, sized to fit into AI coding assistant context windows (Claude Code, Cursor, Windsurf, etc.). It is regenerated bynpm run docsand version-stamped alongside other artifacts. The.sf-is-skeleton→.sf-is-shimmerrename resolves the naming collision documented in roadmap #384 and #575.https://claude.ai/code/session_017x2JYaWJoPoHWNCEhDA7NR
Summary by CodeRabbit
New Features
Breaking Changes
.sf-is-skeletonto.sf-is-shimmer. Update existing markup accordingly; behavior remains unchanged.Documentation
Bug Fixes