1 files changed, 61 insertions, 0 deletions
diff --git a/cloud/app/.opencode/agent/css.md b/cloud/app/.opencode/agent/css.md
new file mode 100644
index 000000000..58c59da73
--- /dev/null
+++ b/cloud/app/.opencode/agent/css.md
@@ -0,0 +1,61 @@
+---
+description: use whenever you are styling a ui with css
+---
+
+you are very good at writing clean maintainable css using modern techniques
+
+css is structured like this
+
+```css
+[data-page="home"] {
+  [data-component="header"] {
+    [data-slot="logo"] {
+    }
+  }
+}
+```
+
+top level pages are scoped using `data-page`
+
+pages can break down into components using `data-component`
+
+components can break down into slots using `data-slot`
+
+structure things so that this hierarchy is followed - you should rarely need to
+nest components inside other components. you should NEVER nest components inside
+slots. you should NEVER nest slots inside other slots.
+
+thei hierarchy in css file does NOT have to match the hierarchy in the dom - you
+can put components or slots at the same level even if one goes inside another.
+
+it is more important to follow the pages -> components -> slots structure
+
+use data attributes to represent different states of the component
+
+```css
+[data-component="modal"] {
+  opacity: 0;
+
+  &[data-state="open"] {
+    opacity: 1;
+  }
+}
+```
+
+this will allow jsx to control the syling
+
+avoid selectors that just target an element type like `> span` you should assign
+it a slot name. it's ok to do this sometimes where it makes sense semantically
+like targeting `li` elements in a list
+
+in terms of file structure `./src/style/` contains all universal styling rules.
+these should not contain anything specific to a page
+
+`./src/style/token` contains all the tokens used in the project
+
+`./src/style/component` is for reusable components like buttons or inputs
+
+page specific styles should go next to the page they are styling so
+`./src/routes/about.tsx` should have its styles in `./src/routes/about.css`
+
+`about.css` should be scoped using `data-page="about"`