feat(AR-22): Optimize rendering performance of project cards and visual sections

.claude/agents/CONTEXT.md

@@ -0,0 +1,38 @@
+---
+name: context
+description: Agent responsible for retrieving and presenting project context from README.md and the .claude configuration directory.
+trigger: /context
+---
+
+# Project Context Agent
+
+This agent ruleset defines the workflow for retrieving and presenting comprehensive project context for the **Amit Raikwar Portfolio** repository.
+
+## Workflow Steps
+
+When invoked with `/context`, the agent MUST perform the following steps:
+
+### 1. Read Core Project Files
+
+Locate and view the contents of the following files to establish core project guidelines:
+
+- Root [README.md](file:///Users/mr.robot/z-stash/AmitRaikwar-in/amitraikwar/README.md)
+- Main developer entry point [.claude/CLAUDE.md](file:///Users/mr.robot/z-stash/AmitRaikwar-in/amitraikwar/.claude/CLAUDE.md)
+
+### 2. Discover Custom Agent Configurations & Skills
+
+List and review files in the `.claude/` directory to document active agents and developer skills:
+
+- Agents in `.claude/agents/` (e.g., `DEVELOPER.md`, `REVIEW.md`, `CONTEXT.md`)
+- Skills in `.claude/skills/` (e.g., `jira/SKILL.md`, `pr/SKILL.md`, `readme/SKILL.md`)
+
+### 3. Output Structured Summary
+
+Generate a clear, high-level overview for the user, structured into the following sections:
+
+1. **Core Technology Stack**: Framework, styling library, state management library, package manager, and testing frameworks.
+2. **Coding & Architectural Guidelines**: Crucial rules regarding components, Zustand store selectors, and file structure rules.
+3. **Localization Rules**: Localization directory paths and copy string guidelines.
+4. **Testing Standards**: Placement of tests in `__tests__` subdirectories and CLI commands.
+5. **Custom Agent Slash Commands**: A summary table of active agents, their triggers, and their responsibilities.
+6. **Skills & Automation**: Available automation modules and their triggers.

.claude/agents/DEVELOPER.md

@@ -1,6 +1,7 @@
 ---
 name: developer
 description: Agent responsible for end-to-end development lifecycle, from testing changes and Jira ticket creation to committing code and opening Pull Requests.
+trigger: /dev
 ---
 
 # Developer Workflow Agent

.claude/agents/REVIEW.md

@@ -1,6 +1,7 @@
 ---
 name: review
 description: Single unified Agent responsible for dynamically reviewing and testing Pull Requests based on modified files.
+trigger: /review
 ---
 
 # Unified PR Review & Merge Agent

.claude/agents/UNIT_TEST.md

@@ -0,0 +1,45 @@
+---
+name: unit_test
+description: Agent responsible for writing unit tests for all business and UI code, enforcing Jest / React Testing Library best practices, and ensuring code coverage meets the 80% threshold.
+trigger: /test
+---
+
+# Unit Test Agent
+
+This agent ruleset defines the standard responsibilities and workflows for writing, running, and managing unit and integration tests in the **Amit Raikwar Portfolio** project.
+
+## 1. Core Objectives
+- Ensure that all business logic (utils, helpers, slices, hooks) and UI components (screens, reusable elements) are covered by robust tests.
+- Maintain a minimum code coverage threshold of **80%** across statements, branches, functions, and lines.
+
+## 2. Test File Conventions (from rules.md)
+- **Folder Location**: Test files MUST always be placed in a `__tests__/` folder inside the directory containing the code under test.
+- **Naming**: Test files must be named after the source file they target:
+  - Component under test: `ComponentName.tsx` -> `__tests__/ComponentName.test.tsx`
+  - Utility under test: `util.ts` -> `__tests__/util.test.ts`
+  - Store/Hook under test: `useFeature.ts` -> `__tests__/useFeature.test.ts`
+- **Assertions**: No empty test files are allowed. Every test file must contain at least one meaningful assertion.
+
+## 3. Best Practices for UI Component Testing
+- Use **React Testing Library** (`@testing-library/react`) for testing components.
+- **Render Setup**: Wrap components in necessary providers (like `ThemeProvider`, `LocalizationProvider`, `BrowserRouter`, `HelmetProvider`, `QueryClientProvider`) if they consume context. Use the custom helper `render` or `renderWithProviders` if available.
+- **Queries**: Prefer `screen.getByRole` or `screen.getByText` to query elements, simulating real user visibility.
+- **User Interactions**: Use `userEvent` (preferred) or `fireEvent` to simulate interactions like clicks, inputs, and mouse hovers.
+- **Theme Testing**: Test that components properly react to color mode changes via the custom `useColorSelector` hook (mocking it if needed).
+- **Snapshot Testing**: Use `toMatchSnapshot()` for static elements to track unexpected DOM changes.
+
+## 4. Best Practices for Business Logic & Utilities
+- Cover normal execution paths, edge cases (empty inputs, null values), and error handling paths.
+- Mock external APIs (e.g., Axios client, localStorage) and side effects to keep tests isolated and deterministic.
+- For Zustand stores, reset the store state before/after each test run to prevent state pollution across tests. Ensure state updates are wrapped in `act()`.
+
+## 5. Workflow Steps
+When invoked with `/test`, the agent MUST follow these steps:
+1. **Identify Coverage Gaps**: Check the latest test coverage report (e.g., `coverage/lcov-report/index.html` or by running `yarn test:cov`) to find components/files below the 80% threshold.
+2. **Write Unit Tests**: Write high-quality tests adhering to the conventions above.
+3. **Verify and Format**:
+   - Run `yarn prettier:write` to format the newly added test files.
+   - Run `yarn lint:fix` to ensure no linting errors are introduced.
+4. **Enforce 80% Coverage**:
+   - Run `yarn test:cov` to check the updated coverage.
+   - Ensure the coverage threshold matches or exceeds 80%. If not, continue adding missing test cases.