Menu
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".
Use 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 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".
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".
| name | primitives-use |
| description | 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". |
Rewrite the named component to rely on src/components/primitives/* (Button, FlexRow, Text, etc.) instead of raw HTML, ad-hoc Tailwind, or duplicated styling. The goal is cross-platform reuse and consistency with the project's design system.
Read first: .agents/docs/features/primitives — full primitives documentation.
Use primitive props first:
Button: type="primary|secondary|danger", size="small|normal"<FlexRow gap="sm" justify="between"> instead of className="flex justify-between gap-2"Text (native only): variant="strong|subtle|muted", size="sm|base|lg"For text on web: use plain HTML (<span>, <p>) with CSS typography classes (.text-strong, .text-subtle, .text-label, .text-small). The Text primitive is native-only — do not use it in web production code.
If primitive props aren't enough: fall back to Tailwind tokens (bg-surface-0, text-strong).
Last resort: existing CSS modules or hardcoded styles.
<div className="flex ..."> with the matching primitive when one exists.Button + its type / size props.className props that duplicate primitive defaults.