Instruction file imported from mgetf/website-next (.cursor/rules/no-raw-tailwind-in-routes.mdc). Copyright stays with the author.

No Raw Tailwind Colors in Route Files

Name: no-raw-tailwind-in-routes
Author: mgetf

Route .svelte files must use shared components and design tokens, not raw Tailwind palette classes.

Always use components, never inline:

Colored button / CTA: Button from $lib/components/ui/Button.svelte
Dark bordered container: Card from $lib/components/ui/Card.svelte
Status pill / label: Badge from $lib/components/ui/Badge.svelte
Labeled text input: FormInput from $lib/components/ui/form/FormInput.svelte
Labeled dropdown: FormSelect from $lib/components/ui/form/FormSelect.svelte
Destructive confirmation: ConfirmDialog from $lib/components/ui/ConfirmDialog.svelte (never window.confirm())
Data table / list: DataTable from $lib/components/ui/DataTable.svelte (never raw <table> with inline styles)

For any remaining color needs, use semantic tokens:

bg-surface-card     (not bg-zinc-900)
bg-surface-input    (not bg-zinc-800)
bg-surface-hover    (not bg-zinc-700)
border-border-default  (not border-zinc-800)
border-border-input    (not border-zinc-700)
text-text-body      (not text-gray-400 / text-zinc-400)
text-text-label     (not text-gray-300 / text-zinc-300)
text-text-muted     (not text-gray-500 / text-zinc-500)
bg-primary-600      (not bg-orange-600 for brand actions)
bg-danger-600       (not bg-red-600)
bg-success-600      (not bg-green-600 / bg-emerald-600)
bg-warning-600      (not bg-yellow-600 / bg-amber-600)
focus:ring-primary-500  (not focus:ring-blue-500 / focus:ring-orange-500)

Format colors (only use in format-specific contexts):

bg-format-2v2-600   (2v2 league pages, 2v2 signup cards)
bg-format-1v1-600   (1v1 league pages, 1v1 signup cards)

CI will fail if raw bg-(blue|orange|indigo)-600 hover:bg-* patterns appear in route files.

{ "ocm": "1", "id": "mgetf-website-next-no-raw-tailwind-in-routes-rule", "kind": "skill", "name": "no-raw-tailwind-in-routes", "description": "Prohibit raw Tailwind color classes in route files; enforce shared components", "publisher": "mgetf", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "github-cursor-rules" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "Prohibit raw Tailwind color classes in route files; enforce shared components" ], "primary": false, "metadata": { "source": { "provider": "github-cursor-rules", "repository": "https://github.com/mgetf/website-next", "path": ".cursor/rules/no-raw-tailwind-in-routes.mdc", "ref": "d6ff1a396ac662bab890fd3d7e153356dfffd797", "url": "https://github.com/mgetf/website-next/blob/d6ff1a396ac662bab890fd3d7e153356dfffd797/.cursor/rules/no-raw-tailwind-in-routes.mdc", "key": "mgetf/website-next/.cursor/rules/no-raw-tailwind-in-routes.mdc" } }, "instructions": "# No Raw Tailwind Colors in Route Files\n\nRoute `.svelte` files must use shared components and design tokens, not raw Tailwind palette classes.\n\n## Always use components, never inline:\n\n- **Colored button / CTA:** `Button` from `$lib/components/ui/Button.svelte`\n- **Dark bordered container:** `Card` from `$lib/components/ui/Card.svelte`\n- **Status pill / label:** `Badge` from `$lib/components/ui/Badge.svelte`\n- **Labeled text input:** `FormInput` from `$lib/components/ui/form/FormInput.svelte`\n- **Labeled dropdown:** `FormSelect` from `$lib/components/ui/form/FormSelect.svelte`\n- **Destructive ", "cost": { "context_tokens": 454 } }

no-raw-tailwind-in-routes

About

No Raw Tailwind Colors in Route Files

Always use components, never inline:

For any remaining color needs, use semantic tokens:

Format colors (only use in format-specific contexts):

Use it

Manifest

Reviews