Skip to content

Commit fb8c393

Browse files
rbro112rbro112
authored
chore(AI): Add initial frontend AGENTS.md file (#101265)
Adds a relatively basic AGENTS.md file (https://agents.md) that specifies frontend rules and particularly specifies frontend component usage best practices starting with typography and layout components. Removes CLAUDE.md and creates a CLAUDE.md symlink to point to AGENTS.md (per https://agents.md/#examples FAQ). Also point BUGBOT.md to try to use AGENTS.md
1 parent 06cd926 commit fb8c393

File tree

3 files changed

+347
-431
lines changed

3 files changed

+347
-431
lines changed

‎static/.cursor/BUGBOT.md‎

Lines changed: 1 addition & 210 deletions
Original file line numberDiff line numberDiff line change
@@ -6,213 +6,4 @@ CRITICAL:
66

77
- Only warn about newly added calls to styled() and do not warn on PRs that modify existing styled() calls
88
- If you are suggesting to use a Layout or Typography component, read it's implementation to make sure suggestions conform to the actual implementation - this is super important!
9-
10-
#### Splitting layout and typography
11-
12-
- Split Layout from Typography by directly using Flex, Grid, Stack or Container and Text or Heading components
13-
14-
```tsx
15-
// ❌ Do not couple typography with layout
16-
const Component = styled('div')`
17-
display: flex;
18-
flex-directon: column;
19-
color: ${p => p.theme.subText};
20-
font-size: ${p => p.theme.fontSize.lg};
21-
`;
22-
23-
// ✅ Use the Layout primitives and Text component
24-
<Flex direction="column">
25-
<Text muted size="lg">...</Text>
26-
<Flex>
27-
```
28-
29-
#### Layout
30-
31-
- Use <Grid> from `sentry/components/core/layout` for elements that require grid layout as opposed to styled components with `display: grid`
32-
33-
```tsx
34-
import {Grid} from 'sentry/components/core/layout';
35-
36-
// ❌ No need to use styled and create a new styled component
37-
const Component = styled('div')`
38-
display: flex;
39-
flex-directon: column;
40-
`;
41-
42-
// ✅ Use the Grid layout primitive
43-
<Grid direction="column"></Grid>;
44-
```
45-
46-
- Use <Flex> from `sentry/components/core/layout` for elements that require flex layout as opposed to styled components with `display: flex`.
47-
48-
```tsx
49-
import {Flex} from 'sentry/components/core/layout';
50-
51-
// ❌ No need to use styled and create a new styled component
52-
const Component = styled('div')`
53-
display: flex;
54-
flex-directon: column;
55-
`;
56-
57-
// ✅ Use the Flex layout primitive
58-
<Flex direction="column"></Flex>;
59-
```
60-
61-
- Use using <Container> from `sentry/components/core/layout` over simple elements that require a border or border radius.
62-
63-
```tsx
64-
import {Container} from 'sentry/components/core/layout';
65-
66-
// ❌ No need to use styled and create a new styled component
67-
const Component = styled('div')`
68-
padding: space(2);
69-
border: 1px solid ${p => p.theme.tokens.border.primary};
70-
`;
71-
72-
// ✅ Use the Container primitive
73-
<Container padding="md" border="primary"></Container>;
74-
```
75-
76-
- Use responsive props instead of styled media queries for Flex, Grid and Container.
77-
78-
```tsx
79-
import {Flex} from 'sentry/components/core/layout';
80-
81-
// ❌ No need to use styled and create a new styled component
82-
const Component = styled('div')`
83-
display: flex;
84-
flex-directon: column;
85-
86-
@media screen and (min-width: ${p => p.theme.breakpoints.md}) {
87-
flex-direction: row;
88-
}
89-
`;
90-
91-
// ✅ Use the responsive prop signature
92-
<Flex direction={{xs: 'column', md: 'row'}}></Flex>;
93-
```
94-
95-
- Prefer the use of gap or padding over margin.
96-
97-
#### Typography
98-
99-
- Use <Heading> from `sentry/components/core/text` for headings instead of styled components that style heading typography.
100-
101-
```tsx
102-
import {Heading} from 'sentry/components/core/text';
103-
104-
// ❌ No need to use styled and create a new styled component
105-
const Title = styled('h2')`
106-
font-size: ${p => p.theme.fontSize.md};
107-
font-weight: bold;
108-
`;
109-
110-
// ✅ Use the Heading typography primitive
111-
<Heading as="h2">Heading</Heading>;
112-
```
113-
114-
- Use <Text> from `sentry/components/core/text` for text styling instead of styled components that handle typography features like color, overflow, font-size, font-weight.
115-
116-
```tsx
117-
import {Text} from 'sentry/components/core/text';
118-
119-
// ❌ No need to use styled and create a new styled component
120-
const Label = styled('span')`
121-
color: ${p => p.theme.subText};
122-
font-size: ${p => p.theme.fontSizes.small};
123-
`;
124-
125-
// ✅ Use the Text typography primitive
126-
<Text variant="muted" size="sm">
127-
Text
128-
</Text>;
129-
```
130-
131-
- Do not use or style h1, h2, h3, h4, h5, h6 intrinsic elements. Prefer using <Heading as="h1...h6">title</Heading> component instead
132-
133-
```tsx
134-
import {Heading} from 'sentry/components/core/text';
135-
136-
// ❌ No need to use styled and create a new styled component
137-
const Title = styled('h4')`
138-
color: ${p => p.theme.subText};
139-
font-size: ${p => p.theme.fontSizes.small};
140-
`;
141-
142-
// ❌ Do not use intrinsic heading elements directly
143-
function Component(){
144-
return <h4>Title<h4>
145-
}
146-
147-
// ✅ Use the Heading typography primitive
148-
<Heading as="h4">Title</Heading>;
149-
150-
// ✅ Use the Heading typography primitive
151-
function Component(){
152-
return <Heading as="h4">Title</Heading>
153-
}
154-
```
155-
156-
- Do not use or style intrinsic elements like. Prefer using <Text as="p | span | div">text...</Text> component instead
157-
158-
```tsx
159-
import {Text} from 'sentry/components/core/text';
160-
161-
// ❌ Do not style intrinsic elements directly
162-
const Paragraph = styled('p')`
163-
color: ${p => p.theme.subText};
164-
line-height: 1.5;
165-
`;
166-
167-
const Label = styled('span')`
168-
font-weight: bold;
169-
text-transform: uppercase;
170-
`;
171-
172-
// ❌ Do not use raw intrinsic elements
173-
function Content() {
174-
return (
175-
<div>
176-
<p>This is a paragraph of content</p>
177-
<span>Status: Active</span>
178-
<div>Container content</div>
179-
</div>
180-
);
181-
}
182-
183-
// ✅ Use Text component with semantic HTML via 'as' prop
184-
function Content() {
185-
return (
186-
<div>
187-
<Text as="p" variant="muted" density="comfortable">
188-
This is a paragraph of content
189-
</Text>
190-
<Text as="span" bold uppercase>
191-
Status: Active
192-
</Text>
193-
<Text as="div">Container content</Text>
194-
</div>
195-
);
196-
}
197-
```
198-
199-
Use the core component <Image/> component instead of intrinsic img.
200-
201-
```tsx
202-
// ❌ Do not use raw intrinsic elements or static paths
203-
function Component() {
204-
return (
205-
<img src="/path/to/image.jpg" />
206-
);
207-
}
208-
209-
// ✅ Use Image component and src loader
210-
import {Image} from 'sentry/componetn/core/image';
211-
import image from 'sentry-images/example.jpg';
212-
213-
function Component() {
214-
return (
215-
<Image src={imagePath} alt="Descriptive Alt Attribute">
216-
);
217-
}
218-
```
9+
- Use the local-most AGENTS.md as a primary guideline for any code you're reviewing.

0 commit comments

Comments
 (0)