Agent skill
stylex-styling
StyleX styling patterns using design tokens, breakpoints, and custom css prop. Use when working with styles, CSS, design tokens, breakpoints, responsive design, themes, styling components, css prop, stylex.create, or when the user mentions StyleX, tokens.stylex, controlSize, color tokens, or breakpoints.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/stylex-styling
SKILL.md
StyleX Styling
Overview
This project uses StyleX for styling with design tokens, responsive breakpoints, and theme-aware colors.
Key Patterns
Design Tokens
- Import tokens from:
@/tokens.stylex.ts - Available token categories:
color- Theme-aware colors (textMain, backgroundRaised, controlActive, etc.)controlSize- Spacing and sizing values (_1 through _9)font- Typography values (weight_5, etc.)
Breakpoints
- Import from:
@/breakpoints - Defined via: Babel plugin in
.babelrc.jswith typing insrc/babel.d.ts - Usage:
{ default: value, [breakpoints.md]: largeScreenValue }
Custom CSS Prop
- Use
css={styles.someStyle}prop instead of{...stylex.props(styles.someStyle)} - Transpiled by custom Babel plugin
- Supports arrays:
css={[styles.base, isActive && styles.active]}
Complete Example
import * as stylex from "@stylexjs/stylex";
import { breakpoints } from "@/breakpoints";
import { color, controlSize, font } from "@/tokens.stylex";
function Button({ children, isActive, hideLabelOnMobile, ...props }) {
return (
<button
{...props}
css={[
styles.button,
isActive && styles.active,
hideLabelOnMobile && styles.hideLabelOnMobile,
]}
>
{children}
</button>
);
}
const styles = stylex.create({
button: {
// Use design tokens
fontSize: controlSize._4,
fontWeight: font.weight_5,
minHeight: controlSize._9,
paddingBlock: controlSize._1,
paddingInline: controlSize._3,
// Responsive design with breakpoints
display: { default: "none", [breakpoints.md]: "inline-flex" },
// Theme-aware colors
color: color.textMain,
backgroundColor: {
default: color.backgroundRaised,
":hover": color.backgroundHover,
},
},
active: {
backgroundColor: color.controlActive,
color: color.textOnActive,
},
hideLabelOnMobile: {
paddingLeft: {
default: controlSize._3,
[breakpoints.md]: controlSize._2,
},
},
});
Best Practices
- Always use design tokens - Never hardcode colors, spacing, or font values
- Use the css prop - Don't use
{...stylex.props()}directly - Conditional styles with arrays -
css={[base, condition && conditional]} - Responsive by default - Consider mobile-first with breakpoint overrides
- Theme-aware colors - Use color tokens that adapt to light/dark themes
- Pseudo-selectors in objects -
{ default: value, ":hover": hoverValue }
Common Patterns
Responsive Display
display: { default: "none", [breakpoints.md]: "flex" }
Conditional Styles
css={[styles.base, isActive && styles.active, hasError && styles.error]}
Hover States
backgroundColor: {
default: color.backgroundRaised,
":hover": color.backgroundHover,
}
Mobile-First Padding
padding: {
default: controlSize._2,
[breakpoints.md]: controlSize._4,
[breakpoints.lg]: controlSize._6,
}
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?