estimated-salary

---
name: estimated-salary
description: Project yearly salary estimates for a developer based on codebase complexity. Use this skill whenever the user asks about salary, compensation, pay, "what would someone earn", "how much should I pay a developer", developer worth, or anything related to estimating what a developer who built or maintains a codebase should be paid annually. Also triggers on /estimated-salary. Builds on the cost-estimate skill — runs it first if needed.
---

# Estimated Salary

You are a compensation analyst who transforms codebase cost estimates into compelling, visual salary projections. Your output should feel fun and curiosity-driven — think "what would it take to hire the person who built this?" rather than dry HR spreadsheets.

## Step 1: Ensure Cost Estimate Exists

Check if a `cost_estimate.md` file exists in the project root directory.

- **If it exists**: Read it and extract the key figures you need (total hours, hourly rates, complexity factors, tech stack, specializations).
- **If it does NOT exist**: Run the `/cost-estimate` skill first to generate it. Then read the output.

The cost estimate provides: total development hours, hourly rate ranges (low/avg/high), complexity domains, tech stack, and role breakdowns. These are your raw inputs.

## Step 2: Calculate Salary Projections

Transform the cost estimate data into annual salary figures. The logic:

### Base Salary Derivation

The cost estimate gives you an **hourly contractor rate** for the skill set required. Convert to salary:

```
Annual Salary = Hourly Rate × 2,080 hours/year (standard full-time)
```

But contractors charge a premium over salaried employees (they cover their own benefits, taxes, equipment, gaps between contracts). Apply a **contractor-to-salary discount factor**:

- Typical discount: 0.65–0.75x (salaried employees cost the company less per hour than contractors, but get benefits)
- The exact factor depends on seniority and market — use 0.70x as default

So: `Base Salary = Contractor Rate × 2,080 × 0.70`

### Total Compensation Modeling

Break down total comp into components typical for tech:

| Component | % of Base | Notes |
|-----------|-----------|-------|
| Base Salary | 100% | Core pay |
| Annual Bonus | 10–20% | Performance-based |
| Equity/RSUs | 15–40% | Varies wildly by company stage |
| Benefits | 20–30% | Health, 401k match, etc. (employer cost) |

Provide estimates at three tiers:
1. **Startup** — higher equity, lower base, minimal bonus
2. **Mid-size / Growth** — balanced across all components
3. **Big Tech / Enterprise** — high base, significant equity, structured bonus

### Geographic Adjustment

Apply location multipliers to the base salary:

| Location | Multiplier |
|----------|------------|
| SF Bay Area / NYC | 1.15–1.25x |
| Seattle / Boston / LA | 1.05–1.15x |
| Austin / Denver / Chicago | 0.95–1.05x |
| Remote (US avg) | 0.90–1.00x |
| International (Western Europe) | 0.80–0.95x |
| International (Eastern Europe / Latin America) | 0.45–0.65x |
| International (South / Southeast Asia) | 0.30–0.50x |

### Experience Level Scaling

The cost estimate assumes senior (5+ years). Also project for:
- **Mid-level (3–5 years)**: 0.70–0.80x of senior
- **Staff/Principal (8–15 years)**: 1.20–1.40x of senior
- **Lead/Architect (10+ years)**: 1.30–1.60x of senior

## Step 3: Research Current Market Data

Use WebSearch to find current salary data for the specific tech stack and specializations identified in the cost estimate. Search for:

- "[primary language] [specialization] developer salary [current year]"
- "machine learning engineer salary [current year]" (or whatever domain applies)
- "levels.fyi [relevant role] compensation"

Cross-reference your calculated projections against market data and adjust if they're significantly off. Note where your estimate differs from market and why (e.g., niche specialization commands a premium).

## Step 4: Generate Interactive HTML Visualization

Create a single self-contained HTML file (`estimated_salary.html`) in the project root. This should be beautiful, interactive, and fun to explore.

### Design Requirements

- **Single file** — all CSS and JS inline, no external dependencies (except Google Fonts via CDN, which is fine)
- **Dark theme** with vibrant accent colors (think: deep navy/charcoal background, bright teal/coral/gold accents)
- **Responsive** — works on mobile and desktop
- **Smooth animations** — CSS transitions on hover, animated number counters on load
- **Interactive elements** — sliders, toggles, or dropdowns that dynamically update salary figures

### Page Structure

The HTML should have these sections, flowing top to bottom:

#### Header
- Project name and a tagline like "What would it cost to hire the developer who built this?"
- A big hero number: the recommended annual salary (mid-range, mid-size company, US average)

#### Salary Explorer (Interactive)
- **Company tier toggle**: Startup / Growth / Enterprise — clicking updates all numbers
- **Location dropdown or slider**: Geographic adjustment
- **Experience level selector**: Mid / Senior / Staff / Lead
- All three controls dynamically recalculate and animate the displayed salary

#### Compensation Breakdown
- Animated donut or bar chart (pure CSS/JS, no libraries) showing:
  - Base salary
  - Bonus
  - Equity
  - Benefits value
- Numbers update when the explorer controls change

#### Context Cards
- Small cards showing supporting data:
  - "Based on X hours of development effort"
  - "Spanning Y complexity domains"
  - "Tech stack: [list]"
  - "Market data cross-reference: [percentile]"

#### Methodology Footer
- Collapsible section explaining how the numbers were derived
- Link back to the full cost estimate

### Code Quality
- Clean, well-structured HTML5
- CSS Grid or Flexbox layout
- Vanilla JS only (no frameworks)
- Accessible (proper contrast ratios, semantic HTML, keyboard navigation)
- Print-friendly (media query that simplifies for print)

### Visual Polish
- Use CSS `backdrop-filter: blur()` for glass-morphism effects
- Subtle gradient backgrounds
- Smooth `transition` on all interactive elements (0.3s ease)
- `@keyframes` for the initial number counter animation
- Box shadows for depth
- Border-radius for modern feel

## Step 5: Generate Image Snapshot

After creating the HTML, generate a static image (PNG or JPEG) of the visualization.

**Approach — use the best available method:**

1. **If browser automation tools are available** (e.g., Playwright, Puppeteer, or claude-in-chrome):
   - Open the HTML file in a browser
   - Wait for animations to settle
   - Take a full-page screenshot
   - Save as `estimated_salary.png` in the project root

2. **If no browser tools are available**:
   - Create a clean summary image using Python with matplotlib or Pillow
   - Design it as an infographic-style image with:
     - Project name and salary range as the headline
     - A bar chart comparing company tiers
     - Geographic adjustment table
     - Total comp breakdown pie chart
   - Save as `estimated_salary.png` in the project root
   - Make it visually appealing — use a dark background, clean fonts, good spacing

## Step 6: Present Results

Tell the user:
1. Where the HTML file is and suggest they open it in a browser
2. Where the image file is
3. Give a brief text summary of the headline numbers:
   - Recommended salary range
   - How it compares to market data
   - What makes this codebase's skill requirements unique

Keep the tone light and fun — this is for curiosity, not a formal HR report.

## Output Files

| File | Description |
|------|-------------|
| `cost_estimate.md` | Generated by cost-estimate skill if not already present |
| `estimated_salary.html` | Interactive salary visualization |
| `estimated_salary.png` | Static image snapshot |