Menü
Use when the user asks to convert a CSS or SCSS file to use the project's `_variables.scss` tokens, replace `@apply` with raw CSS, or align a stylesheet with the styling guidelines. Triggers on "convert this CSS", "use variables in this stylesheet", "remove @apply", "align with styling guidelines".
| name | css-convert |
| description | Use when the user asks to convert a CSS or SCSS file to use the project's `_variables.scss` tokens, replace `@apply` with raw CSS, or align a stylesheet with the styling guidelines. Triggers on "convert this CSS", "use variables in this stylesheet", "remove @apply", "align with styling guidelines". |
Rewrite a CSS/SCSS file so it uses the project's design tokens from src/styles/_variables.scss and src/styles/_colors.scss instead of hardcoded values, and converts any @apply Tailwind directives to raw CSS using the same variables.
.agents/docs/styling-guidelines.md. It defines when to use Tailwind vs raw CSS, the variable system, the color tokens, form-field conventions, and breakpoints.$s-2, $s-4, etc.$text-sm, $text-base, etc.$rounded-md, $rounded-lg, etc.src/styles/_colors.scss (surfaces, accents, theme colors)@apply Tailwind utility usage to plain CSS declarations that reference the same SCSS variables..agents/docs/styling-guidelines.md — core rulessrc/styles/_variables.scss — $s-*, $text-*, $rounded-*, etc.src/styles/_colors.scss — theme colors, surfaces, accentsUse when the user asks to update the component audit, categorize a component as shared/platform/complex, or refresh `src/dev/components-audit/audit.json` after working on a component. Triggers on "update audit", "audit this component", "categorize component", "refresh audit stats".
Use when the user asks to deploy this app to production, push to GitHub Pages, ship the current build to `app.quorummessenger.com`, or update the live site. Triggers on "deploy", "deploy to prod", "publish", "ship it", "push to gh-pages", "update production".
Use when the user asks to refresh or sync a documentation file in `.agents/docs/` against the current codebase. Triggers on "update this doc", "refresh the modals doc", "sync the docs with the code", "the doc is out of date", "verify the references in <doc>".
Use when the user asks to rebuild or refresh `.agents/INDEX.md` after adding, removing, or renaming files in `.agents/`. Triggers on "update the INDEX", "rebuild the agents index", "sync INDEX.md", "regenerate the docs index".
Use when the user asks to inspect, verify, or run something against the sibling `quorum-mobile` (React Native) or `quorum-shared` repos. Triggers on "check on mobile", "look at quorum-mobile", "verify in shared", "does this exist in shared", "check the mobile side".
Use when the user asks to convert a component to use the primitives architecture, replace raw HTML/Tailwind with primitive props, or make a component cross-platform-friendly. Triggers on "use primitives in this component", "convert to primitives", "primitives-ify", "make this primitive-based".