Stacks Documentation
SkillsChangelog
TeamSponsorsPartnersPostcardwareAwesome StacksContributing

Crosswind

Copy page
Copy page as Markdown for LLMs
View as Markdown
View this page as plain text
Open in ChatGPT
Copy content and open ChatGPT
Open in Claude
Copy content and open Claude
Open in Perplexity
Search with Perplexity AI
On this page 5

stacks-crosswind · Frontend · model-invoked

The utility-first CSS engine that styles a Stacks app. Utility classes, theming, responsive design, variants, custom rules and how the CSS is generated.

When to reach for it

  • Utility-first CSS classes
  • Theming
  • Responsive design
  • Variants
  • Custom rules
  • CSS generation. Crosswind is the CSS utility engine powering Stacks' Crosswind config

Inside the skill

The sections an agent reads once the skill loads.

  • Design & anti-slop skills
  • Key Paths
  • Core API
  • Configuration
  • Usage in Templates
  • Built-in Utility Categories
  • Gotchas

Where the code lives

  • Package: node_modules/@cwcss/crosswind/
  • UI config: config/ui.ts (Crosswind options referencing Crosswind)
  • Default styles: storage/framework/defaults/styles/
  • Output: storage/framework/stx/cache/cw-<hash>.css, one file per page (stx's stateDir, set in config/ui.ts)

Using it

This one is model-invoked. Your agent reaches for it on its own when the task matches, and you can also call it by name:

/stacks-crosswind

Source: stacks-crosswind/SKILL.md. Shadow it for one project with app/Skills/stacks-crosswind/SKILL.md, then re-run buddy setup:ai. See Writing your own.