Cursor rule

1---
2description: This file describes Sure's design system and how views should be styled
3globs: app/views/**,app/helpers/**,app/javascript/controllers/**
4alwaysApply: true
5---
6Use the rules below when:
7 
8- You are writing HTML
9- You are writing CSS
10- You are writing styles in a JavaScript Stimulus controller
11 
12## Rules for AI (mandatory)
13 
14The codebase uses TailwindCSS v4.x (the newest version) with a custom design system defined in [sure-design-system.css](mdc:app/assets/tailwind/sure-design-system.css)
15 
16- Always start by referencing [sure-design-system.css](mdc:app/assets/tailwind/sure-design-system.css) to see the base primitives, functional tokens, and component tokens we use in the codebase
17- Always prefer using the functional "tokens" defined in @sure-design-system.css when possible.
18  - Example 1: use `text-primary` rather than `text-white`
19  - Example 2: use `bg-container` rather than `bg-white`
20  - Example 3: use `border border-primary` rather than `border border-gray-200`
21- Never create new styles in [sure-design-system.css](mdc:app/assets/tailwind/sure-design-system.css) or [application.css](mdc:app/assets/tailwind/application.css) without explicitly receiving permission to do so
22- Always generate semantic HTML
23 
24