fusengine/astro-styling
plugins/astro-expert/skills/astro-styling/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add fusengine/agents astro-stylingInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 16, 2026, 2:47 AM282.9s11 files scanned
SKILL.md
- name:
- astro-styling
- description:
- 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.
- astro:
- 7
- user-invocable:
- true
- references:
- references/scoped-css.md, references/css-modules.md, references/global-styles.md, references/tailwind.md, references/unocss.md, references/sass.md, references/css-variables.md, references/templates/scoped-component.md, references/templates/tailwind-setup.md, references/templates/unocss-setup.md
- related-skills:
- astro-7, astro-integrations, solid-astro
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
.astrocomponents 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:listfor 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.astrofiles 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:globalin 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:globalinside non-layout components - Importing CSS in multiple components without CSS Modules
- Mixing Tailwind and custom class naming without a clear convention
Related Skills
fusengine/ux-copy
testing
VerifiedTrustedCommunity
Copy self-audit and ban-lists — filler verbs/hype adjectives, slop placeholder names, fake-precise numbers, Title Case headlines, humor in error copy ('Oops!'), em-dash crutch, one copy register per page.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-webapp
development
VerifiedTrustedCommunity
Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register `product`: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-web
development
VerifiedTrustedCommunity
Marketing sites, landing pages, campaign pages — register `brand` (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-system
development
VerifiedTrustedCommunity
Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.
20SKILL.mdUpdated Jul 13, 2026