astro-styling

<objective> Covers styling options for `.astro` components: default component-scoped `<style>`, `<style is:global>` for base styles/resets (reserved for layouts), CSS Modules (`.module.css`) for framework components (React, Vue), Tailwind CSS, UnoCSS, and Sass/SCSS via Vite preprocessors. Includes the `class:list` directive for conditional class application and CSS custom properties for design tokens/themes. This skill addresses `.astro`-file styling specifically (scoping semantics unique to Astro components), not the UI framework setup itself (astro-integrations) or SOLID file-organization rules for style files (solid-astro). </objective> # Astro Styling ## Agent Workflow (MANDATORY) Before ANY implementation, spawn 3 agents in parallel, one `Agent` call each with a `name`: 1. **fuse-ai-pilot:explore-codebase** - Analyze existing styles, integrations, and patterns 2. **fuse-ai-pilot:research-expert** - Verify latest Astro/Tailwind/UnoCSS docs via Context7/Exa 3. **mcp__context7__query-docs** - Check integration compatibility with Astro 7 After implementation, run **fuse-ai-pilot:sniper** for validation. --- ## Overview ### When to Use - Styling `.astro` components with component-scoped CSS - Setting up Tailwind CSS or UnoCSS in an Astro project - Using CSS Modules for framework-agnostic scoping - Applying global base styles (reset, fonts, variables) - Using `class:list` for conditional class application - Adding Sass/SCSS via Vite preprocessors ### Styling Options...