Agent skill
styled-jsx-dynamic
Implement dynamic styling in styled-jsx using best practices (CSS variables, className toggling, safe interpolations). Use for hover/active state, variant switches, theming, and runtime sizes/colors.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/styled-jsx-dynamic
SKILL.md
styled-jsx Dynamic Styling Skill
Implement dynamic styles without sacrificing maintainability or safety.
Prefer this order
- CSS variables set via style prop
- style={{ "--accent": color } as React.CSSProperties }
- className toggling
- data-state, data-variant
- Interpolated template literals inside only when needed
- Keep interpolations small, numeric, or enumerated
- Never interpolate untrusted strings into selectors or urls
Output expectations
- Update the component.
- Provide an explanation of why the chosen strategy is best.
- Include minimal test coverage for the dynamic behavior.
Example patterns
-
CSS vars:
css<div style={{ "--gap": `${gap}px` } as React.CSSProperties } /> <style jsx>{`div{ gap: var(--gap, 8px); }`}</style> -
class toggling:
css<div data-open={open ? "true" : "false"} /> <style jsx>{`div[data-open="true"]{ ... }`}</style>
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?