Astro styling

Skill fusengine/agents/plugins/astro-expert/skills/astro-styling

Redefining development through cognitive automation and collaborative agent systems.

Install

npx -y skills add fusengine/agents --skill astro-styling

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

22 stars22 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when styling Astro components with scoped CSS, CSS Modules, Tailwind CSS, UnoCSS, or Sass. Covers class:list directive, global styles, CSS custom properties, and Vite-powered preprocessors.

SKILL.md

3.6 KB, as published. Nobody here has run it

Astro Styling

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

fuse-ai-pilot:explore-codebase - Analyze existing styles, integrations, and patterns
fuse-ai-pilot:research-expert - Verify latest Astro/Tailwind/UnoCSS docs via Context7/Exa
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

Method	Scope	When to Use
`<style>` in `.astro`	Component	Default — scoped to component
`<style is:global>`	Global	Base styles, resets
CSS Modules `.module.css`	Component	Framework components (React, Vue)
Tailwind CSS	Utility	Rapid UI development
UnoCSS	Utility	Lightweight, configurable atomic CSS
Sass/SCSS	Component/Global	Advanced features, variables, mixins

Reference Guide

Concepts

Topic	Reference	When to Consult
Scoped CSS	scoped-css.md	Component styling
CSS Modules	css-modules.md	Framework components
Global styles	global-styles.md	Resets, base styles
Tailwind	tailwind.md	Utility-first CSS
UnoCSS	unocss.md	Atomic CSS engine
Sass/SCSS	sass.md	Preprocessor features
CSS Variables	css-variables.md	Design tokens, themes

Templates

Template	When to Use
scoped-component.md	Component with scoped + conditional classes
tailwind-setup.md	Full Tailwind CSS project setup
unocss-setup.md	Full UnoCSS project setup

Best Practices

Prefer scoped styles — Use <style> in .astro files by default
Global styles in layouts — Apply resets and base styles in root layout
CSS variables for themes — Define design tokens as custom properties
Avoid is:global in components — Reserve for layouts and global files
class:list over ternaries — More readable conditional class logic

Forbidden

Writing inline styles for layout/theme — use CSS classes instead
Using is:global inside non-layout components
Importing CSS in multiple components without CSS Modules
Mixing Tailwind and custom class naming without a clear convention