Skill

astro-styling

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.

From fuse-astro

Install

Run in your terminal

npx claudepluginhub fusengine/agents --plugin fuse-astro

Tool Access

This skill uses the workspace's default tool permissions.

Supporting Assets

View in Repository

references/css-modules.md

references/css-variables.md

references/global-styles.md

references/sass.md

references/scoped-css.md

references/tailwind.md

references/templates/scoped-component.md

references/templates/tailwind-setup.md

references/templates/unocss-setup.md

references/unocss.md

Skill Content

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

138.6k

claude-opus-4-5-migration

2 files

Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.

claude-opus-4-5-migration

83.2k

evaluation-methodology

1 file

Details PluginEval's skill quality evaluation: 3 layers (static, LLM judge), 10 dimensions, rubrics, formulas, anti-patterns, badges. Use to interpret scores, improve triggering, calibrate thresholds.

plugin-eval

32.9k

Stats

Parent Repo Stars4

Parent Repo Forks0

Last CommitMar 17, 2026

Actions

View Source View Plugin View on GitHub View README

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 6

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