jaspr-styling

What problem does it solve?

This Skill helps you write correct, maintainable, type-safe styling for Jaspr components without guesswork or style leakage across the UI.

Core Features & Use Cases

• Component-scoped CSS-in-Dart: Define styles using the @css annotation on a static getter returning List<StyleRule> to keep styling local and predictable.
• Safe composition rules: Use explicit selectors (classes/ids) and parent selectors like css('&') to avoid unintended global impact.
• Typed properties for layout and visuals: Apply strongly-typed Styles/.styles() properties for color, typography, sizing, flexbox, grid, and interaction/box model concerns.
• Animations and transitions guidance: Use Transition and Animation typing, including keyframes via css.keyframes, to implement motion without stringly-typed errors.
• When to use inline vs global styles: Use inline styles only for dynamic cases, and reserve complex rules (hover/media/animations) for @css.

Quick Start

Ask the skill to generate a component example that uses an @css static getter to style a .main container, includes a hover rule, and adds a responsive media query while following Jaspr’s rules for selectors and inline styles.