Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add fusengine/agents --skill astro-stylinggit clone --depth 1 https://github.com/fusengine/agentsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/fusengine/agents/astro-styling)<a href="https://agentmods.dev/skills/fusengine/agents/astro-styling"><img src="https://agentmods.dev/badge/skills/fusengine/agents/astro-styling/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/fusengine/agents/astro-styling"><img src="https://agentmods.dev/badge/skills/fusengine/agents/astro-styling.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00035 | $0.01005 |
| Opus 5.5 | $0.00014 | $0.00402 |
| Sonnet 5.5 | $0.00007 | $0.00201 |
| Haiku 4.5 | $0.00003 | $0.00101 |
Grade A, and why
astro-styling scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 95 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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).
Astro Styling
Agent Workflow (MANDATORY)
Before ANY implementation, spawn 3 agents in parallel, one Agent call each with a name:
- 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 |
What ships with it
10 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- references/css-modules.md 1.5 KB
- references/css-variables.md 2.0 KB
- references/global-styles.md 1.8 KB
- references/sass.md 1.5 KB
- references/scoped-css.md 1.5 KB
- references/tailwind.md 1.8 KB
- references/templates/scoped-component.md 1.4 KB
- references/templates/tailwind-setup.md 1.9 KB
- references/templates/unocss-setup.md 1.8 KB
- references/unocss.md 1.7 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago Changed 4912fcb33782
- 1mo ago First seen · 95 lines · 35 tokens per session scan A 1c02e397e281
astro-styling is a skill published in the GitHub repository fusengine/agents (32 stars, last pushed 5d ago), licensed MIT. It adds 35 tokens to every session and 1,005 once invoked, about $0.0001 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
shiny-bslib-theming
Advanced theming for Shiny apps using bslib and Bootstrap 5. Use when customizing app appearance with bstheme(), Bootswatch themes, custom colors, typography, brand.yml integration, Bootstrap Sass variables, custom Sass/CSS rules, dark mode and color modes, dynamic theme switching, real-time theming, theme inspection…
shiny-bslib
Build modern Shiny dashboards and applications using bslib (Bootstrap 5). Use when creating new Shiny apps, modernizing legacy apps (fluidPage, fluidRow/column, tabsetPanel, wellPanel, shinythemes), or working with bslib page layouts, grid systems, cards, value boxes, navigation, sidebars, filling layouts, theming…
interface-craft
Raises the visual and interaction quality of an interface — layout, hierarchy, type, spacing, density, and the details that separate a considered product from a generic one. Use this when a screen works but looks unfinished or default, when a layout feels crowded or arbitrary, when a page has no clear focal point, or…
radin-do
Record one ad-hoc prompt as a backlog entry, then execute just that task. Use for /radin-do .
radin-stats
Show the stats/gain output of every companion tool that ships one, side by side.
design-system-specification
Design a production-ready Design System and UI/UX visual style guide. Covers design tokens (colors, typography, spacing, shadows, radius), components (buttons, inputs, cards, tables, modals, navigation), layouts, interaction/hover states, iconography, motion design, responsive behavior, accessibility (WCAG 2.2), and…