From bd19c56a2c4b78b835b93a8212d84eabe6e27203 Mon Sep 17 00:00:00 2001 From: Amit Raikwar Date: Sun, 14 Jun 2026 12:16:32 +0530 Subject: [PATCH] chore(AR-18): commit and track Claude Code agent instructions and skills - Add custom Claude Code agent rulesets (DEVELOPER.md, REVIEW.md) - Add specialized development skills (commit, pr, jira, web, readme, frontend-design) - Integrate assistant workflow guidelines to standard workspace practices --- .claude/CLAUDE.md | 129 ++++++++++++++++++++++ .claude/agents/DEVELOPER.md | 54 ++++++++++ .claude/agents/REVIEW.md | 33 ++++++ .claude/skills/commit/SKILL.md | 81 ++++++++++++++ .claude/skills/frontend-design/SKILL.md | 45 ++++++++ .claude/skills/jira/SKILL.md | 115 ++++++++++++++++++++ .claude/skills/pr/SKILL.md | 137 ++++++++++++++++++++++++ .claude/skills/readme/SKILL.md | 95 ++++++++++++++++ .claude/skills/web/SKILL.md | 81 ++++++++++++++ 9 files changed, 770 insertions(+) create mode 100644 .claude/CLAUDE.md create mode 100644 .claude/agents/DEVELOPER.md create mode 100644 .claude/agents/REVIEW.md create mode 100644 .claude/skills/commit/SKILL.md create mode 100644 .claude/skills/frontend-design/SKILL.md create mode 100644 .claude/skills/jira/SKILL.md create mode 100644 .claude/skills/pr/SKILL.md create mode 100644 .claude/skills/readme/SKILL.md create mode 100644 .claude/skills/web/SKILL.md diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md new file mode 100644 index 0000000..696a4c4 --- /dev/null +++ b/.claude/CLAUDE.md @@ -0,0 +1,129 @@ +# CLAUDE.md + +This file provides a high-level entry point for Claude-based tools working in the **Amit Raikwar Portfolio** repository. + +## Overview + +This is a **React Web Application** (using Craco for configuration) representing Amit Raikwar's portfolio website. + +- **Web Framework**: React 18.2+ +- **Styling**: Chakra UI v2 (Space Mono typography, brand colors) and Tailwind CSS +- **State Management**: Zustand, React Query +- **Animations/Graphics**: Framer Motion, GSAP, React Three Fiber (Three.js), TSParticles +- **Routing**: React Router DOM v6 + +## ๐Ÿ“˜ Primary Documentation + +For comprehensive technical documentation, architectural decisions, file conventions, and agent-specific skills, always refer to the Agent Guide section: + +๐Ÿ‘‰ **[Agent Guide](#AGENT)** + +## ๐Ÿ’ป Code Style Guidelines + +- **React Components**: Avoid using `React.FC` or `React.FunctionComponent` to define functional components. Instead, type props directly in the function arguments: `const MyComponent = ({ prop1 }: Props) => { ... }`. + +## Essential Commands + +These are the most common commands for development: + +```bash +yarn install # Install all dependencies +yarn start # Start local development server +yarn build # Create production build for web +yarn test # Run Jest tests +yarn prettier:write # Format code with Prettier +yarn lint # Run ESLint and check issues +yarn lint:fix # Run ESLint and fix web issues +``` + +## Antigravity Skills + +Advanced agent instructions are modularized in the `.claude/skills/` directory. + +- [Commit Workflow](file:///Users/mr.robot/z-stash/AmitRaikwar-in/amitraikwar/.claude/skills/commit/SKILL.md) +- [Jira Management](file:///Users/mr.robot/z-stash/AmitRaikwar-in/amitraikwar/.claude/skills/jira/SKILL.md) +- [Pull Request Skill](file:///Users/mr.robot/z-stash/AmitRaikwar-in/amitraikwar/.claude/skills/pr/SKILL.md) +- [Frontend Design](file:///Users/mr.robot/z-stash/AmitRaikwar-in/amitraikwar/.claude/skills/frontend-design/SKILL.md) +- [Web Development](file:///Users/mr.robot/z-stash/AmitRaikwar-in/amitraikwar/.claude/skills/web/SKILL.md) +- [README Guidelines](file:///Users/mr.robot/z-stash/AmitRaikwar-in/amitraikwar/.claude/skills/readme/SKILL.md) + +## ๐ŸŒ Localization Guidelines + +All user-facing copy strings (headings, paragraphs, labels, button texts, tooltips, placeholders, etc.) MUST be defined in the localization JSON files located in `src/localization/locales/` (`main.json`, `common.json`, and `error.json` under each locale directory) and retrieved dynamically in code using the `useTranslation` hook (`t('key')`). Never hardcode text strings directly in component files. + +## ๐Ÿงช Testing Guidelines + +Always add or update the unit tests (and their snapshots) to align with the requested feature implementations or changes. Run the test suite using `yarn test` to verify that all changes are fully covered, correct, and pass successfully. + +--- + +# AGENT + +This section serves as the primary source of truth for AI agents working on the **Amit Raikwar Portfolio** project. It provides architectural context, directory structures, and established development patterns. + +## 1. Project Overview + +| Core Stack | Technology | +| :------------------- | :------------------------------------------------------------------------------- | +| **Framework** | [React 18.2+](https://react.dev/) | +| **UI Library** | [Chakra UI v2](https://v2.chakra-ui.com/) | +| **State Management** | [Zustand v4](https://zustand.docs.pmnd.rs/) | +| **Routing** | [React Router DOM v6](https://reactrouter.com/) | +| **Styling** | Vanilla CSS + Chakra UI v2 + Tailwind CSS | +| **Language** | [TypeScript](https://www.typescriptlang.org/) | +| **Testing** | Jest + React Testing Library + Cypress | +| **Package Manager** | [Yarn 4](https://yarnpkg.com/) | +| **Aesthetic** | Interactive, Dark mode, Dynamic elements (canvas, physics text, spotlight cards) | +| **Brand Colors** | Black background (#000000) & Violet/Blue details | + +## 2. Directory Structure + +```text +/ +โ”œโ”€โ”€ .claude/ # Agent skills and settings +โ”œโ”€โ”€ src/ # Primary source code +โ”‚ โ”œโ”€โ”€ assets/ # Global assets, icons & media mapping +โ”‚ โ”œโ”€โ”€ components/ # Reusable UI components (custom cursor, marquee, etc.) +โ”‚ โ”œโ”€โ”€ data/ # Static dataset files (Projects, Work, Contact details) +โ”‚ โ”œโ”€โ”€ hooks/ # Custom React hooks (useMoveToTop, etc.) +โ”‚ โ”œโ”€โ”€ localization/ # Locale configuration & translation JSON resources +โ”‚ โ”œโ”€โ”€ providers/ # App-wide React context providers (Theme, Router, Locales) +โ”‚ โ”œโ”€โ”€ router/ # React Router routing definition and public routes +โ”‚ โ”œโ”€โ”€ screens/ # Complete screen flows (Main flow, projects, articles) +โ”‚ โ”œโ”€โ”€ store/ # Zustand slices and hooks +โ”‚ โ”œโ”€โ”€ index.tsx # React bootstrap script +โ”‚ โ””โ”€โ”€ App.tsx # Root Application component +โ”œโ”€โ”€ public/ # Static public files & index.html +โ”œโ”€โ”€ craco.config.js # Webpack and craco configuration +โ”œโ”€โ”€ tsconfig.json # TS compile configuration +โ”œโ”€โ”€ tailwind.config.js # Tailwind configurations +โ””โ”€โ”€ package.json # Main package dependencies & scripts +``` + +## 3. Development Patterns & Rules + +### State Management (Zustand) + +- **Selectors**: Use appropriate selector patterns when extracting state variables to prevent unnecessary re-renders. +- **Testing**: State updates within tests MUST be wrapped in `act()` from `@testing-library/react`. + +### TypeScript + +- All files use `.ts` or `.tsx`. +- Adhere to path aliases defined in `tsconfig.path.json` (e.g., `@components`, `@data`, `@providers`, `@screens`). + +## 4. Testing & Verification + +- **Unit/Integration**: `yarn test` +- **Build**: `yarn build` (Always verify build compatibility after modifications). + +## 5. Agent Workflow + +1. **Understand**: Review this file and `.claude/CLAUDE.md`. +2. **Verify**: Always run `yarn lint` and `yarn test` before declaring a task complete. +3. **Documentation**: Always check if a README update is required for any modified components. +4. **Governance**: Follow Conventional Commits and link all changes to the **Amit Raikwar Portfolio** Jira project using `prefix/AR-XXX` branch naming. + +--- + +ยฉ 2026 Amit Raikwar Portfolio | Confidential and Proprietary diff --git a/.claude/agents/DEVELOPER.md b/.claude/agents/DEVELOPER.md new file mode 100644 index 0000000..9b31cc8 --- /dev/null +++ b/.claude/agents/DEVELOPER.md @@ -0,0 +1,54 @@ +--- +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. +--- + +# Developer Workflow Agent + +This agent ruleset defines the standard end-to-end workflow for an AI Agent handling development tasks in the **Amit Raikwar Portfolio** project. + +## Workflow Steps + +When assigned to process a set of changes, the agent MUST follow these steps in exact order: + +### 1. Test Formatting and Functionality + +- Before committing anything, verify the code formatting and functionality. +- Run appropriate linters (`yarn lint:fix`) and test commands (`yarn test`). +- Ensure there are no outstanding errors or build failures. + +### 2. Check and Update Documentation + +- Always check if a README update is required for any modified components (e.g., changes to routes, state keys, config settings, dependencies, or APIs). +- If required, update or write the corresponding `README.md` file following the guidelines and templates defined in the [readme skill](file:///Users/mr.robot/z-stash/AmitRaikwar-in/amitraikwar/.claude/skills/readme/SKILL.md). + +### 3. Create Jira Ticket + +- Automatically create a Jira ticket in the `AR` project. +- **IMPORTANT**: The ticket description must focus on the **requirement** and the **purpose of the requirement**. Do NOT write it like a PR description (i.e. do not just list the technical changes made). Instead, explain the 'why' and the 'what' from a functional/requirement perspective. +- **IMPORTANT**: You must ask the user which Epic the ticket should be linked to. Provide the user with these options: + - `1` for **Infrastructure & Dependencies** (`AR-1`) + - `2` for **Portfolio Content & Features** (`AR-2`) + - `3` for **Interactive Styling & Animations** (`AR-3`) + - `4` for **Translations & Accessibility** (`AR-4`) + - `5` for **Coverage & Quality Assurance** (`AR-5`) +- Wait for the user's response. Once the user provides the Epic choice, link the newly created ticket to the corresponding Epic using `parent: "EPIC-KEY"` (e.g., `parent: "AR-1"`). +- Follow all standard naming and template guidelines from `.claude/skills/jira/SKILL.md` (e.g., prefixing `[Web]`, `[Core]`, `[Design]`, or `[Testing]` to the title, and applying the corresponding label). + +### 4. Create Commit + +- After the Jira ticket is successfully created, initiate the commit process. +- Follow the rules defined in `.claude/skills/commit/SKILL.md`. +- Use the standard branch naming convention: `amitraikwar/{ticket-number}/{short-description}`. +- **IMPORTANT**: Use `make commit` with a **detailed, multi-line body**. +- The commit body MUST explain the "Why" and "What" of the changes, including a bulleted list of modifications and the specific requirements addressed. +- Example format: `(): \n\n- Detailed change 1\n- Detailed change 2\n...` + +### 5. Create Pull Request + +- If all the above steps (testing, documentation, ticket creation, committing) have succeeded, proceed to create a Pull Request. +- Follow the rules defined in `.claude/skills/pr/SKILL.md`. +- Target the `onemanfighter/amitraikwar` repository. +- Set the base branch to `development`. +- Use the appropriate title and description templates. +- Trigger the `jira-pr-created` step to comment on the Jira ticket and move it to "In Review". diff --git a/.claude/agents/REVIEW.md b/.claude/agents/REVIEW.md new file mode 100644 index 0000000..fd8f8b1 --- /dev/null +++ b/.claude/agents/REVIEW.md @@ -0,0 +1,33 @@ +--- +name: review +description: Single unified Agent responsible for dynamically reviewing and testing Pull Requests based on modified files. +--- + +# Unified PR Review & Merge Agent + +This agent ruleset defines the responsibilities and workflows for the AI Agent assigned to review and merge Pull Requests in the **Amit Raikwar Portfolio** project. + +## 1. Trigger Conditions + +This agent should be invoked when any Pull Request is opened or updated in the repository. + +## 2. Review Checklist + +The agent MUST perform the following checks before approving a PR: + +- **PR Metadata**: Verify that the PR title and description follow the templates defined in `.claude/skills/pr/SKILL.md`. +- **Branch Naming**: Verify the branch name follows `amitraikwar/{ticket-number}/{short-description}`. +- **Dynamic Build & Test Verification**: Execute `yarn test` and `yarn build` commands. Ensure they complete successfully without errors. +- **Code Quality**: Ensure the changes adhere to project standards (e.g., clean component structures, no excessive logging, appropriate framework usage). + +## 3. Merge Protocol + +If the PR passes all checks: + +1. Use the `github-mcp-server` to submit an **Approve** review with a summary of the checks performed. +2. Merge the Pull Request using the `merge_pull_request` tool. +3. Execute the `jira-pr-merged` skill steps from `.claude/skills/pr/SKILL.md` to update the associated Jira ticket. + +If the PR fails any check (e.g. tests fail, formatting is incorrect): + +1. Use the `github-mcp-server` to submit a **Request Changes** review, clearly detailing which checks failed and providing actionable feedback. diff --git a/.claude/skills/commit/SKILL.md b/.claude/skills/commit/SKILL.md new file mode 100644 index 0000000..df5fe53 --- /dev/null +++ b/.claude/skills/commit/SKILL.md @@ -0,0 +1,81 @@ +--- +name: commit +description: Manage Conventional Commits, branch naming conventions, and interactive commit workflows using the project's standardized makefile commands. +trigger: /commit +--- + +# Commit Command + +This file provides guidance for using Claude Code to commit changes following the project's Commit Workflow. + +> [!IMPORTANT] +> You MUST always use `make commit` to initiate a commit. This ensures all commits follow the conventional commit standard. + +## Commit Workflow + +1. Create a feature branch: `git checkout -b amitraikwar/{ticket-number}/{short-description}` +2. Stage your changes: `git add ` +3. Create initial commit: `make commit` (opens interactive conventional commit prompt) +4. Amend with detailed message: `git commit --amend` to add requirements and detailed descriptions of changes. + +## Branch Naming + +All feature and fix branches MUST follow this naming pattern: + +`amitraikwar/{ticket-number}/{short-description}` + +**Example:** +`amitraikwar/AR-18/update-branding` + +## Commit Message Format + +> [!IMPORTANT] +> Always use `make commit` for the initial commit. DO NOT use `git commit -m`. +> **Every commit MUST include a detailed body.** A single-line description is NOT sufficient. + +When using Claude Code to commit changes: + +- **Initial Commit**: Use the `/commit` skill or run `make commit` with a detailed body. +- **Body Content**: The commit body MUST explain: + - **Why**: The rationale behind the changes. + - **What**: A summary of key modifications (use bullet points for multiple items). + - **Requirements**: List any specific requirements or JIRA criteria addressed. +- **Format**: `(): ` followed by a detailed body. + +## Examples + +### Initial Commit with Detailed Message + +To provide a high-quality commit message in one go: + +```bash +# Pattern: printf "tag_index\nscope\ntitle\nDetailed body explanation with bullet points.\n\n" | make commit +printf "3\AR-19\nadd branding and skills\n- Implement portfolio branding across core components.\n- Add custom SVG icons for the design system.\n- Update global styles to use the vibrant portfolio color palette.\n- Adhere to requirements specified in AR-19 for visual excellence.\n\n" | make commit +``` + +### Initial Commit (Interactive) + +```bash +git add src/components/NewFeature.tsx +make commit +# Select type: feat, fix, etc. +# Enter ticket number as scope (e.g. AR-19) +# Enter brief description +``` + +### Amend Commit + +```bash +git commit --amend +# Edit the commit message to add: +# - Detailed description of changes +# - Requirements addressed +# - Any breaking changes or special notes +``` + +## Best Practices + +- Keep subject line under 50 characters +- Use body to explain "why" not just "what" +- Reference related issues if applicable +- Ensure commit passes linting and tests before pushing diff --git a/.claude/skills/frontend-design/SKILL.md b/.claude/skills/frontend-design/SKILL.md new file mode 100644 index 0000000..f709fde --- /dev/null +++ b/.claude/skills/frontend-design/SKILL.md @@ -0,0 +1,45 @@ +--- +name: frontend-design +description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics. +license: Complete terms in LICENSE.txt +--- + +This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. + +The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints. + +## Design Thinking + +Before coding, understand the context and commit to a BOLD aesthetic direction: + +- **Purpose**: What problem does this interface solve? Who uses it? +- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction. +- **Constraints**: Technical requirements (framework, performance, accessibility). +- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember? + +**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity. + +Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is: + +- Production-grade and functional +- Visually striking and memorable +- Cohesive with a clear aesthetic point-of-view +- Meticulously refined in every detail + +## Frontend Aesthetics Guidelines + +Focus on: + +- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font. +- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. +- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise. +- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density. +- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays. + +NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character. + +Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations. + +**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well. + +Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision. diff --git a/.claude/skills/jira/SKILL.md b/.claude/skills/jira/SKILL.md new file mode 100644 index 0000000..699729b --- /dev/null +++ b/.claude/skills/jira/SKILL.md @@ -0,0 +1,115 @@ +--- +name: jira +description: Comprehensive management of Atlassian Jira and Confluence resources, enforcing project scope (Amit Raikwar Portfolio, Key: AR), platform prefixes, labeling standards, and issue templates. +trigger: /jira +--- + +# Jira & Confluence Management Ruleset + +This ruleset defines the standard patterns for interacting with Atlassian resources. **All operations MUST target the Amit Raikwar Portfolio environment.** + +## 1. Target Environment + +- **Jira Project Name:** `Amit Raikwar Portfolio` +- **Jira Project Key:** `AR` +- **Confluence Space Key:** `AR` (Amit Raikwar Portfolio) +- **Cloud Instance:** `ar1603.atlassian.net` + +> [!IMPORTANT] +> Every Jira issue created or modified MUST use `projectKey: "AR"`. +> Every Confluence page created or searched MUST use `spaceId: "AR"` or `spaceKey: "AR"`. + +## 2. Naming Conventions + +- **Epic Linking:** EVERY Story, Task, and Bug MUST be linked to a corresponding Epic. When using the API, specify the Epic using the `parent: { "key": "EPIC-KEY" }` field. +- **Platform Prefixing:** Every ticket summary MUST start with a platform identifier in brackets: + - `[Web]` for feature-related stories/tasks. + - `[Core]` for shared or infrastructure-related tasks. + - `[Design]` for UI/UX and styling tasks. + - `[Testing]` for testing and quality assurance tasks. +- **Example:** `[Web] Implement project filtering on main dashboard` + +## 3. Active Epics (Project: AR) + +- **AR-1**: `[Core] Infrastructure & Dependencies` +- **AR-2**: `[Web] Portfolio Content & Features` +- **AR-3**: `[Design] Interactive Styling & Animations` +- **AR-4**: `[Localization] Translations & Accessibility` +- **AR-5**: `[Testing] Coverage & Quality Assurance` + +## 4. Issue Types & Templates + +> [!IMPORTANT] +> Unless explicitly specified otherwise, always use **Story** as the default issue type for new ticket requests. + +### Story + +Use for user-facing features and functionality. +**Description Template:** + +```markdown +## Background: + +## Details + +## Acceptance criteria: + +## Implementation notes. +``` + +### Task + +Use for technical setup, maintenance, or infrastructure work. (Follow Story template structure if complex). + +### Bug + +Use for defects or errors. +**Description Template:** + +```markdown +## Background: + +## Details + +## Acceptance criteria: + +- {use number bullet points} +- {requirement 1} +- {requirement 2} + +## Repro steps + +## QA notes +``` + +### Epic + +Use for high-level project goals or features. + +## 5. Labeling + +> [!IMPORTANT] > **Every ticket MUST have at least one platform-specific label (`Web`, `Design`, `Core`, or `Testing`).** + +- Apply platform-specific labels (`Web`, `Design`, `Core`, `Testing`) to every issue for easy filtering. +- Link all stories and tasks to their corresponding **Epic**. + +## 6. Workflow & Statuses + +Standard project workflow statuses to target: + +- **Story/Tasks:** Backlog, In Progress, In Review, Done, Won't do. +- **Bugs:** Backlog, In Progress, In Review, Done, Won't do, In Testing, Duplicate. + +## 7. Field Requirements + +- **Priority:** Must have a value. Do not attempt to set to null or clear via API as it is a required system field. +- **Description:** MUST use the templates defined in section 4. Provide a clear summary of work and explicit acceptance criteria. + +## 8. Link Formatting (Strict Rule) + +When adding comments via API (`addCommentToJiraIssue`): + +1. **MUST** set `contentFormat: "markdown"`. +2. **MUST** use standard Markdown `[Title](URL)` syntax. +3. If title linkification is critical, provide the raw URL in parentheses after the title. +4. **DO NOT** use Wiki Markup `[Title|URL]` as it fails in ADF-default environments. diff --git a/.claude/skills/pr/SKILL.md b/.claude/skills/pr/SKILL.md new file mode 100644 index 0000000..b2e078b --- /dev/null +++ b/.claude/skills/pr/SKILL.md @@ -0,0 +1,137 @@ +--- +name: pr +description: Standardized workflows for Pull Request creation and lifecycle management, including branch naming, templates, and agent-led Jira status automation. +trigger: /pr +--- + +# Pull Request Management Skill + +This ruleset defines the standard patterns for creating and managing Pull Requests in this repository. **All Pull Requests MUST be created in the onemanfighter/amitraikwar repository.** + +## 1. Target Repository + +- **Owner:** `onemanfighter` +- **Repository:** `amitraikwar` +- **Default Base Branch:** `development` + +> [!IMPORTANT] +> Every Pull Request created MUST use `owner: "onemanfighter"` and `repo: "amitraikwar"`. + +## 2. Pull Request Types + +### Feat (Feature) + +Use this for new features or enhancements. + +**Title Format:** +`feat(ticket-number): {Short title}` + +**Description Template:** + +```markdown +# Description of changes + +## Requirement + +- {Requirement 1} +- {Requirement 2} + +## Implementation + +- {Focus on functional changes, not just code details} + +Ticket: {Link to Jira ticket} +Author: {Name} +``` + +### Fix (Bug Fix) + +Use this for bug fixes or resolving issues. + +**Title Format:** +`fix(ticket-number): {Short title}` + +**Description Template:** + +```markdown +## Issue: + +- {Description of the bug or issue} + +## Rootcause: + +- {What was causing the issue} + +## Fix + +- {How it was fixed} + +### Implementation + +- {Focus on functional changes, not just code details} + +Ticket: {Link to Jira ticket} +Author: {Name} +``` + +## 3. Branch Naming Convention + +All feature and fix branches MUST follow this naming pattern (consistent with `COMMIT.md`): + +`amitraikwar/{ticket-number}/{short-description}` + +**Example:** +`amitraikwar/AR-20/update-jira-skills` + +## 4. GitHub MCP Server Integration + +When creating a PR using the `github-mcp-server` tool, ensure: + +1. The `owner` and `repo` are set to `onemanfighter` and `amitraikwar`. +2. The `title` strictly follows the format above. +3. The `body` (description) strictly follows the corresponding template. +4. The `head` branch strictly follows the naming convention: `amitraikwar/{ticket-number}/{short-description}`. +5. The `base` branch is `development`. +6. Apply platform-specific **Labels** (`Web`, `Core`, `Design`, or `Testing`) to the PR. + +## 5. Best Practices + +- Always link the Jira ticket. +- Keep titles concise but descriptive. +- Descriptions should explain the "Why" and the functional impact of the changes. +- Ensure the PR is created as a `draft` if it's still a work in progress. + +### skill: jira-pr-created + +**Trigger:** After creating a Pull Request. + +1. Extract the Ticket ID from the branch name using: `{{pullRequest.sourceBranch.substringAfter("/").substringBefore("/")}}`. +2. Use `addCommentToJiraIssue` (with `contentFormat: "markdown"`) to add a comment: `Pull Request raised: [{{pullRequest.title}}]({{pullRequest.url}})`. +3. Use `transitionJiraIssue` to move the ticket to `In Review` (Transition ID: `31`). + +### skill: jira-pr-merged + +**Trigger:** After merging a Pull Request. + +1. Extract the Ticket ID from the branch name. +2. Extract the implementation summary using: `{{pullRequest.description.match("(?s)## Implementation\s*(.*?)\r?\n\r?\nTicket:")}}`. +3. Extract the original PR Author using: `{{pullRequest.description.substringAfter("Author:").trim()}}`. +4. Use `addCommentToJiraIssue` (with `contentFormat: "markdown"`) to add a comment: + + ```text + The changes in this PR have been merged. + + *Summary of changes:* + {extracted_summary} + + *Author:* {extracted_author} + *Merged by:* {{pullRequest.mergedBy.displayName}} + *PR Link:* [{{pullRequest.title}}]({{pullRequest.url}}) + ``` + +5. Use `transitionJiraIssue` to move the ticket to `Done` (Transition ID: `41`). + +### Smart Values Reference + +- **Summary Extraction**: `{{pullRequest.description.substringAfter("## Implementation").substringBefore("Ticket:").trim()}}` +- **Ticket ID from Branch**: `{{pullRequest.sourceBranch.substringAfter("/").substringBefore("/")}}` diff --git a/.claude/skills/readme/SKILL.md b/.claude/skills/readme/SKILL.md new file mode 100644 index 0000000..bf975f9 --- /dev/null +++ b/.claude/skills/readme/SKILL.md @@ -0,0 +1,95 @@ +--- +name: readme +description: Guidelines, template structures, and standards for writing, formatting, and updating README files across the project. +trigger: /readme +--- + +# README Standard Writing Guidelines + +This skill defines the standards for creating, updating, and formatting README files across the portfolio repository. Maintaining clean, technically accurate, and easily readable documentation ensures developers and agents can quickly understand the system's architecture, dependencies, and entry points. + +--- + +## 1. Core Principles + +1. **Concise Prose**: Keep sentences tight, direct, and active. Avoid fluff and verbose descriptions. Let diagrams, code blocks, and tables do the heavy lifting. +2. **Visual Hierarchy**: Use Markdown headers (`#`, `##`, `###`), horizontal rules (`---`), and lists to structure information cleanly. +3. **No Placeholders**: Never include empty placeholders (e.g., `TODO`, `insert here`). Use concrete, working examples. +4. **Self-Documenting Code / Shell Commands**: Provide explicit commands rather than generic descriptions. +5. **Interactive Diagrams**: Document complex interactions and system design visually using Mermaid diagrams rather than large walls of text. + +--- + +## 2. Standard README Structure + +The repository README should follow this structured sequence of sections: + +### 1. Title & High-level Pitch + +- Must start with a clear H1 representing the project name: `# Portfolio Website` +- A single concise paragraph summarizing what the application does, the core technologies used, and its main purpose. + +### 2. Architectural / Data Flow Diagram + +- A styled `mermaid` flowchart or sequence diagram depicting key components, state boundaries, or rendering layers. + +### 3. Table of Contents + +- A linked Markdown list pointing to all subsequent headers. + +### 4. Directory Structure + +- A clean ASCII tree diagram of the project folder. Key files and subfolders must have short, inline comments describing their role. +- Example: + ``` + src/ + โ”œโ”€โ”€ components/ # Reusable UI widgets + โ””โ”€โ”€ App.tsx # Root Application + ``` + +### 5. Tech Stack & Dependencies + +- A markdown table listing primary packages, versions, and specific purposes. +- Example: + | Dependency | Version | Purpose | + |:---|:---|:---| + | `react` | 18.2.0 | Frontend core framework | + +### 6. Getting Started & Installation + +- **Prerequisites**: Clear list of system level tools required (e.g., Node/Yarn version). +- **Step-by-step Commands**: Code blocks detailing how to install, build, run in dev mode, and run tests. + +--- + +## 3. Formatting Standards + +### Markdown Best Practices + +- **Alerts**: Use GitHub-style warnings and notes to highlight critical information: + > [!IMPORTANT] + > Always run tests to verify layout stability before raising a PR. +- **Code Fences**: Always specify the language name for syntax highlighting (e.g., `typescript`, `bash`, `env`, `json`, `mermaid`). +- **Tables**: Align header columns cleanly for readability. E.g., `|:---|:---|` for left-aligned columns. + +### Mermaid Diagram Guidelines + +- Use customized color classes for nodes to make diagrams visually distinct: + ```mermaid + classDef client fill:#eef2ff,stroke:#6366f1,stroke-width:2px,color:#1e1b4b; + classDef server fill:#fdf2f8,stroke:#ec4899,stroke-width:2px,color:#500724; + ``` +- Always quote labels containing parentheses, brackets, or commas to avoid rendering errors. E.g., `node["Label Name (Detail)"]`. + +--- + +## 4. Maintenance Rule + +Whenever a source code modification introduces changes to: + +1. Routing paths or screen setups. +2. In-memory state keys or state structures. +3. Dependencies and tech stack versions. +4. Environment configurations. + +You **MUST** immediately update the corresponding `README.md`. This requirement is enforced by the rule defined in [.claude/CLAUDE.md](file:///Users/mr.robot/z-stash/AmitRaikwar-in/amitraikwar/.claude/CLAUDE.md). diff --git a/.claude/skills/web/SKILL.md b/.claude/skills/web/SKILL.md new file mode 100644 index 0000000..d372e57 --- /dev/null +++ b/.claude/skills/web/SKILL.md @@ -0,0 +1,81 @@ +--- +name: web +description: Expert-level web development specializing in React 18.2+, Craco, and modern front-end architecture. +trigger: /web +--- + +## Use this skill when + +- Developing or maintaining the Amit Raikwar Portfolio website. +- Configuring Craco, TypeScript, or build tooling. +- Implementing complex UI components, 3D graphics, and design systems. +- Optimizing web performance and SEO. + +## Do not use this skill when + +- The task is unrelated to web development. + +## Instructions + +- Prioritize modern React patterns and hooks. +- Follow the premium design aesthetics: dark modes, glassmorphism, responsive physics texts, custom cursors, and smooth animations. +- Use Chakra UI and Tailwind CSS for styling as configured in the project. +- Ensure strict TypeScript compliance. + +You are a Web Development Expert specializing in building premium, high-performance React applications. + +## Core Expertise + +### React 18.2+ & Modern Patterns + +- Mastery of React hooks (`useMemo`, `useCallback`, `useContext`, `useEffect`). +- Advanced state management using Zustand and React Query. +- Efficient component lifecycle management and performance optimization. +- Handling client-side routing with `react-router-dom` v6. + +### Craco & Build Tooling + +- Configuration of `craco.config.js` for custom Webpack settings. +- Managing environment variables and build scripts. +- Code splitting and lazy loading strategies. +- Configuring ESLint and Prettier for consistent code quality. + +### Premium Design & Styling + +- **Aesthetics**: Implementing interactive dark-mode components with custom canvas effects, WebGL, particle physics, and spotlight cards. +- **Chakra UI**: Expert usage of Chakra v2 components, layouts, and theming. +- **Tailwind CSS**: Leveraging utility classes for styling adjustments as needed. +- **Animations**: Using Framer Motion and GSAP for rich, hardware-accelerated micro-interactions. +- **Three.js / React Three Fiber**: Incorporating interactive 3D elements and canvas scenes. + +### Performance & SEO + +- **Web Vitals**: Optimizing LCP, FID, and CLS for a fast loading portfolio. +- **SEO**: Implementing semantic HTML, meta tags, and descriptive titles. +- **Image Optimization**: Using modern formats and responsive images. + +### Testing & QA + +- Unit and integration testing with Jest and React Testing Library. +- E2E testing with Cypress. +- Accessibility (a11y) compliance and ARIA patterns. + +## Behavioral Traits + +- **Visual Excellence**: Never settles for generic designs; always aims for a "premium" feel. +- **Code Quality**: Writes clean, modular, and well-documented code. +- **Responsive-First**: Ensures every feature works flawlessly on all screen sizes. + +## Response Approach + +1. **Understand Intent**: Clarify the UX and technical requirements of the web feature. +2. **Design First**: Propose a visually stunning approach before writing the logic. +3. **Implementation**: Provide clean TypeScript code. +4. **Validation**: Recommend testing strategies and accessibility checks. + +## Example Prompts + +- "Build a premium landing page header with a glassmorphism effect and smooth scroll transitions." +- "Implement a custom 3D element or particle background on the cover screen." +- "Set up a new route and screen for projects or articles." +- "Optimize the performance of the portfolio main screen."