@thinkitive/patil-power-fe-dev

A Claude Code agent and slash command that reads Jira tickets and implements frontend code automatically. Built for React + TypeScript projects.

Give it a Jira ticket, it reads the full context (description, comments, attachments, linked tickets), analyzes your codebase, and writes production-ready frontend code following your existing patterns.

Prerequisites

Before using this package, ensure you have:

• Claude Code CLI installed and authenticated
• Atlassian MCP configured in Claude Code (for Jira access)
• Node.js 16+
• An active Jira project with tickets

Installation

Important: This package must be installed inside your project directory as a dev dependency — NOT globally. It copies agent files into the project's .claude/ directory, which Claude Code scans per-project.

cd your-project
npm install @thinkitive/patil-power-fe-dev --save-dev

Do NOT install globally. npm i -g @thinkitive/patil-power-fe-dev will NOT work — Claude Code only reads .claude/ from your project root, not from npm's global directory.

On install, the package automatically copies the Claude Code agent and slash command into your project's .claude/ directory.

Multi-Repo / Monorepo Setup

If your workspace has multiple apps (e.g., provider-portal/ and frontend-portal/), you have two options:

Option A: Install at root level (if you have a root package.json)

cd my-workspace          # root of your monorepo
npm install @thinkitive/patil-power-fe-dev --save-dev

Option B: Install in each project separately

cd provider-portal
npm install @thinkitive/patil-power-fe-dev --save-dev

cd ../frontend-portal
npm install @thinkitive/patil-power-fe-dev --save-dev

Verify Installation

npx patil-power-fe-dev status

Output:

  Command: installed
  Agent:   installed

Manual Install / Reinstall

If the postinstall didn't run or you need to re-copy the files:

npx patil-power-fe-dev install

Uninstall

npx patil-power-fe-dev uninstall
npm uninstall @thinkitive/patil-power-fe-dev

Team Setup

Once installed, commit the .claude/ files so every developer on your team gets the agent automatically without installing the package themselves:

git add .claude/commands/patil-power-FE-dev.md .claude/agents/jira-ticket-implementer.md
git commit -m "Add patil-power-FE-dev agent for Jira-driven development"
git push

Now any developer who pulls the repo has the command available — no extra setup needed.

Alternatively, add the package to devDependencies in your package.json so it auto-installs for everyone:

{
  "devDependencies": {
    "@thinkitive/patil-power-fe-dev": "^1.0.2"
  }
}

Then any developer who runs npm install on the project automatically gets the agent set up.

Usage

After installing, restart Claude Code (close and reopen the CLI or VSCode extension) to pick up the new command.

Basic Usage — Single Repo

If your terminal is already inside the target project directory:

/patil-power-FE-dev RA-1234

The agent auto-detects which repo you're in based on your current working directory.

Multi-Repo / Micro-Frontend Usage

If your workspace has multiple portals or apps, specify the target explicitly:

/patil-power-FE-dev provider-portal RA-1234
/patil-power-FE-dev frontend-portal RA-5678

Using a Full Jira URL

/patil-power-FE-dev RA-1234
/patil-power-FE-dev https://yourcompany.atlassian.net/browse/RA-1234
/patil-power-FE-dev provider-portal https://yourcompany.atlassian.net/browse/RA-1234

What the Agent Does

When you run the command, the agent goes through four phases:

Phase 1 — Jira Analysis

• Reads the full ticket description
• Reads ALL comments chronologically (latest clarifications take priority)
• Examines attachments (screenshots, mockups, Figma links)
• Follows linked tickets for additional context
• Checks metadata (priority, labels, sprint, epic)
• Filters out backend scope automatically

Phase 2 — Requirement Synthesis

• Produces a structured summary: What, Why, Acceptance Criteria, Edge Cases
• Identifies responsive requirements
• Lists BE dependencies (assumed done)
• Flags ambiguities or conflicting requirements
• Presents the summary for your confirmation before coding

Phase 3 — Codebase Analysis

• Identifies the correct portal/app for changes
• Finds relevant components, hooks, services, and stores
• Traces data flow (API → state → components → UI)
• Identifies reusable components and existing patterns
• Matches the project's styling approach

Phase 4 — Implementation

• Writes code following your existing patterns exactly
• Handles loading, error, and empty states
• Ensures responsiveness across desktop (1920px–1280px) and tablet (1024px–768px)
• Proper TypeScript types — no any
• React performance optimizations (memoization, cleanup, stable keys)
• SOLID principles and clean code practices

Examples

Example 1: Implement a New Feature

/patil-power-FE-dev RA-2001

Agent: Reading Jira ticket RA-2001...

Requirement Summary:
- What: Add a "Payer Authorization" tab to the Patient Detail page
- Why: Care coordinators need to track insurance authorizations per episode
- Acceptance Criteria:
  1. New tab visible between "Documents" and "Scheduling"
  2. Table showing authorization number, payer, start/end dates, status
  3. "Add Authorization" button opens a modal form
  4. Responsive on desktop and iPad
- BE Dependencies: GET /api/v1/patients/{id}/authorizations (assumed done)
- Out of Scope: API creation, notification system

Shall I proceed with implementation?

Example 2: Fix a Bug

/patil-power-FE-dev provider-portal RA-1887

Agent: Reading Jira ticket RA-1887...

Requirement Summary:
- What: Fix date picker resetting to today when switching between patients
- Why: Therapists lose their selected date and have to re-navigate, slowing workflow
- Root Cause: Date state is stored in a shared Redux slice without patient-scoping
- Fix: Scope the selected date by patient ID in the reducer
- Edge Cases: Handle patient switch when no date was previously selected

Shall I proceed with the fix?

Example 3: Multi-Portal Workspace

# Working on admin panel in frontend-portal
/patil-power-FE-dev frontend-portal RA-3042

# Working on therapist-facing feature in provider-portal
/patil-power-FE-dev provider-portal RA-3100

# Auto-detect (terminal is inside provider-portal/)
/patil-power-FE-dev RA-3100

Example 4: Ticket with Design Attachments

/patil-power-FE-dev RA-2500

Agent: Reading Jira ticket RA-2500...

Found 2 attachments:
- dashboard-redesign-desktop.png — new card layout with KPI metrics
- dashboard-redesign-tablet.png — stacked layout for iPad

The design shows:
- 4-column grid on desktop (1440px+), 2-column on tablet
- Each card: white background, 8px border-radius, subtle shadow
- KPI numbers in 24px bold, labels in 12px gray

Implementing pixel-perfect based on attachments...

Agent Rules

The agent enforces these rules automatically:

| Rule | Description | |------|-------------| | Frontend Only | Ignores backend requirements. Assumes APIs are ready. | | No New Dependencies | Never adds npm install unless the ticket explicitly requires it. | | No Breaking Changes | Integrates into existing code without restructuring. | | Pattern Matching | Follows your project's existing conventions exactly. | | Responsive | Every component works from 768px to 1920px. | | Typed | Proper TypeScript — no any types. | | Scoped Changes | Only modifies files in the specified portal/repo. |

Quality Checklist

The agent runs this self-check before presenting code:

• All acceptance criteria satisfied
• Edge cases from comments and linked tickets handled
• Follows existing codebase patterns
• No new dependencies added
• No existing code broken
• Responsive across desktop and tablet
• Properly typed TypeScript
• No unnecessary re-renders, proper memoization
• Loading, error, and empty states handled
• No backend code written
• Code is readable and well-structured

Configuring Jira Access

The agent connects to Jira through the Atlassian MCP server in Claude Code. If you haven't set it up yet:

1. Go to Claude Code settings
2. Add the Atlassian MCP server configuration
3. Authenticate with your Atlassian account
4. The agent will automatically use this connection to read tickets

Refer to the Claude Code MCP documentation for setup instructions.

Customization

Adapting for Your Project

The agent template is installed at:

.claude/agents/jira-ticket-implementer.md
.claude/commands/patil-power-FE-dev.md

You can edit these files to:

• Change portal names (e.g., replace provider-portal with your app name)
• Add project-specific conventions or rules
• Modify the responsive breakpoints
• Add custom quality checks
• Update the Jira URL patterns

Adding to .gitignore (Optional)

If you don't want these files in version control:

.claude/commands/patil-power-FE-dev.md
.claude/agents/jira-ticket-implementer.md

Troubleshooting

| Problem | Solution | |---------|----------| | Command not showing in suggestions | Restart Claude Code after installation | | "Unknown skill" error | Ensure the files exist in .claude/commands/ and .claude/agents/, then restart | | status shows "not installed" | Run npx patil-power-fe-dev install manually | | Jira ticket not found | Check that Atlassian MCP is configured and authenticated | | Agent modifying wrong repo | Specify the portal explicitly: /patil-power-FE-dev provider-portal RA-1234 | | Postinstall didn't run | Run npx patil-power-fe-dev install manually | | Installed globally by mistake | Run npm uninstall -g @thinkitive/patil-power-fe-dev then install in your project directory |

License

MIT