feat: add Antigravity minimal profile rules

Author: netshdev

templates/antigravity/minimal/.agent/rules/accessibility.md

@@ -0,0 +1,53 @@
+---
+trigger: always_on
+---
+
+# Accessibility Basics
+
+## Core Requirements
+
+- All interactive elements must be keyboard accessible (Tab, Enter, Space)
+- Provide alt text for images that convey information
+- Use semantic HTML elements (button, nav, main, header, footer)
+- Minimum color contrast: 4.5:1 for normal text
+
+## Keyboard Navigation
+
+- Support Tab key for navigation
+- Support Enter/Space for activation
+- Visible focus indicators required
+- Never use `tabIndex > 0`
+
+## Screen Readers
+
+- Use semantic HTML first (button instead of div with onClick)
+- Provide alt text for meaningful images
+- Use alt="" for decorative images
+- Form fields must have associated labels
+
+## Color and Contrast
+
+- Text must have 4.5:1 contrast ratio minimum
+- Don't use color alone to convey information
+- Add icons or text labels in addition to color
+
+## Forms
+
+- All inputs must have labels
+- Indicate required fields clearly
+- Provide helpful error messages
+- Support keyboard navigation
+
+## Testing
+
+- Test with keyboard only (no mouse)
+- Use browser accessibility tools (Axe, Lighthouse)
+- Check color contrast with analyzer tool
+
+## Quick Checklist
+
+- [ ] Can I navigate with keyboard only?
+- [ ] Do all images have alt text?
+- [ ] Are buttons actually button elements?
+- [ ] Do form fields have labels?
+- [ ] Is color contrast sufficient?

templates/antigravity/minimal/.agent/rules/code-quality.md

@@ -0,0 +1,86 @@
+---
+trigger: always_on
+---
+
+# Code Quality Essentials
+
+## Naming Conventions
+
+- Variables & functions: `camelCase` (getUserData, isValid)
+- Components: `PascalCase` (UserProfile, Button)
+- Constants: `UPPER_SNAKE_CASE` (MAX_RETRIES, API_URL)
+- Be descriptive: `isUserAuthenticated` not `isAuth`
+
+## JavaScript Basics
+
+- Use `const` by default, `let` only when reassigning
+- Never use `var`
+- Use arrow functions for callbacks
+- Remove `console.log` before committing
+- Use template literals: \`Hello ${name}\` not "Hello " + name
+
+## Functions
+
+- Keep functions small (under 50 lines)
+- Functions should do one thing
+- Use descriptive names that explain what they do
+- Avoid deeply nested code (max 3 levels)
+
+## Code Organization
+
+- One component per file
+- Group related files in folders
+- Import order: React, libraries, local files
+- Remove unused imports and code
+
+## Common Patterns
+
+### Good Practices
+
+```javascript
+// Destructure props
+const Button = ({ onClick, label }) => (
+  <button onClick={onClick}>{label}</button>
+);
+
+// Use early returns
+const getStatus = (user) => {
+  if (!user) return "guest";
+  if (user.isPremium) return "premium";
+  return "standard";
+};
+
+// Named functions for handlers
+const handleClick = () => {
+  console.log("clicked");
+};
+```
+
+### Avoid
+
+```javascript
+// Don't access props directly
+const Button = (props) => (
+  <button onClick={props.onClick}>{props.label}</button>
+);
+
+// Don't use anonymous functions in JSX
+<button onClick={() => handleClick()}>Click</button>;
+
+// Don't nest too deeply
+if (condition1) {
+  if (condition2) {
+    if (condition3) {
+      // too deep!
+    }
+  }
+}
+```
+
+## Quick Checklist
+
+- [] Descriptive variable name?
+- [] Functions under 50 lines?
+- [] No console.log statements?
+- [] Imports organized?
+- [] Dead code removed?

templates/antigravity/minimal/.agent/rules/react-components.md

@@ -0,0 +1,164 @@
+---
+trigger: always_on
+---
+
+# React Component Basics
+
+## Component Structure
+
+- Use functional components with hooks (not class components)
+- Destructure props at function signature
+- Keep components under 200 lines
+- One component per file
+
+## Props
+
+````javascript
+// Good: Destructure props
+const UserCard = ({name, email, onEdit}) => (
+  <div>
+    <h2>{name}</h2>
+    <p>{email}</p>
+    <button onClick={onEdit}>Edit</button>
+  </div>
+);
+
+// Bad: Using props object
+const UserCard = (props) => (
+  <div>
+    <h2>{props.name}</h2>
+    <p>{props.email}</p>
+    <button onClick={props.onEdit}>Edit</button>
+  </div>
+);
+
+## Hooks Basic
+
+### useState
+Use for local UI state only (modals, toggles, input values)
+```javascript
+const [isOpen, setIsOpen] = useState(false);
+const [count, setCount] = useState(0);
+````
+
+### useEffect
+
+Use for side effects (API calls, subscriptions, timers)
+
+```javascript
+useEffect(() => {
+  // Do something
+  fetchData();
+
+  // Cleanup (optional)
+  return () => cleanup();
+}, [dependencies]); // Don't forget dependencies!
+```
+
+### useCallback
+
+Prevent function recreation on every render
+
+```javascript
+const handleClick = useCallback(() => {
+  doSomething();
+}, [dependencies]);
+```
+
+## JSX Best Practices
+
+- Use semantic HTML (button, nav, header, footer)
+- No anonymous functions in JSX: onClick={handleClick} not onClick={() => handleClick()}
+- Keys must be from data, not array index: key={item.id} not key={index}
+- Use fragments <></> instead of unnecessary divs
+- Conditional rendering: use boolean values only
+
+## Common Patterns
+
+### Event Handlers
+
+```javascript
+// Good: Named function
+const handleSubmit = (e) => {
+  e.preventDefault();
+  submitForm();
+};
+
+<form onSubmit={handleSubmit}>
+
+// Bad: Anonymous function
+<form onSubmit={(e) => {
+  e.preventDefault();
+  submitForm();
+}}>
+```
+
+### Conditional Rendering
+
+```javascript
+// Good: Boolean condition
+{
+  isLoggedIn && <Dashboard />;
+}
+
+// Good: Ternary for two states
+{
+  isLoading ? <Spinner /> : <Content />;
+}
+
+// Bad: Can accidentally render "0"
+{
+  count && <Display />;
+}
+```
+
+### Lists
+
+```javascript
+// Good: Key from data
+{
+  users.map((user) => <UserCard key={user.id} {...user} />);
+}
+
+// Bad: Index as key
+{
+  users.map((user, index) => <UserCard key={index} {...user} />);
+}
+```
+
+### Component Organization
+
+```javascript
+const MyComponent = ({ prop1, prop2 }) => {
+  // 1. Hooks
+  const [state, setState] = useState();
+
+  // 2. Event handlers
+  const handleClick = () => {
+    // handle click
+  };
+
+  // 3. Early returns
+  if (!prop1) return null;
+
+  // 4. Render
+  return <div>{/* JSX here */}</div>;
+};
+```
+
+## Avoid
+
+- Class components (use functional components)
+- Direct DOM manipulation (use refs sparingly)
+- Inline styles (use CSS/styled-components)
+- Prop drilling beyond 3 levels (use context or Redux)
+- Components over 200 lines (break them down)
+
+## Quick Checklist
+
+- [] Using functional components?
+- [] Props destructured?
+- [] Event handlers named?
+- [] Keys from data, not index?
+- [] Component under 200 lines?
+- [] useEffect has dependencies?