feat(frontend): add Claude commands and update README

frontend/.claude/commands/find-usages.md

@@ -0,0 +1,62 @@
+---
+description: Find all usages of a component, function, or type
+---
+
+Find all usages of `$ARGUMENTS` across the frontend codebase.
+
+## Steps
+
+1. **Identify what we're searching for**
+   - Component name (e.g., `Switch`, `Button`)
+   - Function name (e.g., `isFreeEmailDomain`, `formatDate`)
+   - Type/interface name (e.g., `FeatureState`, `ProjectFlag`)
+
+2. **Find the definition**
+   - Search for where it's defined/exported
+   - Note the file path and export type (default vs named)
+
+3. **Search for imports**
+   ```bash
+   # For named exports
+   grep -r "import.*{ $SYMBOL" --include="*.ts" --include="*.tsx"
+
+   # For default exports
+   grep -r "import $SYMBOL" --include="*.ts" --include="*.tsx"
+   ```
+
+4. **Search for direct usages**
+   - JSX usage: `<ComponentName`
+   - Function calls: `functionName(`
+   - Type annotations: `: TypeName` or `as TypeName`
+
+5. **Categorise usages**
+   - Group by file/directory
+   - Note the context (component, hook, utility, test)
+
+## Output format
+
+```
+## Definition
+[File path where it's defined]
+
+## Usages (X files)
+
+### components/
+- ComponentA.tsx:42 - Used in render
+- ComponentB.tsx:15 - Passed as prop
+
+### pages/
+- FeaturePage.tsx:88 - Used in modal
+
+### hooks/
+- useFeature.ts:12 - Called in effect
+
+## Impact Assessment
+[Brief note on how widespread the usage is and what to consider when modifying]
+```
+
+## Use cases
+
+- Before refactoring: understand what will be affected
+- Before deleting: ensure nothing depends on it
+- Before renaming: find all places that need updates

frontend/.claude/commands/pr-review.md

@@ -0,0 +1,56 @@
+---
+description: Review a GitHub pull request
+---
+
+Review the pull request at `$ARGUMENTS`.
+
+## Steps
+
+1. **Fetch PR details**
+   ```bash
+   gh pr view <PR_NUMBER_OR_URL> --json title,body,files,additions,deletions,state,headRefName
+   ```
+
+2. **Get the diff**
+   ```bash
+   gh pr diff <PR_NUMBER_OR_URL>
+   ```
+
+3. **Analyse the changes**
+   - Summarise what the PR does
+   - Check if the approach makes sense
+   - Identify potential issues:
+     - Missing edge cases
+     - Inconsistencies with existing patterns
+     - Code style issues (indentation, naming)
+     - Missing tests for new functionality
+   - Check if related files need updates
+
+4. **Review against project patterns**
+   - Does it follow patterns in `.claude/context/`?
+   - Are imports using path aliases (`common/`, `components/`)?
+   - Is state management using RTK Query where appropriate?
+
+5. **Provide feedback**
+   - Summary of what the PR does
+   - What's good about the approach
+   - Potential concerns or suggestions
+   - Questions for the author (if any)
+
+## Output format
+
+```
+## PR Summary
+[Brief description of what the PR does]
+
+## Changes
+[List of files changed and what each change does]
+
+## Assessment
+✅ What looks good
+⚠️ Potential concerns
+💡 Suggestions
+
+## Questions
+[Any clarifying questions for the author]
+```

frontend/.claude/commands/unit-test.md

@@ -0,0 +1,61 @@
+---
+description: Analyse a frontend file and generate unit tests (Jest)
+---
+
+Generate unit tests for the frontend file at `$ARGUMENTS`.
+
+**Note:** This command is for frontend code only. For backend (Python) tests, see `../api/README.md`.
+
+## Steps
+
+1. **Check for existing tests**
+   - Look for `__tests__/{filename}.test.ts` in the same directory
+   - If tests exist, analyse them for coverage gaps
+
+2. **Read and analyse the source file**
+   - Identify all exported functions, classes, and constants
+   - Note dependencies and imports
+   - Determine testability:
+     - Pure functions (no side effects) → highly testable
+     - React components → may need mocking
+     - Functions with external dependencies → note what needs mocking
+
+3. **Generate test file**
+   - Follow the pattern in `common/utils/__tests__/format.test.ts`
+   - Location: `{sourceDir}/__tests__/{filename}.test.ts`
+   - Use path aliases for imports (`common/...`, `components/...`)
+
+4. **Test structure requirements**
+   - Use `describe` block for each exported function
+   - Use `it.each` for table-driven tests when function has multiple input/output cases
+   - Include edge cases: `null`, `undefined`, empty strings, empty arrays
+   - Include boundary cases where applicable
+
+5. **After generating, run the tests**
+   ```bash
+   npm run test:unit -- --testPathPatterns={filename}
+   ```
+
+## Test file pattern
+
+```typescript
+import { functionName } from 'common/path/to/file'
+
+describe('functionName', () => {
+  it.each`
+    input        | expected
+    ${value1}    | ${result1}
+    ${value2}    | ${result2}
+    ${null}      | ${expectedForNull}
+    ${undefined} | ${expectedForUndefined}
+  `('functionName($input) returns $expected', ({ input, expected }) => {
+    expect(functionName(input)).toBe(expected)
+  })
+})
+```
+
+## Reference
+
+See existing tests at:
+- `common/utils/__tests__/format.test.ts`
+- `common/utils/__tests__/featureFilterParams.test.ts`

frontend/README.md

@@ -47,7 +47,13 @@ For a full list of frontend environment variables, see the [Flagsmith documentat
 
 #### Testing
 
-This codebase uses TestCafe for end-to-end testing. Tests are located in the `e2e/` directory.
+**Unit tests** use Jest and are located in `__tests__/` directories next to source files.
+
+To run unit tests, run `npm run test:unit`.
+
+To run a specific test file: `npm run test:unit -- --testPathPatterns={filename}`
+
+**E2E tests** use TestCafe and are located in the `e2e/` directory.
 
 To run E2E tests (requires the API running on localhost:8000), run `npm run test`.
 

frontend/common/utils/__tests__/isFreeEmailDomain.test.ts

@@ -0,0 +1,21 @@
+import isFreeEmailDomain from 'common/utils/isFreeEmailDomain'
+
+describe('isFreeEmailDomain', () => {
+  it.each`
+    input                      | expected
+    ${'user@gmail.com'}        | ${true}
+    ${'user@yahoo.com'}        | ${true}
+    ${'user@hotmail.com'}      | ${true}
+    ${'user@outlook.com'}      | ${true}
+    ${'user@company.com'}      | ${false}
+    ${'user@flagsmith.com'}    | ${false}
+    ${'user@enterprise.co.uk'} | ${false}
+    ${null}                    | ${false}
+    ${undefined}               | ${false}
+    ${''}                      | ${false}
+    ${'invalid-email'}         | ${false}
+    ${'@gmail.com'}            | ${true}
+  `('isFreeEmailDomain($input) returns $expected', ({ expected, input }) => {
+    expect(isFreeEmailDomain(input)).toBe(expected)
+  })
+})