styled-jsx-component
npx machina-cli add skill andireuter/skills-webapp/styled-jsx-component --openclawstyled-jsx Component Skill (React Functional Components)
You are creating or refactoring a React FUNCTIONAL component that uses styled-jsx for styling.
Inputs
- $ARGUMENTS may include a component name and a short intent/variant description.
Non-negotiables
- Functional component only (no class components).
- Prefer semantic HTML and accessibility by default:
- Correct element choice (button/a/input/etc)
- Keyboard support
- aria-* only when needed
- Use styled-jsx <style jsx>{
...}</style> for component-scoped CSS. - Keep styling maintainable:
- Prefer CSS variables for theming/tokens
- Avoid overly-specific selectors
- Avoid styling through DOM structure that will change easily
- Variants:
- Prefer a single "variant" prop (string union) over many booleans.
- Use data attributes (e.g., data-variant) for styling hooks.
- Dynamic styling:
- Prefer className toggling or CSS variables for runtime values.
- Use template literal interpolation only when it’s necessary and safe.
- SSR/Next.js considerations:
- styled-jsx is SSR-compatible; do not use browser-only APIs during render.
Output expectations
- Create/modify files per template.md.
- Provide:
- Component implementation
- Minimal test (render + primary interaction + a11y)
- Storybook story (basic variants)
- Short usage snippet
Best-practice patterns to apply
- Tokens:
- Use CSS vars like --color-fg, --color-bg, --radius, --space-2.
- Provide sensible defaults in :root only when asked; otherwise keep tokens local to the component with fallback values.
- Prefer:
- :global(...) only for one-off escape hatches
- data-* attributes for styling states (data-state, data-variant)
- Avoid:
- Global leakage
- Deep descendant styling
- Interpolating untrusted strings into CSS
Use the accompanying template.md as the default structure; deviate only when the component needs a different intrinsic element type or ref pattern.
Source
git clone https://github.com/andireuter/skills-webapp/blob/main/skills/styled-jsx-component/SKILL.mdView on GitHub Overview
This skill covers creating or refactoring a React functional component styled with styled-jsx to provide component-scoped CSS. It emphasizes theming via CSS variables, accessible UI patterns, and a simple variant system driven by data attributes. It also aligns with SSR-friendly practices for Next.js.
How This Skill Works
Write a functional component that renders a semantic element and wraps styles in <style jsx>{`...`}</style>. Use CSS variables for tokens, and drive variants through a data-variant attribute (and a single variant prop) so runtime changes rely on attributes rather than deep selectors. styled-jsx scopes CSS to the component and remains SSR-safe.
When to Use It
- Building a reusable UI component that needs isolated styles and theming
- Implementing multiple visual variants via a single 'variant' prop
- Theming with CSS variables for tokens like colors and radii
- Next.js or SSR apps where styled-jsx must be SSR-compatible
- Refactoring existing components to avoid global CSS leakage and improve accessibility
Quick Start
- Step 1: Create a functional component with a semantic root element and accept a 'variant' prop.
- Step 2: Add <style jsx>{`...`}</style> using CSS variables for tokens and data-variant attributes for styling hooks.
- Step 3: Wire up props to data attributes and ensure accessibility and SSR readiness.
Best Practices
- Use CSS variables for theming (e.g., --color-fg, --color-bg, --radius, --space-2) with component-local defaults
- Prefer data-* attributes (e.g., data-state, data-variant) for styling hooks
- Keep selectors shallow and avoid styling based on DOM structure that may change
- Expose a single 'variant' prop (string union) instead of many booleans
- Prefer className toggling or CSS vars for dynamic values; avoid interpolating untrusted strings
Example Use Cases
- A Button component with primary/secondary variants and accessible focus styles
- A Card component that adapts color and elevation using CSS variables across variants
- A Tabs/Segment component using data-variant to indicate the active tab
- A Modal header and body with proper focus management and keyboard support
- A Tag/Badge component with size and color variants controlled by a single prop
