1 files changed, 0 insertions, 149 deletions
diff --git a/packages/cloud/app/.opencode/agent/css.md b/packages/cloud/app/.opencode/agent/css.md
deleted file mode 100644
index d0ec43a48..000000000
--- a/packages/cloud/app/.opencode/agent/css.md
+++ /dev/null
@@ -1,149 +0,0 @@
----
-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 IN YOUR CSS - 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.
-
-**IMPORTANT: This hierarchy rule applies to CSS structure, NOT JSX/DOM structure.**
-
-The hierarchy in css file does NOT have to match the hierarchy in the dom - you
-can put components or slots at the same level in CSS even if one goes inside another in the DOM.
-
-Your JSX can nest however makes semantic sense - components can be inside slots,
-slots can contain components, etc. The DOM structure should be whatever makes the most
-semantic and functional sense.
-
-It is more important to follow the pages -> components -> slots structure IN YOUR CSS,
-while keeping your JSX/DOM structure logical and semantic.
-
-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"`
-
-## Example of correct implementation
-
-JSX can nest however makes sense semantically:
-
-```jsx
-<div data-slot="left">
-  <div data-component="title">Section Title</div>
-  <div data-slot="content">Content here</div>
-</div>
-```
-
-CSS maintains clean hierarchy regardless of DOM nesting:
-
-```css
-[data-page="home"] {
-  [data-component="screenshots"] {
-    [data-slot="left"] {
-      /* styles */
-    }
-    [data-slot="content"] {
-      /* styles */
-    }
-  }
-
-  [data-component="title"] {
-    /* can be at same level even though nested in DOM */
-  }
-}
-```
-
-## Reusable Components
-
-If a component is reused across multiple sections of the same page, define it at the page level:
-
-```jsx
-<!-- Used in multiple places on the same page -->
-<section data-component="install">
-  <div data-component="method">
-    <h3 data-component="title">npm</h3>
-  </div>
-  <div data-component="method">
-    <h3 data-component="title">bun</h3>
-  </div>
-</section>
-
-<section data-component="screenshots">
-  <div data-slot="left">
-    <div data-component="title">Screenshot Title</div>
-  </div>
-</section>
-```
-
-```css
-[data-page="home"] {
-  /* Reusable title component defined at page level since it's used in multiple components */
-  [data-component="title"] {
-    text-transform: uppercase;
-    font-weight: 400;
-  }
-
-  [data-component="install"] {
-    /* install-specific styles */
-  }
-
-  [data-component="screenshots"] {
-    /* screenshots-specific styles */
-  }
-}
-```
-
-This is correct because the `title` component has consistent styling and behavior across the page.
-
-## Key Clarifications
-
-1. **JSX Nesting is Flexible**: Components can be nested inside slots, slots can contain components - whatever makes semantic sense
-2. **CSS Hierarchy is Strict**: Follow pages → components → slots structure in CSS
-3. **Reusable Components**: Define at the appropriate level where they're shared (page level if used across the page, component level if only used within that component)
-4. **DOM vs CSS Structure**: These don't need to match - optimize each for its purpose
-
-See ./src/routes/index.css and ./src/routes/index.tsx for a complete example.