linear skill

pi/files.macos/agent/skills/attio-frontend-rules/SKILL.md

@@ -1,3 +1,8 @@
+---
+name: attio-frontend-rules
+description: Styling conventions and component guidelines for the Attio frontend codebase. Covers styled-components patterns, transient props, data attributes, spacing, color tokens, and design system usage. Use when modifying frontend UI code in the Attio monorepo.
+---
+
 # Attio Frontend Rules
 
 Guidelines and conventions for working on the Attio frontend codebase. Use whenever modifying the frontend.
@@ -52,6 +57,26 @@ export function Stack({..., className}: {..., className: string | undefined}) {
 
 If the same re-styling is applied multiple times, it should become its own reusable component (or component variant).
 
+### Layout.Stack defaults
+
+`Layout.Stack` defaults `align` to `"center"` (i.e. `align-items: center`). **Always explicitly set `align="flex-start"`** when you need left/top alignment — don't assume it will be the default.
+
+```tsx
+// Good — explicit alignment
+<Layout.Stack direction="column" align="flex-start">
+    <Typography.Body.Standard.Component>Title</Typography.Body.Standard.Component>
+    <Typography.Caption.Standard.Component>Description</Typography.Caption.Standard.Component>
+</Layout.Stack>
+
+// Bad — text will be centered, not left-aligned
+<Layout.Stack direction="column">
+    <Typography.Body.Standard.Component>Title</Typography.Body.Standard.Component>
+    <Typography.Caption.Standard.Component>Description</Typography.Caption.Standard.Component>
+</Layout.Stack>
+```
+
+Other useful `Layout.Stack` props: `direction`, `justify`, `gap`, `flex`, `shrink`, `minWidth`, `width`, `height`, and all spacing props (`p`, `px`, `py`, `pt`, `pb`, `pl`, `pr`, `m`, `mx`, `my`, etc.). **Always prefer these props over writing custom styled divs with `display: flex`.**
+
 ### Avoid layout assumptions
 
 Components should not generally include external layout styles such as `width`, `z-index`, `margin` or `flex`. These properties should instead be set by the parent component using a `styled(MyComponent)` override.