codingwithagent 1.0.0

package/templates/antigravity/standard/.agent/rules/code-quality.md

@@ -0,0 +1,166 @@
+---
+trigger: always_on
+---
+
+# Code Quality and Standards
+
+## Why Code Quality Matters
+
+- Prevents production defects and reduces technical debt
+- Ensures maintainable and debuggable code
+- Enables predictable enhancements without side effects
+- Reduces legal, security, and brand risks
+- Improves developer experience and team efficiency
+
+## Folder Structure and Architecture
+
+- Follow strict pod-based architecture
+- Structure: `<podName>/<flowName>/container/<containerName>`
+- Structure: `<podName>/<flowName>/component/<componentName>`
+- Structure: `<podName>/<flowName>/feature/<featureName>`
+- Structure: `<podName>/common/utils|constants|feature`
+- Structure: `/common/<domainName>/utils|constants|feature`
+- Do NOT breach pod boundaries without architecture approval
+
+## Naming Conventions
+
+- **Variables**: camelCase (thisIsAVariable)
+- **Functions**: camelCase (thisIsAFunction)
+- **Constants**: UPPER_SNAKE_CASE (THIS_IS_A_CONSTANT)
+- **Acronyms**: UPPER_CASE (TIA = "This Is an Acronym")
+- **Components**: PascalCase (ThisIsAComponent)
+- **Object Props**: camelCase ({amount: 1, currency: 'USD'})
+- **URLs**: lowercase with "-" or "/" separators
+- Use descriptive names, avoid abbreviations (shouldDisplayTravelWaiverMessage NOT shouldDsplyTrvlWavrMsg)
+
+## JavaScript Best Practices
+
+### General Rules
+
+- Use ES6+ syntax (arrow functions, destructuring, template literals)
+- Prefer `const` over `let`, avoid `var` completely
+- Avoid `let` whenever possible - seek immutability
+- No anonymous functions as event handlers - declare named functions
+- Remove all console.log and debugger statements before PR
+- No eslint-disable-line without architecture team approval
+
+### Prohibited or Restricted Patterns
+
+- Do NOT use `window` object (except with arch team clearance)
+- Do NOT import entire lodash library: `import get from 'lodash/get'` (allowed but discouraged)
+- Do NOT use `Date()` - use moment instead
+- Do NOT use `forEach` - use map, filter, reduce, or for...of
+- Do NOT use "will" lifecycle methods except componentWillUnmount
+- Do NOT trust BFF responses - always validate and set defaults
+- Do NOT use `tabIndex > 0`
+
+### Props and State Management
+
+- Destructure props at function signature level
+- Avoid prop drilling beyond 3 levels - use intermediate containers
+- Use Redux for global state, local state only for UI-specific concerns
+- Required props: Mark functions and data needed for functionality as required
+- PropTypes: Define in external file at wrapper level for reusability
+- Use null chain operator for service responses with mapper layer
+
+### Pure Functions and Complexity
+
+- Write pure functions whenever possible (no side effects)
+- Functions should do one thing well
+- Maximum function length: 50 lines
+- Remove dormant (dead) code immediately
+- Refactor when components exceed 200 lines
+- Extract complex logic to utility functions or selectors
+
+### Data Handling
+
+- Always validate service responses with null checks
+- Create mappers between services and store
+- Use selectors for all data transformations
+- Move data processing from render to selectors
+- Use constants file for string values and configuration
+
+## Component Standards
+
+### Component Types
+
+- Prefer functional components with hooks over class components
+- Use PureComponent ONLY if props are immutable (primitives or ImmutableJS)
+- Stateless pure presentational components preferred
+- Return `false` instead of `null` to keep children linked to tree
+
+### React Hooks
+
+- **useEffect**: Stay reactive, be mindful of dependencies array
+- **useMemo**: Use for expensive calculations only
+- **useCallback**: Use to prevent unnecessary re-renders
+- **useRef**: Bridge between JS DOM and React context
+- Custom hooks: Declare at component level or in hooks directory
+
+### Component Requirements
+
+- All components must have PropTypes defined
+- Provide defaultProps for optional props
+- Use fragments `<></>` instead of empty divs
+- Keys must come from data props, NOT array index or random IDs
+- Conditional rendering: All conditionals must be boolean (non-boolean values render)
+- Avoid prop drilling: Use intermediate containers beyond 3 levels
+
+### JSX Best Practices
+
+- Presentational components should receive data via props only
+- No business logic in JSX components - use selectors
+- Extract methods returning JSX as separate components
+- Use memoization for expensive rendering logic
+- Keep components small and reusable (<200 lines)
+- One responsibility per component
+
+## Styling
+
+### CSS/SCSS Standards
+
+- Use mobile-first approach (avoid max-width)
+- Do NOT use `:global` without architecture approval
+- Use `atm-u` utility classes, NOT `atm-c` component classes
+- All CSS must have parent class selector (no global impact)
+- Use Atmos components and design system
+- Maintain 4.5:1 contrast ratio for text, 3:1 for UI elements
+
+### Emotion/CSS-in-JS
+
+- Follow Atmos styling patterns
+- Use JSON theme values when available
+- Avoid inline styles unless absolutely necessary
+
+## Redux and State Management
+
+### Redux Patterns
+
+- Use Redux Toolkit for all new state management
+- Local state for UI-only concerns (modals, tooltips)
+- Global state for shared data and server responses
+- Do NOT use react-redux-form state - use model instead
+- Define actions and reducers in feature folders
+
+### Sagas
+
+- Follow saga implementation patterns
+- Handle async operations in sagas, not components
+- Use try-catch for error handling
+- Implement request/response cycle properly
+- Maintain immutability with "Current" record pattern
+
+## Internationalization (i18n)
+
+- Use `<FormattedMessage>` instead of `intl.formatMessage` in JSX
+- Extract messages after every change (provide screenshot for context)
+- Verify scope and ID match file location
+- Do NOT send variable messages to intl - validate existence with defaults
+- Inject intl at container level only once
+
+## Security and PII
+
+- Mask credit cards: First 12 digits as asterisks/bullets, last 4 visible
+- Follow PII masking guidelines for all personal data
+- No PCI/PII data in logs or monitoring
+- Validate and sanitize all user inputs

package/templates/antigravity/standard/.agent/rules/pull-request-review.md

@@ -0,0 +1,192 @@
+---
+trigger: always_on
+---
+
+# Pull Request Standards and Review Guidelines
+
+## PR Submission Requirements
+
+### Must-Have Checklist
+
+- [ ] PR form properly filled (checkmarks, labels, ticket number, description)
+- [ ] Code coverage provided (previous vs current)
+- [ ] Unit tests added/updated for all changed code
+- [ ] Screenshots of new functionality included
+- [ ] Team review completed before requesting merge
+- [ ] All Jira tickets linked and valid
+- [ ] No TODOs or incomplete work (create enabler if urgent)
+
+### PR Form Structure
+
+- **Ticket Number**: Link to Jira/Github issue
+- **Description**: Clear explanation of changes and why
+- **Testing Instructions**: How to manually verify changes
+- **Coverage**: Previous and current test coverage percentage
+- **Screenshots**: Before/after for UI changes
+- **Team Review**: At least one peer approval
+- **Release Notes**: User-facing changes documented
+
+## Branching and Merging Strategy
+
+### Branch Types
+
+- **Feature/Epic Branches**: New functionality development
+- **Pod Branches**: Maintenance or combined testing
+- **Development Branch**: Integration branch for release candidates
+
+### Merge Rules
+
+- All PRs go to feature/epic/pod branch, NEVER directly to development
+- One PR per user story
+- Do NOT "Squash and merge" downstreams (difficult to solve issues)
+- Upstream PRs require:
+  - Intended release documented
+  - List of all Jira/Github tickets
+  - Git log command output: `git log --no-merges --format=oneline origin/development..origin/epicbranch`
+  - eQA sign-off on ALL tickets
+- Each change must relate to a ticket
+- Global/semiglobal changes require architecture team review
+
+### Release Readiness
+
+- All user stories in epic/feature must have eQA sign-off
+- Stories tested together in dev environment before merge
+- Time allocated for code reviews, downstream and upstream merges
+- Epic/feature scope properly defined in Jira/Github
+
+## Code Review Standards
+
+### Architecture and Structure
+
+- [ ] Folder structure follows pod-based architecture
+- [ ] No pod bubble breaches
+- [ ] Component placed in correct directory
+- [ ] Imports follow approved patterns
+- [ ] No circular dependencies
+
+### JavaScript Review
+
+- [ ] No `window` object usage (unless approved)
+- [ ] Lodash imports are scoped (not entire library)
+- [ ] Keys in lists from data props, not index
+- [ ] No eslint-disable-line without validation
+- [ ] No `tabIndex > 0`
+- [ ] Props drilling limited to 3 levels
+- [ ] No console.log or debugger statements
+- [ ] Conditional rendering uses boolean values only
+- [ ] No code duplication
+- [ ] String values moved to constants file
+- [ ] Gremlins checked (invisible harmful characters)
+
+### Component Review
+
+- [ ] Functional components with hooks (not class components)
+- [ ] PropTypes defined and accurate
+- [ ] Required props marked with .isRequired
+- [ ] Components under 200 lines
+- [ ] No anonymous functions as event handlers
+- [ ] Fragments used instead of empty divs
+- [ ] useEffect dependencies correct
+- [ ] No stale closures
+
+### Styles Review
+
+- [ ] Mobile-first approach used (avoid max-width)
+- [ ] No `:global` styles (unless scoped and approved)
+- [ ] Atmos utility classes used (atm-u, not atm-c)
+- [ ] No CSS without parent class selector
+- [ ] Color contrast meets 4.5:1 ratio
+
+### Accessibility Review
+
+- [ ] All interactive elements keyboard accessible
+- [ ] Proper ARIA labels (not overused)
+- [ ] role="alert" not misused
+- [ ] External links have extDisclaimer for screen readers
+- [ ] Color not sole information indicator
+- [ ] Alt text provided for meaningful images
+- [ ] Form fields have labels
+
+### Testing Review
+
+- [ ] Tests added for new functionality
+- [ ] Tests updated for changed code
+- [ ] Tests not using mock data excessively
+- [ ] Shallow render preferred over mount (unless hooks require mount)
+- [ ] External dependencies mocked
+- [ ] beforeEach and afterAll for mock cleanup
+- [ ] No setTimeout over 100ms
+- [ ] Snapshots avoided (remove when possible)
+
+### App-Specific Review
+
+- [ ] Atmos components used (headers, buttons, form fields)
+- [ ] `<TextPassage>` for paragraphs, not `<p>`
+- [ ] `<Currency>` or getFormattedCurrency used, never type: currency
+- [ ] pushRouteWithLocale for navigation
+- [ ] cmsContainer for CMS content
+- [ ] react-redux-form uses model, not state
+- [ ] intl injected at container level only
+- [ ] Variable messages validated before intl usage
+
+### Data and Date Handling
+
+- [ ] Service responses validated with null chain operator
+- [ ] Mapper layer between services and store
+- [ ] moment used instead of Date()
+- [ ] Dates not mocked in future
+- [ ] moment.now overridden in tests if needed
+
+## Strongly Recommended Practices
+
+### Review Process
+
+- Ask for second review if uncertain about changes
+- Involve previous developers/pod for context
+- Check if data transformations can move to selectors
+- Avoid mocked a11y implementations with aria-label
+- Provide enabler option only for urgent blockers
+
+### Code Quality
+
+- Naming is critical: camelCase, PascalCase, UPPER_CASE used correctly
+- Intermediate containers reduce prop drilling
+- DRY principle: Save repeated data in defaulted constants
+- PropTypes in external file for reusability
+- Containers without JSX are easier to maintain
+- Required props clearly marked
+
+### Testing Quality
+
+- Use shallow render when possible (less memory)
+- Single component instance per test scope
+- Avoid snapshots
+- Mock external dependencies
+- Quick timeouts (<100ms)
+
+### Optimization
+
+- isMobile/IsTablet in CSS preferred over JSX
+- Use reduce loop instead of multiple loops
+- Check `if(array.length)` instead of `if(array.length > 0)`
+- No `!important` in CSS
+- Direct children selector `>` avoided
+
+## Auto-Merge Requirements
+
+Auto-merge enabled when:
+
+- [ ] Team reviewer approved PR
+- [ ] Approver approved PR
+- [ ] File owners approved (if applicable)
+- [ ] No dismissals from updates (requires re-review)
+- [ ] For release branch: Designated approver signed off
+
+## What NOT to Merge
+
+- Global/semiglobal changes without architect review
+- PRs impacting multiple pages/flows without extensive review
+- Missing eQA sign-offs on upstream PRs
+- TODOs or incomplete work
+- Failing tests or coverage decrease
+- Security vulnerabilities

package/templates/antigravity/standard/.agent/rules/react-components.md

@@ -0,0 +1,204 @@
+---
+trigger: always_on
+---
+
+# React Component Standards
+
+## Component Architecture
+
+### Separation of Concerns
+
+- **Containers**: Connect to Redux, handle business logic, pass props to components
+- **Components**: Pure presentational, receive data via props only
+- **Utils**: Pure functions, no side effects, reusable across project
+- **Selectors**: Data transformation and derivation from Redux state
+- **Sagas**: Side effects and async operations
+
+### Component Design Principles
+
+- Keep components stateless whenever possible
+- Single Responsibility Principle: One component, one purpose
+- Composition over inheritance
+- Allow containment through props.children
+- No dependencies on rest of app outside props
+
+## Functional vs Class Components
+
+### Use Functional Components
+
+- All new components must be functional with hooks
+- Class components supported but not recommended
+- Lifecycle methods replaced with useEffect
+- Local state managed with useState
+
+### Hooks Usage
+
+#### Standard Hooks
+
+- **useState**: Local UI state only
+- **useEffect**: Side effects, subscriptions, API calls
+  - Be explicit with dependency array
+  - Return cleanup functions for subscriptions
+  - Avoid infinite loops by managing dependencies carefully
+- **useMemo**: Expensive calculations only (don't overuse)
+- **useCallback**: Prevent unnecessary child re-renders
+- **useRef**: DOM access, storing mutable values that don't trigger re-renders
+
+#### Custom Hooks
+
+- Declare in `/hooks` directory or component-level
+- Prefix with "use" (e.g., useFormValidation)
+- Extract reusable stateful logic
+- Return values and functions for component use
+
+## JSX Standards
+
+### What TO Put in JSX
+
+- Presentational markup and structure
+- Props destructuring and usage
+- Conditional rendering (boolean only)
+- Event handler bindings
+- Component composition
+- Rendering logic from props
+
+### What NOT TO Put in JSX
+
+- Business logic - belongs in selectors or utils
+- API calls - belongs in sagas or useEffect
+- Complex data transformations - belongs in selectors
+- Direct DOM manipulation - use refs sparingly
+- State mutations - use setState or Redux actions
+
+### JSX Best Practices
+
+- Destructure props at function signature: `const Component = ({prop1, prop2}) => {}`
+- Return early for null/loading states
+- Extract complex conditional JSX to separate components
+- Use ternary or && for simple conditionals only
+- Avoid inline functions in render (use useCallback)
+- Add comments for unclear rendering logic only
+
+## Props Management
+
+### Props Access and Destructuring
+
+```javascript
+// GOOD: Destructure at signature level
+const Component = ({ title, onClick, children }) => {
+  return <button onClick={onClick}>{title}</button>;
+};
+
+// BAD: Accessing props object
+const Component = (props) => {
+  return <button onClick={props.onClick}>{props.title}</button>;
+};
+```
+
+### Prop Types
+
+- Define PropTypes for ALL components
+- Mark required props with .isRequired
+- Use shape() for complex objects
+- Extract shared PropTypes to shapes.js file
+- Provide defaultProps for optional props
+
+### Props Drilling
+
+- Maximum 3 levels of prop drilling
+- Beyong 3 levels: Create intermediate container
+- Consider React Context for deep tree data
+- Use Redux for truly global state
+
+## Local State
+
+### When to Use Local State
+
+- UI-only concerns (modal open/closed, input focus)
+- Temporary form data before submission
+- Component-specific toggles and flags
+- Animation states
+
+### When NOT to Use Local State
+
+- Data from API responses - use Redux
+- Shared data between components - use Redux
+- Form data managed by react-redux-form - use model
+- Data that needs to persist across component unmounts
+
+## Component Complexity
+
+### When to Refactor
+
+- Component exceeds well over 200 lines
+- More than 10 props being passed
+- Nested ternary operators (>2 levels)
+- Duplicate logic across components
+- Difficult to write tests for
+
+### Refactoring Strategies
+
+- Extract child components
+- Create custom hooks for complex logic
+- Move business logic to selectors
+- Use composition with props.children
+- Split container and presentational concerns
+
+## DOM Access and Manipulation
+
+### Avoid Direct DOM Manipulation
+
+- Stay in React domain whenever possible
+- Do NOT use document.querySelector
+- Do NOT manipulate DOM with vanilla JS
+- Use React refs only when necessary
+
+### When to Use Refs
+
+- Focus management
+- Integration with third-party DOM libraries
+- Measuring DOM nodes (scroll position, dimensions)
+- Triggering imperative animations
+
+### Ref Best Practices
+
+- Use useRef hook in functional components
+- Assign refs to DOM elements, not React components
+- Access refs in useEffect or event handlers, not render
+- Clean up refs in useEffect return function
+
+## Methods Returning JSX
+
+### Create Proper Components
+
+```jsx
+// GOOD: Separate component
+const FeatureDisplay = ({ feature, value }) => (
+  <div>
+    {feature}: {value}
+  </div>
+);
+
+const ParentComponent = ({ data }) => (
+  <FeatureDisplay feature={data.name} value={data.value} />
+);
+
+// BAD: Method returning JSX
+const ParentComponent = ({ data }) => {
+  const renderFeature = (name, value) => (
+    <div>
+      {name}: {value}
+    </div>
+  );
+
+  return renderFeature(data.name, data.value);
+};
+```
+
+### Why Proper Components
+
+- Clear component interface (props)
+- Easier to test
+- Avoids stale closures
+- Enables reusability
+- Better React DevTools visibility