codingwithagent 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +37 -0
- package/bin/init.js +257 -0
- package/package.json +56 -0
- package/templates/accessibility/.cursorrules +342 -0
- package/templates/accessibility/README.md +47 -0
- package/templates/antigravity/accessibility/.agent/rules/accessibility.md +501 -0
- package/templates/antigravity/accessibility/.agent/rules/aria-patterns.md +568 -0
- package/templates/antigravity/accessibility/.agent/rules/wcag-standard.md +225 -0
- package/templates/antigravity/accessibility/README.md +42 -0
- package/templates/antigravity/minimal/.agent/rules/accessibility.md +53 -0
- package/templates/antigravity/minimal/.agent/rules/code-quality.md +86 -0
- package/templates/antigravity/minimal/.agent/rules/react-components.md +164 -0
- package/templates/antigravity/minimal/README.md +34 -0
- package/templates/antigravity/standard/.agent/rules/accessibility.md +98 -0
- package/templates/antigravity/standard/.agent/rules/code-quality.md +166 -0
- package/templates/antigravity/standard/.agent/rules/pull-request-review.md +192 -0
- package/templates/antigravity/standard/.agent/rules/react-components.md +204 -0
- package/templates/antigravity/standard/.agent/rules/testing.md +197 -0
- package/templates/antigravity/standard/README.md +39 -0
- package/templates/antigravity/strict/.agent/README.md +46 -0
- package/templates/antigravity/strict/.agent/rules/accessibility.md +199 -0
- package/templates/antigravity/strict/.agent/rules/code-quality.md +268 -0
- package/templates/antigravity/strict/.agent/rules/pull-request-review.md +114 -0
- package/templates/antigravity/strict/.agent/rules/react-components.md +423 -0
- package/templates/antigravity/strict/.agent/rules/security.md +483 -0
- package/templates/antigravity/strict/.agent/rules/testing.md +280 -0
- package/templates/minimal/.cursorrules +48 -0
- package/templates/minimal/README.md +40 -0
- package/templates/standard/.cursorrules +184 -0
- package/templates/standard/README.md +43 -0
- package/templates/strict/.cursorrules +227 -0
- package/templates/strict/README.md +47 -0
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
---
|
|
2
|
+
trigger: always_on
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# WCAG 2.1 Standards Quick Reference
|
|
6
|
+
|
|
7
|
+
## Level A (Required)
|
|
8
|
+
|
|
9
|
+
### 1.1.1 Non-text Content
|
|
10
|
+
|
|
11
|
+
All images have alt text (or alt="" if decorative)
|
|
12
|
+
|
|
13
|
+
### 1.2.1 Audio/Video-only
|
|
14
|
+
|
|
15
|
+
Provide transcripts or text alternatives
|
|
16
|
+
|
|
17
|
+
### 1.2.2 Captions (Prerecorded)
|
|
18
|
+
|
|
19
|
+
All videos have captions
|
|
20
|
+
|
|
21
|
+
### 1.2.3 Audio Description
|
|
22
|
+
|
|
23
|
+
Provide audio descriptions for video
|
|
24
|
+
|
|
25
|
+
### 1.3.1 Info and Relationships
|
|
26
|
+
|
|
27
|
+
Use semantic HTML (headings, lists, tables, labels)
|
|
28
|
+
|
|
29
|
+
### 1.3.2 Meaningful Sequence
|
|
30
|
+
|
|
31
|
+
Reading order matches visual order
|
|
32
|
+
|
|
33
|
+
### 1.3.3 Sensory Characteristics
|
|
34
|
+
|
|
35
|
+
Don't rely on shape, size, location, or color alone
|
|
36
|
+
|
|
37
|
+
### 1.4.1 Use of Color
|
|
38
|
+
|
|
39
|
+
Don't use color alone to convey information
|
|
40
|
+
|
|
41
|
+
### 1.4.2 Audio Control
|
|
42
|
+
|
|
43
|
+
Provide pause/stop for auto-playing audio
|
|
44
|
+
|
|
45
|
+
### 2.1.1 Keyboard
|
|
46
|
+
|
|
47
|
+
All functionality available via keyboard
|
|
48
|
+
|
|
49
|
+
### 2.1.2 No Keyboard Trap
|
|
50
|
+
|
|
51
|
+
Users can navigate away from all components
|
|
52
|
+
|
|
53
|
+
### 2.1.4 Character Key Shortcuts
|
|
54
|
+
|
|
55
|
+
Single-key shortcuts can be turned off/remapped
|
|
56
|
+
|
|
57
|
+
### 2.2.1 Timing Adjustable
|
|
58
|
+
|
|
59
|
+
Users can turn off, adjust, or extend time limits
|
|
60
|
+
|
|
61
|
+
### 2.2.2 Pause, Stop, Hide
|
|
62
|
+
|
|
63
|
+
Control moving, blinking, or scrolling content
|
|
64
|
+
|
|
65
|
+
### 2.3.1 Three Flashes
|
|
66
|
+
|
|
67
|
+
Nothing flashes more than 3 times per second
|
|
68
|
+
|
|
69
|
+
### 2.4.1 Bypass Blocks
|
|
70
|
+
|
|
71
|
+
Skip links or landmarks to bypass repeated content
|
|
72
|
+
|
|
73
|
+
### 2.4.2 Page Titled
|
|
74
|
+
|
|
75
|
+
Pages have descriptive titles
|
|
76
|
+
|
|
77
|
+
### 2.4.3 Focus Order
|
|
78
|
+
|
|
79
|
+
Focus order is logical
|
|
80
|
+
|
|
81
|
+
### 2.4.4 Link Purpose
|
|
82
|
+
|
|
83
|
+
Link text describes destination
|
|
84
|
+
|
|
85
|
+
### 2.5.1 Pointer Gestures
|
|
86
|
+
|
|
87
|
+
Multipoint/path gestures have single-pointer alternative
|
|
88
|
+
|
|
89
|
+
### 2.5.2 Pointer Cancellation
|
|
90
|
+
|
|
91
|
+
Click functions trigger on up-event
|
|
92
|
+
|
|
93
|
+
### 2.5.3 Label in Name
|
|
94
|
+
|
|
95
|
+
Visible label matches accessible name
|
|
96
|
+
|
|
97
|
+
### 2.5.4 Motion Actuation
|
|
98
|
+
|
|
99
|
+
Motion-triggered functions have UI alternative
|
|
100
|
+
|
|
101
|
+
### 3.1.1 Language of Page
|
|
102
|
+
|
|
103
|
+
`<html lang="en">`
|
|
104
|
+
|
|
105
|
+
### 3.2.1 On Focus
|
|
106
|
+
|
|
107
|
+
Focus doesn't trigger unexpected changes
|
|
108
|
+
|
|
109
|
+
### 3.2.2 On Input
|
|
110
|
+
|
|
111
|
+
Input doesn't trigger unexpected changes
|
|
112
|
+
|
|
113
|
+
### 3.3.1 Error Identification
|
|
114
|
+
|
|
115
|
+
Errors are identified in text
|
|
116
|
+
|
|
117
|
+
### 3.3.2 Labels or Instructions
|
|
118
|
+
|
|
119
|
+
Form fields have labels
|
|
120
|
+
|
|
121
|
+
### 4.1.1 Parsing
|
|
122
|
+
|
|
123
|
+
HTML validates (no duplicate IDs, proper nesting)
|
|
124
|
+
|
|
125
|
+
### 4.1.2 Name, Role, Value
|
|
126
|
+
|
|
127
|
+
All UI components have accessible name, role, value
|
|
128
|
+
|
|
129
|
+
### 4.1.3 Status Messages
|
|
130
|
+
|
|
131
|
+
Status updates announced to screen readers
|
|
132
|
+
|
|
133
|
+
## Level AA (Required)
|
|
134
|
+
|
|
135
|
+
### 1.2.4 Captions (Live)
|
|
136
|
+
|
|
137
|
+
Live audio has captions
|
|
138
|
+
|
|
139
|
+
### 1.2.5 Audio Description
|
|
140
|
+
|
|
141
|
+
All videos have audio descriptions
|
|
142
|
+
|
|
143
|
+
### 1.3.4 Orientation
|
|
144
|
+
|
|
145
|
+
Works in portrait and landscape
|
|
146
|
+
|
|
147
|
+
### 1.3.5 Identify Input Purpose
|
|
148
|
+
|
|
149
|
+
Input fields have autocomplete attributes
|
|
150
|
+
|
|
151
|
+
### 1.4.3 Contrast (Minimum)
|
|
152
|
+
|
|
153
|
+
- Text: 4.5:1 contrast
|
|
154
|
+
- Large text: 3:1 contrast
|
|
155
|
+
|
|
156
|
+
### 1.4.4 Resize Text
|
|
157
|
+
|
|
158
|
+
Text resizes to 200% without loss of content
|
|
159
|
+
|
|
160
|
+
### 1.4.5 Images of Text
|
|
161
|
+
|
|
162
|
+
Avoid images of text (use real text)
|
|
163
|
+
|
|
164
|
+
### 1.4.10 Reflow
|
|
165
|
+
|
|
166
|
+
Content reflows at 320px without horizontal scroll
|
|
167
|
+
|
|
168
|
+
### 1.4.11 Non-text Contrast
|
|
169
|
+
|
|
170
|
+
UI components have 3:1 contrast
|
|
171
|
+
|
|
172
|
+
### 1.4.12 Text Spacing
|
|
173
|
+
|
|
174
|
+
Adjustable text spacing without loss of content
|
|
175
|
+
|
|
176
|
+
### 1.4.13 Content on Hover/Focus
|
|
177
|
+
|
|
178
|
+
Hoverable, dismissible, persistent
|
|
179
|
+
|
|
180
|
+
### 2.4.5 Multiple Ways
|
|
181
|
+
|
|
182
|
+
Multiple ways to find pages (menu, search, sitemap)
|
|
183
|
+
|
|
184
|
+
### 2.4.6 Headings and Labels
|
|
185
|
+
|
|
186
|
+
Headings and labels are descriptive
|
|
187
|
+
|
|
188
|
+
### 2.4.7 Focus Visible
|
|
189
|
+
|
|
190
|
+
Keyboard focus indicator is visible
|
|
191
|
+
|
|
192
|
+
### 3.1.2 Language of Parts
|
|
193
|
+
|
|
194
|
+
Language changes marked with lang attribute
|
|
195
|
+
|
|
196
|
+
### 3.2.3 Consistent Navigation
|
|
197
|
+
|
|
198
|
+
Navigation is consistent across pages
|
|
199
|
+
|
|
200
|
+
### 3.2.4 Consistent Identification
|
|
201
|
+
|
|
202
|
+
Components with same function have same labels
|
|
203
|
+
|
|
204
|
+
### 3.3.3 Error Suggestion
|
|
205
|
+
|
|
206
|
+
Provide suggestions for fixing errors
|
|
207
|
+
|
|
208
|
+
### 3.3.4 Error Prevention
|
|
209
|
+
|
|
210
|
+
Confirm/undo for legal/financial/data submissions
|
|
211
|
+
|
|
212
|
+
## Quick Testing Checklist
|
|
213
|
+
|
|
214
|
+
- [ ] All images have alt text
|
|
215
|
+
- [ ] Keyboard navigation works
|
|
216
|
+
- [ ] Focus indicators visible
|
|
217
|
+
- [ ] Color contrast 4.5:1+
|
|
218
|
+
- [ ] Forms have labels
|
|
219
|
+
- [ ] Headings in order (h1→h2→h3)
|
|
220
|
+
- [ ] Screen reader tested
|
|
221
|
+
- [ ] Works at 200% zoom
|
|
222
|
+
- [ ] Touch targets 44x44px
|
|
223
|
+
- [ ] No auto-playing audio/video
|
|
224
|
+
- [ ] Status messages announced
|
|
225
|
+
- [ ] Valid HTML (W3C validator)
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
# Antigravity - Accessibility Profile
|
|
2
|
+
|
|
3
|
+
Deep accessibility focus with WCAG 2.1+ priority.
|
|
4
|
+
|
|
5
|
+
## What's Included
|
|
6
|
+
|
|
7
|
+
3 comprehensive accessibility rule files:
|
|
8
|
+
|
|
9
|
+
- `accessibility.md` - POUR principles, testing requirements
|
|
10
|
+
- `wcag-standards.md` - WCAG 2.1 Level A/AA reference
|
|
11
|
+
- `aria-patterns.md` - Common ARIA patterns and best practices
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npx codingwithagent init
|
|
17
|
+
# Select tool: 3. Antigravity
|
|
18
|
+
# Select profile: 4. Accessibility
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Files created
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
.agent/rules/
|
|
25
|
+
├── accessibility.md
|
|
26
|
+
├── wcag-standards.md
|
|
27
|
+
└── aria-patterns.md
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Testing Requirements
|
|
31
|
+
|
|
32
|
+
- Screen reader testing mandatory
|
|
33
|
+
- Keyboard navigation required
|
|
34
|
+
- Color contrast verification
|
|
35
|
+
- Lighthouse accessibility: 100
|
|
36
|
+
|
|
37
|
+
## Best For
|
|
38
|
+
|
|
39
|
+
- Government projects
|
|
40
|
+
- Healthcare applications
|
|
41
|
+
- Educational platforms
|
|
42
|
+
- WCAG compliance required
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
---
|
|
2
|
+
trigger: always_on
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Accessibility Basics
|
|
6
|
+
|
|
7
|
+
## Core Requirements
|
|
8
|
+
|
|
9
|
+
- All interactive elements must be keyboard accessible (Tab, Enter, Space)
|
|
10
|
+
- Provide alt text for images that convey information
|
|
11
|
+
- Use semantic HTML elements (button, nav, main, header, footer)
|
|
12
|
+
- Minimum color contrast: 4.5:1 for normal text
|
|
13
|
+
|
|
14
|
+
## Keyboard Navigation
|
|
15
|
+
|
|
16
|
+
- Support Tab key for navigation
|
|
17
|
+
- Support Enter/Space for activation
|
|
18
|
+
- Visible focus indicators required
|
|
19
|
+
- Never use `tabIndex > 0`
|
|
20
|
+
|
|
21
|
+
## Screen Readers
|
|
22
|
+
|
|
23
|
+
- Use semantic HTML first (button instead of div with onClick)
|
|
24
|
+
- Provide alt text for meaningful images
|
|
25
|
+
- Use alt="" for decorative images
|
|
26
|
+
- Form fields must have associated labels
|
|
27
|
+
|
|
28
|
+
## Color and Contrast
|
|
29
|
+
|
|
30
|
+
- Text must have 4.5:1 contrast ratio minimum
|
|
31
|
+
- Don't use color alone to convey information
|
|
32
|
+
- Add icons or text labels in addition to color
|
|
33
|
+
|
|
34
|
+
## Forms
|
|
35
|
+
|
|
36
|
+
- All inputs must have labels
|
|
37
|
+
- Indicate required fields clearly
|
|
38
|
+
- Provide helpful error messages
|
|
39
|
+
- Support keyboard navigation
|
|
40
|
+
|
|
41
|
+
## Testing
|
|
42
|
+
|
|
43
|
+
- Test with keyboard only (no mouse)
|
|
44
|
+
- Use browser accessibility tools (Axe, Lighthouse)
|
|
45
|
+
- Check color contrast with analyzer tool
|
|
46
|
+
|
|
47
|
+
## Quick Checklist
|
|
48
|
+
|
|
49
|
+
- [ ] Can I navigate with keyboard only?
|
|
50
|
+
- [ ] Do all images have alt text?
|
|
51
|
+
- [ ] Are buttons actually button elements?
|
|
52
|
+
- [ ] Do form fields have labels?
|
|
53
|
+
- [ ] Is color contrast sufficient?
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
---
|
|
2
|
+
trigger: always_on
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Code Quality Essentials
|
|
6
|
+
|
|
7
|
+
## Naming Conventions
|
|
8
|
+
|
|
9
|
+
- Variables & functions: `camelCase` (getUserData, isValid)
|
|
10
|
+
- Components: `PascalCase` (UserProfile, Button)
|
|
11
|
+
- Constants: `UPPER_SNAKE_CASE` (MAX_RETRIES, API_URL)
|
|
12
|
+
- Be descriptive: `isUserAuthenticated` not `isAuth`
|
|
13
|
+
|
|
14
|
+
## JavaScript Basics
|
|
15
|
+
|
|
16
|
+
- Use `const` by default, `let` only when reassigning
|
|
17
|
+
- Never use `var`
|
|
18
|
+
- Use arrow functions for callbacks
|
|
19
|
+
- Remove `console.log` before committing
|
|
20
|
+
- Use template literals: \`Hello ${name}\` not "Hello " + name
|
|
21
|
+
|
|
22
|
+
## Functions
|
|
23
|
+
|
|
24
|
+
- Keep functions small (under 50 lines)
|
|
25
|
+
- Functions should do one thing
|
|
26
|
+
- Use descriptive names that explain what they do
|
|
27
|
+
- Avoid deeply nested code (max 3 levels)
|
|
28
|
+
|
|
29
|
+
## Code Organization
|
|
30
|
+
|
|
31
|
+
- One component per file
|
|
32
|
+
- Group related files in folders
|
|
33
|
+
- Import order: React, libraries, local files
|
|
34
|
+
- Remove unused imports and code
|
|
35
|
+
|
|
36
|
+
## Common Patterns
|
|
37
|
+
|
|
38
|
+
### Good Practices
|
|
39
|
+
|
|
40
|
+
```javascript
|
|
41
|
+
// Destructure props
|
|
42
|
+
const Button = ({ onClick, label }) => (
|
|
43
|
+
<button onClick={onClick}>{label}</button>
|
|
44
|
+
);
|
|
45
|
+
|
|
46
|
+
// Use early returns
|
|
47
|
+
const getStatus = (user) => {
|
|
48
|
+
if (!user) return "guest";
|
|
49
|
+
if (user.isPremium) return "premium";
|
|
50
|
+
return "standard";
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
// Named functions for handlers
|
|
54
|
+
const handleClick = () => {
|
|
55
|
+
console.log("clicked");
|
|
56
|
+
};
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Avoid
|
|
60
|
+
|
|
61
|
+
```javascript
|
|
62
|
+
// Don't access props directly
|
|
63
|
+
const Button = (props) => (
|
|
64
|
+
<button onClick={props.onClick}>{props.label}</button>
|
|
65
|
+
);
|
|
66
|
+
|
|
67
|
+
// Don't use anonymous functions in JSX
|
|
68
|
+
<button onClick={() => handleClick()}>Click</button>;
|
|
69
|
+
|
|
70
|
+
// Don't nest too deeply
|
|
71
|
+
if (condition1) {
|
|
72
|
+
if (condition2) {
|
|
73
|
+
if (condition3) {
|
|
74
|
+
// too deep!
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## Quick Checklist
|
|
81
|
+
|
|
82
|
+
- [] Descriptive variable name?
|
|
83
|
+
- [] Functions under 50 lines?
|
|
84
|
+
- [] No console.log statements?
|
|
85
|
+
- [] Imports organized?
|
|
86
|
+
- [] Dead code removed?
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
---
|
|
2
|
+
trigger: always_on
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# React Component Basics
|
|
6
|
+
|
|
7
|
+
## Component Structure
|
|
8
|
+
|
|
9
|
+
- Use functional components with hooks (not class components)
|
|
10
|
+
- Destructure props at function signature
|
|
11
|
+
- Keep components under 200 lines
|
|
12
|
+
- One component per file
|
|
13
|
+
|
|
14
|
+
## Props
|
|
15
|
+
|
|
16
|
+
````javascript
|
|
17
|
+
// Good: Destructure props
|
|
18
|
+
const UserCard = ({name, email, onEdit}) => (
|
|
19
|
+
<div>
|
|
20
|
+
<h2>{name}</h2>
|
|
21
|
+
<p>{email}</p>
|
|
22
|
+
<button onClick={onEdit}>Edit</button>
|
|
23
|
+
</div>
|
|
24
|
+
);
|
|
25
|
+
|
|
26
|
+
// Bad: Using props object
|
|
27
|
+
const UserCard = (props) => (
|
|
28
|
+
<div>
|
|
29
|
+
<h2>{props.name}</h2>
|
|
30
|
+
<p>{props.email}</p>
|
|
31
|
+
<button onClick={props.onEdit}>Edit</button>
|
|
32
|
+
</div>
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
## Hooks Basic
|
|
36
|
+
|
|
37
|
+
### useState
|
|
38
|
+
Use for local UI state only (modals, toggles, input values)
|
|
39
|
+
```javascript
|
|
40
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
41
|
+
const [count, setCount] = useState(0);
|
|
42
|
+
````
|
|
43
|
+
|
|
44
|
+
### useEffect
|
|
45
|
+
|
|
46
|
+
Use for side effects (API calls, subscriptions, timers)
|
|
47
|
+
|
|
48
|
+
```javascript
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
// Do something
|
|
51
|
+
fetchData();
|
|
52
|
+
|
|
53
|
+
// Cleanup (optional)
|
|
54
|
+
return () => cleanup();
|
|
55
|
+
}, [dependencies]); // Don't forget dependencies!
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### useCallback
|
|
59
|
+
|
|
60
|
+
Prevent function recreation on every render
|
|
61
|
+
|
|
62
|
+
```javascript
|
|
63
|
+
const handleClick = useCallback(() => {
|
|
64
|
+
doSomething();
|
|
65
|
+
}, [dependencies]);
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## JSX Best Practices
|
|
69
|
+
|
|
70
|
+
- Use semantic HTML (button, nav, header, footer)
|
|
71
|
+
- No anonymous functions in JSX: onClick={handleClick} not onClick={() => handleClick()}
|
|
72
|
+
- Keys must be from data, not array index: key={item.id} not key={index}
|
|
73
|
+
- Use fragments <></> instead of unnecessary divs
|
|
74
|
+
- Conditional rendering: use boolean values only
|
|
75
|
+
|
|
76
|
+
## Common Patterns
|
|
77
|
+
|
|
78
|
+
### Event Handlers
|
|
79
|
+
|
|
80
|
+
```javascript
|
|
81
|
+
// Good: Named function
|
|
82
|
+
const handleSubmit = (e) => {
|
|
83
|
+
e.preventDefault();
|
|
84
|
+
submitForm();
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
<form onSubmit={handleSubmit}>
|
|
88
|
+
|
|
89
|
+
// Bad: Anonymous function
|
|
90
|
+
<form onSubmit={(e) => {
|
|
91
|
+
e.preventDefault();
|
|
92
|
+
submitForm();
|
|
93
|
+
}}>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### Conditional Rendering
|
|
97
|
+
|
|
98
|
+
```javascript
|
|
99
|
+
// Good: Boolean condition
|
|
100
|
+
{
|
|
101
|
+
isLoggedIn && <Dashboard />;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// Good: Ternary for two states
|
|
105
|
+
{
|
|
106
|
+
isLoading ? <Spinner /> : <Content />;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// Bad: Can accidentally render "0"
|
|
110
|
+
{
|
|
111
|
+
count && <Display />;
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
### Lists
|
|
116
|
+
|
|
117
|
+
```javascript
|
|
118
|
+
// Good: Key from data
|
|
119
|
+
{
|
|
120
|
+
users.map((user) => <UserCard key={user.id} {...user} />);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// Bad: Index as key
|
|
124
|
+
{
|
|
125
|
+
users.map((user, index) => <UserCard key={index} {...user} />);
|
|
126
|
+
}
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
### Component Organization
|
|
130
|
+
|
|
131
|
+
```javascript
|
|
132
|
+
const MyComponent = ({ prop1, prop2 }) => {
|
|
133
|
+
// 1. Hooks
|
|
134
|
+
const [state, setState] = useState();
|
|
135
|
+
|
|
136
|
+
// 2. Event handlers
|
|
137
|
+
const handleClick = () => {
|
|
138
|
+
// handle click
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
// 3. Early returns
|
|
142
|
+
if (!prop1) return null;
|
|
143
|
+
|
|
144
|
+
// 4. Render
|
|
145
|
+
return <div>{/* JSX here */}</div>;
|
|
146
|
+
};
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
## Avoid
|
|
150
|
+
|
|
151
|
+
- Class components (use functional components)
|
|
152
|
+
- Direct DOM manipulation (use refs sparingly)
|
|
153
|
+
- Inline styles (use CSS/styled-components)
|
|
154
|
+
- Prop drilling beyond 3 levels (use context or Redux)
|
|
155
|
+
- Components over 200 lines (break them down)
|
|
156
|
+
|
|
157
|
+
## Quick Checklist
|
|
158
|
+
|
|
159
|
+
- [] Using functional components?
|
|
160
|
+
- [] Props destructured?
|
|
161
|
+
- [] Event handlers named?
|
|
162
|
+
- [] Keys from data, not index?
|
|
163
|
+
- [] Component under 200 lines?
|
|
164
|
+
- [] useEffect has dependencies?
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
# Antigravity - Minimal Profile
|
|
2
|
+
|
|
3
|
+
Essential rules for Antigravity AI agent in modular format.
|
|
4
|
+
|
|
5
|
+
## What's Included
|
|
6
|
+
|
|
7
|
+
3 focused rule files:
|
|
8
|
+
|
|
9
|
+
- `accessibility.md` - Basic a11y requirements
|
|
10
|
+
- `code-quality.md` - Essential patterns
|
|
11
|
+
- `react-components.md` - Component basics
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npx codingwithagent init
|
|
17
|
+
# Select tool: 3. Antigravity
|
|
18
|
+
# Select profile: 1. Minimal
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Files created
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
.agent/rules/
|
|
25
|
+
├── accessibility.md
|
|
26
|
+
├── code-quality.md
|
|
27
|
+
└── react-components.md
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Best for
|
|
31
|
+
|
|
32
|
+
- Getting started with Antigravity
|
|
33
|
+
- Small projects
|
|
34
|
+
- Learning the basics
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
---
|
|
2
|
+
trigger: always_on
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Accessibility Standards (A11y)
|
|
6
|
+
|
|
7
|
+
## Compliance Requirements
|
|
8
|
+
|
|
9
|
+
- Follow WCAG 2.1 Level AA standards (striving for 2.2)
|
|
10
|
+
- All functionality must be keyboard accessible
|
|
11
|
+
- Support screen readers (NVDA, JAWS, VoiceOver, TalkBack)
|
|
12
|
+
- Comply with DOT regulations for airline digital accessibility
|
|
13
|
+
|
|
14
|
+
## POUR Principles
|
|
15
|
+
|
|
16
|
+
- **Perceivable**: Everyone can "see" this (alt text, captions, sufficient contrast)
|
|
17
|
+
- **Operable**: Everyone can operate this (keyboard navigation, no time limits)
|
|
18
|
+
- **Understandable**: Everyone can understand this (readable text, predictable behavior)
|
|
19
|
+
- **Robust**: All devices can use this (compatible with assistive technologies)
|
|
20
|
+
|
|
21
|
+
## Implementation Requirements
|
|
22
|
+
|
|
23
|
+
### Screen Reader Support
|
|
24
|
+
|
|
25
|
+
- Use semantic HTML (header, nav, main, footer) for proper structure
|
|
26
|
+
- All interactive elements must have accessible names
|
|
27
|
+
- Use aria-label ONLY when text differs from visible content
|
|
28
|
+
- Do NOT overuse role attributes, especially role="alert" (breaks semantic order)
|
|
29
|
+
- Announce states properly: "selected", "expanded", "collapsed", "disabled"
|
|
30
|
+
|
|
31
|
+
### Semantic Order and Focus Management
|
|
32
|
+
|
|
33
|
+
- Maintain logical reading order matching visual layout
|
|
34
|
+
- Use proper heading hierarchy (h1 > h2 > h3, no skipping levels)
|
|
35
|
+
- Group related sections with proper ARIA landmarks
|
|
36
|
+
- Focus order must follow logical tab sequence
|
|
37
|
+
- TabIndex must NEVER be > 0
|
|
38
|
+
|
|
39
|
+
### Form Accessibility
|
|
40
|
+
|
|
41
|
+
- All form fields must have associated labels
|
|
42
|
+
- Use validateOn: 'change' instead of 'blur' (better for autofill)
|
|
43
|
+
- Provide clear error messages
|
|
44
|
+
- Indicate required fields
|
|
45
|
+
- Support keyboard navigation throughout forms
|
|
46
|
+
|
|
47
|
+
### Color and Contrast
|
|
48
|
+
|
|
49
|
+
- Minimum contrast ratio: 4.5:1 for normal text, 3:1 for large text/icons
|
|
50
|
+
- Never use color alone to convey information
|
|
51
|
+
- Add additional visual indicators: shapes, icons, text, spacing
|
|
52
|
+
- Use Color Contrast Analyzer (CCA) during design
|
|
53
|
+
|
|
54
|
+
### Images and Media
|
|
55
|
+
|
|
56
|
+
- Provide meaningful alt text for all informative images
|
|
57
|
+
- Use alt="" for decorative images
|
|
58
|
+
- Avoid image-based text when possible
|
|
59
|
+
- Provide captions and transcripts for video/audio
|
|
60
|
+
- Never rely solely on visual cues
|
|
61
|
+
|
|
62
|
+
### Interactive Elements
|
|
63
|
+
|
|
64
|
+
- Buttons minimum touch target: 24x24 CSS pixels
|
|
65
|
+
- Links must have descriptive text (avoid "click here", "learn more")
|
|
66
|
+
- External links should indicate new window with extDisclaimer
|
|
67
|
+
- All custom actions must be accessible via screen readers
|
|
68
|
+
|
|
69
|
+
### Mobile Accessibility
|
|
70
|
+
|
|
71
|
+
- iOS: Use UIAccessibilityCustomAction for custom gestures
|
|
72
|
+
- iOS: Announce "double tap to select" for form field buttons
|
|
73
|
+
- Android: Use contentDescription for ImageView, ImageButton, CheckBox
|
|
74
|
+
- Android: Hint speech already announces custom actions (built-in)
|
|
75
|
+
- Test with both VoiceOver (iOS) and TalkBack (Android)
|
|
76
|
+
|
|
77
|
+
## Testing Requirements
|
|
78
|
+
|
|
79
|
+
- Perform desk checks with accessibility tools before PR
|
|
80
|
+
- Test with keyboard navigation only (no mouse)
|
|
81
|
+
- Test with screen readers (VoiceOver, NVDA, JAWS, TalkBack)
|
|
82
|
+
- Use automated tools: Axe DevTools, Axe Basic, Lighthouse
|
|
83
|
+
- Conduct manual testing with assistive technologies
|
|
84
|
+
- Include accessibility acceptance criteria in all user stories
|
|
85
|
+
|
|
86
|
+
## Prohibited Practices
|
|
87
|
+
|
|
88
|
+
- Do NOT use flashing/blinking content
|
|
89
|
+
- Do NOT disable pinch-to-zoom
|
|
90
|
+
- Do NOT use inaccessible PDFs without proper tagging
|
|
91
|
+
- Do NOT create complex multi-column layouts
|
|
92
|
+
- Do NOT use eslint-disable-line for a11y rules without approval
|
|
93
|
+
- Do NOT mock screen reader implementations with aria-label
|
|
94
|
+
|
|
95
|
+
## Resources
|
|
96
|
+
|
|
97
|
+
- W3C WCAG Guidelines: https://www.w3.org/WAI/standards-guidelines/wcag/
|
|
98
|
+
- MagentaA11y Checklist: https://www.magentaa11y.com/web/
|