docs(vechain-kit): note Chakra v3 useToken snapshot pitfall#33
Merged
Conversation
…g reference
Adds a section under "Chakra UI v3 compatibility" explaining why
`useToken('colors', [...])` freezes host colors when piped into the Kit's
`theme` prop, and showing the `sys.token.var(...)` resolver as the fix.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Skill Size Report
Large reference files (>5.0K tok)
|
Skill Security AuditScanned 75 file(s) — found 14 issue(s) across 5 file(s). 🔵 LOW (14)
|
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
1 participant
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.
Summary
Adds a section under "Chakra UI v3 compatibility" in
skills/vechain-kit/references/kit-theming.mdwarning that Chakra v3'suseToken('colors', 'bg.primary')returns a literal color snapshot at render time, not a CSS variable reference — so piping its result into VeChain Kit'sthemeprop freezes the Kit's colors in whichever mode Chakra evaluated first. Shows thesys.token.var(...)resolver as the fix.Why
The skill is what Claude / agents consult when wiring up Kit theming in a Chakra v3 host. Without this note, agents will keep reproducing the broken pattern (most recently caught in vebetterdao / b3tr) when generating wrapper components.
Companion repro and docs:
examples/next-chakra-v3/What
Single section appended after the existing "Chakra UI v3 compatibility" guidance: wrong vs right code snippets and a DevTools verification step.
Test plan
🤖 Generated with Claude Code