30 Claude Prompts That Build HR Dashboards

You are a recruiting-operations analyst who builds hiring-funnel boards a weekly talent standup can run. <context> I need a recruiting funnel dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE candidates so I can click the working screen in the chat. Fictional sample people only, not a real ATS export. </context> <inputs> - Requisitions in scope: [REQUISITIONS] - Stages in order: [E.G. APPLIED, SCREEN, INTERVIEW, ONSITE, OFFER, HIRED] - Period: [E.G. LAST 60 DAYS] - Volume to seed: [E.G. 80 SAMPLE APPLICANTS] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner; a req filter from [REQUISITIONS]; KPI cards (applicants, offer rate, hire rate, leak stage); a funnel of count and conversion; a conversion table; a labeled sample candidate list with stage; and a callout of the largest drop-off. Use labeled fictional sample names such as Alex Rivera (sample). Compute rates from stage counts in JS constants. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Candidates in labeled JS constants at the top. - Sample data only. Labeled fictional sample names. No emails, phones, resumes, or national IDs. - Leak stage flagged. Accessible contrast. Do not invent a live ATS API. </constraints> <format> Return the full HTML as an artifact, then explain conversion math and which array to replace with an ATS count extract. </format>

You are a recruiting-operations analyst who builds time-to-fill boards that use one clock, not three. <context> I need a time-to-fill dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE reqs so I can click the working screen in the chat. Fictional sample data only. </context> <inputs> - Target days: [TIME TO FILL] - Clock starts at: [REQ APPROVED / POSTED] - Clock ends at: [OFFER ACCEPT / START DATE] - Teams: [LIST] - Period: [E.G. LAST TWO QUARTERS] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner that states the clock; KPI cards (median days, percent inside [TIME TO FILL], open reqs over target, hires in period); a bar of median days by team versus target; a distribution of fill days; a req table with labeled fictional recruiter names, opened-at, filled-at, and days; and an over-target watchlist. Compute days from the two dates. Missing dates show as [VERIFY], not zero. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Reqs in labeled JS constants at the top. - Sample data only. Labeled fictional sample names. No candidate contact details. - Show the clock rule on the page. Accessible contrast. </constraints> <format> Return the full HTML as an artifact, then write the day formula and which array to replace. </format>

You are a recruiting-operations analyst who builds source-of-hire scorecards a budget review can trust. <context> I need a source of hire dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE hires so I can click the working screen in the chat. Fictional sample data only. </context> <inputs> - Sources: [HIRE SOURCES] - Quality proxy: [E.G. 90-DAY RETENTION OR HIRING-MANAGER SCORE] - Cost if known: [PER SOURCE OR MARK SAMPLE] - Period: [E.G. LAST 12 MONTHS] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner; KPI cards (hires, top source share, cost per hire if present, 90-day stay rate); a bar of hires by source; a grouped bar of quality by source; a scorecard table (source, hires, share, quality, cost per hire); and a labeled sample hire list with source. Use labeled fictional sample names. Compute shares and cost per hire from constants. Missing cost shows as none, not a guessed dollar. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Hires in labeled JS constants at the top. - Sample data only. Labeled fictional sample names. No emails or phones. - Do not invent agency invoices. Accessible contrast. </constraints> <format> Return the full HTML as an artifact, then explain quality and cost formulas and which array to replace. </format>

You are a recruiting-operations analyst who builds interview aging boards that make stalled candidates impossible to ignore. <context> I need an interview pipeline aging dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE candidates so I can click the working screen in the chat. Fictional sample people only. </context> <inputs> - Stages and stale-after days: [INTERVIEW STAGES] - Aging buckets: [E.G. 0-7, 8-14, 15-30, 30+ DAYS] - Owners: [LABELED SAMPLE RECRUITER NAMES] - Period: [E.G. OPEN PIPELINE NOW] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner; KPI cards (open candidates, stale count, median days in stage, past-stale dollars or reqs if you track them); a stage-by-age heatmap; a stale watchlist; and a candidate table with labeled fictional names, stage, days in stage, owner. Compute days from last-stage-change versus a now constant. Stage chips filter the table. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Candidates in labeled JS constants at the top. - Sample data only. Labeled fictional sample names. No emails, phones, or resume text. - Stale rows flagged. Heatmap not color-only. Accessible contrast. </constraints> <format> Return the full HTML as an artifact, then explain the stale-day rules and which array to replace. </format>

You are a recruiting-operations analyst who builds offer-accept boards that show why paper dies. <context> I need an offer accept and decline dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE offers so I can click the working screen in the chat. Fictional sample people only. </context> <inputs> - Accept target: [OFFER TARGET] - Decline reasons: [E.G. COMP, COUNTER, TIMING, ROLE, OTHER] - Teams: [LIST] - Period: [E.G. LAST 6 MONTHS] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner; KPI cards (offers out, accept rate versus [OFFER TARGET], declines, median days to decision); a bar of accept versus decline by team; a decline-reason donut; an offer table with labeled fictional candidate names, team, outcome, reason, days; and a declined watchlist. Compute accept rate from outcome fields. Clicking a reason filters the table. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Offers in labeled JS constants at the top. - Sample data only. Labeled fictional sample names. No emails, phones, or salary figures that look like a real person's offer letter. Use band or [SAMPLE COMP] if you show money. - Below-target teams flagged. Accessible contrast. </constraints> <format> Return the full HTML as an artifact, then write the accept-rate formula and which array to replace. </format>

You are a people-analytics analyst who builds attrition boards a monthly review can argue from. <context> I need a voluntary attrition dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE exits so I can click the working screen in the chat. Fictional sample people only, not a real termination file. </context> <inputs> - Target rate: [ATTRITION TARGET] - Teams: [LIST] - Months: [E.G. LAST 12] - Average headcount basis: [OPENING / AVERAGE / CLOSING] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner; KPI cards (voluntary exits, annualized rate versus [ATTRITION TARGET], involuntary count, hottest team); a line of monthly voluntary rate; a bar by team; a leavers table with labeled fictional sample names, team, tenure months, voluntary flag; and a team filter. Compute rate as exits / average headcount for the window, and show that rule on the page. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Exits and monthly headcount in labeled JS constants. - Sample data only. Labeled fictional sample names. No emails, phones, IDs, or real-looking termination notes. - Do not invent why a real person quit. Accessible contrast. </constraints> <format> Return the full HTML as an artifact, then write the rate formula and which arrays to replace. </format>

You are a people-analytics analyst who builds regrettable-loss boards that use a written rule, not a feeling. <context> I need a regrettable loss dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE exits so I can click the working screen in the chat. Fictional sample people only. </context> <inputs> - Regrettable rule: [REGRETTABLE RULE] - Teams: [LIST] - Period: [E.G. LAST 12 MONTHS] - Rating or skill field: [E.G. LAST RATING MEETS-PLUS] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner that quotes [REGRETTABLE RULE]; KPI cards (exits, regrettable count, regrettable share, median tenure of regrettable); a monthly bar of regrettable versus other voluntary; a watchlist of labeled fictional sample names with team, tenure, rating tag, and why the rule fired; and a team table. Compute the flag in JS from the rule fields. Do not add a second secret definition. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Exits in labeled JS constants at the top. - Sample data only. Labeled fictional sample names. No emails, phones, or performance-review prose. - This is a loss board, not a blame list. Accessible contrast. </constraints> <format> Return the full HTML as an artifact, then restate the rule in code comments and which array to replace. </format>

You are a people-analytics analyst who builds tenure-at-exit boards that show when people actually leave. <context> I need a tenure at exit dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE exits so I can click the working screen in the chat. Fictional sample people only. </context> <inputs> - Tenure bands: [TENURE BANDS] - Teams: [LIST] - Period: [E.G. LAST 18 MONTHS] - Highlight: [E.G. FIRST YEAR] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner; KPI cards (exits, median tenure at exit, share in the first-year band, team with the most first-year exits); a bar of exits by [TENURE BANDS]; a stacked bar by team; a leavers table with labeled fictional sample names, start, last day, tenure months, band; and a first-year watchlist. Compute tenure months from start and last-day dates. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Exits in labeled JS constants at the top. - Sample data only. Labeled fictional sample names. No emails, phones, or IDs. - First-year band visually loud. Accessible contrast. </constraints> <format> Return the full HTML as an artifact, then write the tenure formula and which array to replace. </format>

You are a people-analytics analyst who builds flight-risk heatmaps that are signal boards, not a firing list. <context> I need a flight risk dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE people so I can click the working screen in the chat. Fictional labeled sample names only. Not a real employee watchlist. </context> <inputs> - Signals and weights: [FLIGHT SIGNALS] - Score bands: [E.G. WATCH 40-69, HIGH 70+] - Teams: [LIST] - Number of sample people: [E.G. 24] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner that says this is a signal sketch, not a performance review; KPI cards (people scored, high-risk count, watch count, hottest team); a team-by-band heatmap; a formula callout of [FLIGHT SIGNALS]; and a sortable table of labeled fictional sample names with each signal, computed score, and band. Compute the score from editable weights. Clicking a heatmap cell lists those sample rows. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - People and weights in labeled JS constants at the top. - Sample data only. Labeled fictional sample names. No emails, phones, IDs, or home addresses. - Band uses color plus the word. No hero or slacker labels. Accessible contrast. </constraints> <format> Return the full HTML as an artifact, then explain the score formula and which array to replace with an anonymized signal extract. </format>

You are a people-analytics analyst who builds new-hire survival boards that catch a bad onboarding class early. <context> I need a new-hire survival dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE new hires so I can click the working screen in the chat. Fictional sample people only. </context> <inputs> - Survival windows: [SURVIVAL WINDOW] - Start-month cohorts: [E.G. LAST 6 COHORTS] - Teams: [LIST] - Still-active rule: [NO LAST-DAY DATE] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner; a cohort picker; KPI cards (hires in cohort, still active, 30/60/90 stay rates); a line of stay rate by window; a team table; and a labeled sample new-hire list with start, last day or active, and which window they cleared. Compute stay as still employed at day 30/60/90 from start and last-day. A hire who has not yet reached a window is marked too-early, not as a stay. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Hires in labeled JS constants at the top. - Sample data only. Labeled fictional sample names. No emails, phones, or IDs. - Show the too-early rule on the page. Accessible contrast. </constraints> <format> Return the full HTML as an artifact, then write the stay-rate math and which array to replace. </format>

You are a people-analytics analyst who builds eNPS pulse boards a leadership review can read without opening a slide deck. <context> I need an eNPS and survey pulse dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE scores so I can click the working screen in the chat. Fictional sample respondents only. </context> <inputs> - Wave name: [SURVEY WAVE] - Teams: [LIST] - eNPS question scale: [0-10] - Prior wave if any: [OR SKIP] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner; a header for [SURVEY WAVE]; KPI cards (eNPS, response rate, promoter %, detractor %); a bar of eNPS by team; a stacked promoter/passive/detractor mix; a trend if a prior wave exists; and a small-n flag when a team has fewer than an editable threshold of responses. Compute eNPS as (% promoters minus % detractors). Respondents are labeled fictional sample IDs such as Sample R-14, not real emails. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Responses in labeled JS constants at the top. - Sample data only. No real employee emails or free-text that reads like a real complaint. - Small-n cells marked. Accessible contrast. </constraints> <format> Return the full HTML as an artifact, then write the eNPS formula and which array to replace with a wave export. </format>

You are a people-analytics analyst who builds manager-score heatmaps that stay fair to small teams. <context> I need a manager engagement heatmap as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE team scores so I can click the working screen in the chat. Labeled fictional manager names only. </context> <inputs> - Managers and teams: [MANAGER TEAMS] - Score metric: [E.G. TEAM ENPS OR MANAGER-ITEM AVERAGE] - Small-n rule: [E.G. HIDE UNDER 5 RESPONSES] - Wave: [NAME] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner; KPI cards (managers scored, hidden by small-n, lowest visible score, response rate); a manager-by-item heatmap or a manager-by-team grid; a table of labeled fictional manager names with score, n, response rate, and band; and a click-through that lists item scores for that manager, never named respondents. Compute averages from response rows. Apply the small-n hide in JS. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Responses in labeled JS constants at the top. - Sample data only. Labeled fictional sample names. No respondent emails or raw comments on the manager card. - Hidden cells show n too small, not a fake score. Accessible contrast. </constraints> <format> Return the full HTML as an artifact, then explain the small-n rule and which array to replace. </format>

You are a people-operations analyst who builds recognition boards that measure coverage, not applause volume. <context> I need a recognition coverage dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE kudos so I can click the working screen in the chat. Fictional sample people only. </context> <inputs> - Recognition types: [RECOGNITION TYPES] - Period: [E.G. LAST 30 DAYS] - Teams: [LIST] - Coverage target: [E.G. 60% OF TEAM RECEIVED ONE] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner; KPI cards (notes sent, unique receivers, coverage %, quiet teams); a bar of volume by [RECOGNITION TYPES]; a team table (headcount, receivers, coverage, versus target); a quiet-team watchlist; and a recent-notes list using labeled fictional sample names. Compute coverage as unique receivers / team headcount. Type chips filter the recent list. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Notes and headcount in labeled JS constants at the top. - Sample data only. Labeled fictional sample names. No real praise text that identifies a living person. - Quiet teams flagged. Accessible contrast. </constraints> <format> Return the full HTML as an artifact, then write the coverage formula and which arrays to replace. </format>

You are a people-analytics analyst who builds engagement-by-tenure boards that match the attrition cuts. <context> I need an engagement by tenure dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE scores so I can click the working screen in the chat. Fictional sample respondents only. </context> <inputs> - Tenure cuts: [TENURE CUTS] - Score: [E.G. ENPS OR ENGAGEMENT INDEX] - Teams: [LIST] - Wave: [NAME] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner; KPI cards (overall score, first-year score, biggest band gap, n by band); a bar of score by [TENURE CUTS]; a team-by-band table; and a callout of the weakest band. Assign each sample respondent to a band from tenure months. Clicking a band lists item averages for that band, not named people. Mark small-n bands. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Responses in labeled JS constants at the top. - Sample data only. Use sample IDs, not emails. No raw comments that name a manager. - Accessible contrast. Do not invent a benchmark you did not give. </constraints> <format> Return the full HTML as an artifact, then explain band assignment and which array to replace. </format>

You are a people-analytics analyst who builds survey-theme trackers from a codebook, not from vibes. <context> I need a survey theme tracker as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE coded comments so I can click the working screen in the chat. Comments are fictional samples, not real employee quotes. </context> <inputs> - Theme codes: [THEME CODES] - Waves: [E.G. THIS WAVE AND PRIOR] - Sentiment: [POS / MIXED / NEG] - Teams: [LIST] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner that says comments are fictional samples; KPI cards (comments coded, top theme, rising theme versus prior, share negative); a bar of volume by [THEME CODES]; a stacked sentiment bar; a rising/falling table; and a comment drawer of short fictional sample lines tagged with a theme. Clicking a theme filters the drawer. Compute rise as this-wave count minus prior. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Coded rows in labeled JS constants at the top. - Sample data only. Do not invent a quote that sounds like a real workplace complaint about a named person. - Accessible contrast. Theme chips filter. </constraints> <format> Return the full HTML as an artifact, then explain rise math and which array to replace with a coded export. </format>

You are a compensation analyst who builds band-position boards a cycle review can click through. <context> I need a comp band position dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE pay rows so I can click the working screen in the chat. Fictional labeled sample people only, not a real payroll export. </context> <inputs> - Bands: [BAND STRUCTURE] - Currency: [E.G. USD] - Teams or job families: [LIST] - Compa-ratio bands: [E.G. BELOW 0.85, IN RANGE, ABOVE 1.15] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner; KPI cards (people in sample, median compa-ratio, below-min count, above-max count); a histogram of compa-ratio; a family table; and a row table with labeled fictional sample names, family, band, sample pay, min, mid, max, and computed compa-ratio. Compa-ratio = pay / band mid. Clicking a family filters the table. Flag below-min and above-max. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Bands and rows in labeled JS constants at the top. - Sample data only. Labeled fictional sample names. No bank details, tax IDs, or home addresses. - This is a band snapshot, not tax or legal advice. Accessible contrast. </constraints> <format> Return the full HTML as an artifact, then write the compa-ratio formula and which arrays to replace with an anonymized pay extract. </format>

You are a compensation analyst who builds a pay-equity snapshot for discussion, not a legal opinion. <context> I need a pay equity snapshot as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE anonymized rows so I can click the working screen in the chat. Fictional sample IDs only. This is not a legal pay-equity study. </context> <inputs> - Role families and levels: [ROLE FAMILIES] - Grouping field: [E.G. SAMPLE GROUP A / B, NOT A REAL DEMOGRAPHIC FILE UNLESS I PASTE ONE] - Currency: [E.G. USD] - Min cell size: [E.G. 5] </inputs> <task> Build the dashboard with: a SAMPLE DATA and not legal advice banner; KPI cards (families compared, families with a gap over an editable %, cells hidden by min size); a family table of median pay by group inside the same level; a gap bar; and a labeled sample row table using Sample Emp 01 style IDs, family, level, and sample pay. Hide cells under the min size. Compute median and percent gap in JS. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Rows in labeled JS constants at the top. - Sample data only. Prefer sample IDs over names. No emails, SSNs, or home addresses. - Label the page as a discussion snapshot, not a legal finding. Accessible contrast. </constraints> <format> Return the full HTML as an artifact, then write the gap math, the min-size rule, and which array to replace with an anonymized extract. </format>

You are a compensation analyst who builds merit-cycle boards that track the pool, not just the average raise. <context> I need a merit cycle spread dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE awards so I can click the working screen in the chat. Fictional labeled sample people only. </context> <inputs> - Pool: [MERIT POOL] - Teams: [LIST] - Recommended versus given fields: [PERCENTS] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner; KPI cards (pool, used, remaining, average given %); a distribution of given %; a team table (pool, used, remaining, average given, average recommended); and a sample award table with labeled fictional names, recommended %, given %, and dollar. Compute used as sum of given dollars and remaining as pool minus used. Team chips filter the table. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Awards and pool in labeled JS constants at the top. - Sample data only. Labeled fictional sample names. No bank or tax IDs. - Remaining can be negative and must show it. Accessible contrast. </constraints> <format> Return the full HTML as an artifact, then write pool math and which arrays to replace. </format>

You are a compensation analyst who builds bonus-attainment boards that show each plan leg. <context> I need a bonus attainment dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE awards so I can click the working screen in the chat. Fictional labeled sample people only. </context> <inputs> - Plan name and legs: [BONUS PLAN] - Target percent: [E.G. 100% OF TARGET] - Teams: [LIST] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner; a plan-leg selector from [BONUS PLAN]; KPI cards (people on plan, average attainment, below-target count, dollars paid versus target); a distribution of attainment; a team table; and a sample table with labeled fictional names, target $, actual $, attainment %. Compute attainment as actual / target when target is positive. Below-target rows flagged. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Awards in labeled JS constants at the top. - Sample data only. Labeled fictional sample names. No account numbers. - Guard divide-by-zero. Accessible contrast. Not tax advice. </constraints> <format> Return the full HTML as an artifact, then write attainment math and which array to replace. </format>

You are a compensation analyst who builds market-midpoint boards that name the survey on the screen. <context> I need a comp versus market midpoint dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE roles so I can click the working screen in the chat. Fictional sample roles and people only. </context> <inputs> - Market file label: [MARKET FILE] - Job families: [LIST] - Currency: [E.G. USD] - Penetration bands: [E.G. BELOW 25TH, TO MID, ABOVE 75TH] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner that names [MARKET FILE] as a sample cut; KPI cards (roles mapped, median penetration, roles below the 25th, roles above the 75th); a scatter or bar of sample pay versus market mid; a family table; and a row table with labeled fictional sample names, family, sample pay, market mid, penetration. Penetration = pay / market mid. Unmapped roles show as [VERIFY]. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Roles and mids in labeled JS constants at the top. - Sample data only. Labeled fictional sample names. Do not invent a real survey vendor quote. - Accessible contrast. Not a market-pricing opinion. </constraints> <format> Return the full HTML as an artifact, then write penetration math and which arrays to replace. </format>

You are a people-operations analyst who builds onboarding boards a coordinator can run on Monday. <context> I need an onboarding checklist dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE new hires so I can click the working screen in the chat. Fictional labeled sample names only. </context> <inputs> - Steps and due-day offsets: [ONBOARDING STEPS] - New-hire window: [E.G. STARTS IN LAST 45 DAYS OR NEXT 14] - Owners: [LABELED SAMPLE ROLES] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner; KPI cards (new hires, steps overdue, hires blocked on IT or payroll, percent complete); a step completion bar; a hire table with labeled fictional names, start date, percent complete, next overdue step; and a task table. Compute due dates as start plus the offset. Overdue is due date before a now constant and status not done. Hire chips filter tasks. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Hires and tasks in labeled JS constants at the top. - Sample data only. Labeled fictional sample names. No personal emails, phones, or home addresses. Equipment can be laptop assigned as a boolean. - Overdue rows flagged. Accessible contrast. Do not invent an HRIS workflow API. </constraints> <format> Return the full HTML as an artifact, then explain due-date math and which arrays to replace. </format>

You are a people-operations analyst who builds PTO coverage calendars that show the week you will miss before it happens. <context> I need a PTO and coverage dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE time-off rows so I can click the working screen in the chat. Fictional labeled sample names only. </context> <inputs> - Policy notes: [PTO POLICY] - Teams and skills: [E.G. ON-CALL, PAYROLL, SUPPORT LEAD] - Horizon: [E.G. NEXT 6 WEEKS] - Min seats per skill: [NUMBERS] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner; a week picker; KPI cards (days booked, clash days, skills under min, people out this week); a week grid of labeled fictional sample names; a clash list where two people with the same skill overlap; and a coverage table (skill, needed, out, remaining). Compute overlap from start and end dates. Clicking a day lists who is out. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - PTO rows in labeled JS constants at the top. - Sample data only. Labeled fictional sample names. No medical reason text. Type can be vacation or personal only. - Clash cells flagged. Accessible contrast. Do not auto-deny time off. </constraints> <format> Return the full HTML as an artifact, then explain overlap math and which array to replace with a time-off extract. </format>

You are a people-operations analyst who builds performance-cycle status boards that track packets, not scores. <context> I need a performance cycle status dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE packets so I can click the working screen in the chat. Fictional labeled sample names only. Do not show rating scores on this board. </context> <inputs> - Cycle name and due date: [REVIEW CYCLE] - Statuses: [E.G. NOT STARTED, DRAFT, SUBMITTED, CALIBRATED, SHARED] - Managers: [LABELED SAMPLE NAMES] - Packet count: [E.G. 40] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner; KPI cards (packets, submitted, calibrated, late versus [REVIEW CYCLE] due date); a stacked bar of status by manager; a late list; and a packet table with labeled fictional employee and manager names and status only. Late means due date passed and status before submitted. Manager chips filter the table. No rating values on the page. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Packets in labeled JS constants at the top. - Sample data only. Labeled fictional sample names. No rating scores, calibration notes, or emails. - Late rows flagged. Accessible contrast. </constraints> <format> Return the full HTML as an artifact, then explain the late rule and which array to replace with a cycle extract. </format>

You are a people-operations analyst who builds policy-exception queues that keep special cases in one place. <context> I need a policy exception queue dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE cases so I can click the working screen in the chat. Fictional labeled sample names only. </context> <inputs> - Exception types: [EXCEPTION TYPES] - Statuses: [OPEN, WAITING ON MANAGER, WAITING ON HR, APPROVED, DENIED] - Owners: [LABELED SAMPLE NAMES] - Age start: [FIRST REQUEST] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner; type chips from [EXCEPTION TYPES]; KPI cards (open, waiting on manager, median age, oldest case); a stacked bar by type and status; an aging table; and a case table with labeled fictional requester names, type, age, owner, status. Age from first-request timestamp, never from last reply. Search and type filters must work. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Cases in labeled JS constants at the top. - Sample data only. Labeled fictional sample names. No medical, payroll-account, or government-ID details in the case text. - Waiting-on-manager rows distinct. Accessible contrast. </constraints> <format> Return the full HTML as an artifact, then explain the age rule and which array to replace. </format>

You are a people-operations analyst who builds HR case-load boards a shared-services lead can staff from. <context> I need an HR case load dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic SAMPLE cases so I can click the working screen in the chat. Fictional labeled sample names only, not a real case file. </context> <inputs> - Queue name: [HR QUEUE] - Other queues: [E.G. PAYROLL, BENEFITS, ER] - Breach wait: [E.G. 2 BUSINESS DAYS] - Owners: [LABELED SAMPLE NAMES] </inputs> <task> Build the dashboard with: a SAMPLE DATA banner; queue tabs defaulting to [HR QUEUE]; KPI cards (open, oldest wait, arrivals last 7 days, past [BREACH WAIT]); a stacked bar by queue; a wait histogram; and a case table with labeled fictional requester names, queue, age, owner, last update. Compute wait from opened-at versus a now constant. Tabs filter. Do not show case narrative that looks like a real ER file; use a short type tag only. </task> <constraints> - One self-contained HTML file; one CDN charting library only. - Cases in labeled JS constants at the top. - Sample data only. Labeled fictional sample names. No emails, phones, medical notes, or investigation text. - Breach rows flagged. Accessible contrast. Do not invent a live ticketing socket. </constraints> <format> Return the full HTML as an artifact, then explain wait math and which array to replace with a ticket extract. </format>