Styling

What this skill does

The Styling skill guides how to apply consistent, maintainable visual design in component-driven projects using Tailwind CSS and semantic tokens. It emphasizes using built-in variants, CSS variables, and semantic colors instead of raw color values or manual overrides, ensuring UI elements adapt seamlessly across themes. The skill also covers layout best practices such as using `gap-*` instead of `space-x-*`/`space-y-*`, preferring size utilities over separate width and height, and leveraging utility functions like `cn()` for conditional class names.

Who it's for

This skill is designed for front-end developers and UI-focused marketers who manage component styling within design systems or rapid iteration environments. Growth leads coordinating between design and development teams can use it to enforce uniform visual language and reduce styling inconsistencies. Agency strategists working on branded client campaigns will benefit from the structured approach to theming and customization that balances flexibility with maintainability.

Key workflows

Practitioners start by replacing raw color values with semantic tokens or Badge variants to standardize status indicators and color usage. Next, they audit component styling to swap manual color or typography overrides for built-in variants or CSS variables defined in the global theme. Layout adjustments follow, converting deprecated spacing utilities like `space-x-*` into `flex` containers with `gap-*` for consistent spacing. Finally, conditional styling is streamlined by adopting the `cn()` utility, removing manual ternary expressions inside className strings for clearer, more readable code.

Common questions

How do I apply a success color not defined in the theme? Use a Badge variant or request a custom CSS variable addition rather than hardcoding raw colors. Can I override component colors with className? No, className should only control layout; color and typography changes require variants or semantic tokens. Is it okay to add manual z-index values to overlays like dialogs? No, overlay components handle their own stacking context and should not have manual z-index overrides.

How to use in Metaflow

Attach the Styling skill to tasks that involve UI component development, theming, or front-end styling audits. Metaflow agents equipped with this skill will enforce best practices like preferring semantic tokens and built-in variants over manual CSS overrides. Expect clearer, more maintainable styling outputs that align with the project’s design system standards, ensuring consistent appearance across light and dark modes. Additional guidance is available for integrating custom colors and theme variables within the workflow.

For broader context, see our roundup of marketing skills claude, and read common Claude Code content mistakes for related setup guidance.