resolve conflicts

Author: srest2021

.agents/skills/cell-architecture/SKILL.md

@@ -51,7 +51,7 @@ import {Container} from '@sentry/scraps/layout';
 
 // ❌ Don't create styled components
 const Component = styled('div')`
-  padding: ${space(2)};
+  padding: ${p => p.theme.space.md};
   border: 1px solid ${p => p.theme.tokens.border.primary};
 `;
 
@@ -119,7 +119,7 @@ import {Grid} from '@sentry/scraps/layout';
 const Component = styled('div')`
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: ${space(2)};
+  gap: ${p => p.theme.space.md};
 `;
 
 // ✅ Use Grid primitive
@@ -147,7 +147,7 @@ import {Stack} from '@sentry/scraps/layout';
 const Component = styled('div')`
   display: flex;
   flex-direction: column;
-  gap: ${space(2)};
+  gap: ${p => p.theme.space.md};
 `;
 
 // ✅ Use Stack primitive (automatically column direction)
@@ -204,7 +204,7 @@ import {Text} from '@sentry/scraps/text';
 // ❌ Don't create styled text components
 const Label = styled('span')`
   color: ${p => p.theme.tokens.content.secondary};
-  font-size: ${p => p.theme.fontSizes.small};
+  font-size: ${p => p.theme.font.size.sm};
 `;
 
 // ❌ Don't use raw elements
@@ -242,7 +242,7 @@ import {Heading} from '@sentry/scraps/text';
 
 // ❌ Don't style heading elements
 const Title = styled('h2')`
-  font-size: ${p => p.theme.fontSize.md};
+  font-size: ${p => p.theme.font.size.md};
   font-weight: bold;
 `;
 
@@ -401,7 +401,7 @@ Container supports `margin` props but they are deprecated. Use `gap` on parent c
 ```tsx
 // ❌ Don't use margin between children
 const Child = styled('div')`
-  margin-right: ${p => p.theme.spacing.lg};
+  margin-right: ${p => p.theme.space.lg};
 `;
 
 // ✅ Use gap on parent container
@@ -421,7 +421,7 @@ const Component = styled('div')`
   display: flex;
   flex-direction: column;
   color: ${p => p.theme.tokens.content.secondary};
-  font-size: ${p => p.theme.fontSize.lg};
+  font-size: ${p => p.theme.font.size.lg};
 `;
 
 // ✅ Split into layout and typography primitives