50 Claude Prompts That Build Internal Tools

You are a senior front-end engineer building sales tooling. <context> I run a sales team and want a pipeline CRM I can preview as an artifact to manage deals in one view. </context> <inputs> - Pipeline stages: [E.G. LEAD, QUALIFIED, PROPOSAL, CLOSED] - Deal fields: [COMPANY, VALUE, OWNER, CLOSE DATE] - Team: [REP NAMES] </inputs> <task> Build a sales pipeline CRM: a kanban board with a column per stage, deal cards (company, value, owner, days-in-stage), drag-or-click to move stages, a header with total pipeline value and weighted forecast, and an owner filter. Seed 16 realistic deals across stages. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for moving cards, totals, and filtering. - Mobile-first, accessible contrast, semantic HTML, real company names (no lorem ipsum). - Stale deals (long days-in-stage) are visually flagged. </constraints> <format> Return the full HTML in an artifact, then list the stages, forecast weighting, and assumptions. </format>

You are a senior front-end engineer building procurement relationship tools. <context> I manage suppliers and want a vendor CRM I can preview as an artifact to track relationships and contracts. </context> <inputs> - Vendor fields: [NAME, CATEGORY, CONTACT, SPEND, RENEWAL DATE] - Relationship status: [ACTIVE/AT-RISK/CHURNED] - Categories: [E.G. SOFTWARE, LOGISTICS] </inputs> <task> Build a vendor CRM: a searchable vendor table with status badges and annual spend, a detail drawer with contacts, contract terms, and an interaction-notes timeline, renewal-soon flags, and summary cards for total spend and upcoming renewals. Seed 15 realistic vendors. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for search, the drawer, and renewal flags. - Mobile-first, accessible contrast, semantic table markup, real vendor names (no lorem ipsum). - Vendors renewing within 60 days are surfaced prominently. </constraints> <format> Return the full HTML in an artifact, then list the fields and renewal logic you used. </format>

You are a senior front-end engineer building recruiting tools. <context> I run hiring and want an applicant tracker I can preview as an artifact to manage candidates through stages. </context> <inputs> - Roles open: [JOB TITLES] - Pipeline stages: [APPLIED, SCREEN, INTERVIEW, OFFER, HIRED] - Candidate fields: [NAME, ROLE, SOURCE, RATING] </inputs> <task> Build a candidate tracker: a kanban board by stage with candidate cards (name, role, rating, days-since-applied), move-stage actions, a role filter, a detail drawer with notes and interview scorecards, and summary cards for active candidates and offers out. Seed 16 realistic candidates. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for moving cards, filtering, and the drawer. - Mobile-first, accessible contrast, semantic HTML, real names and roles (no lorem ipsum). - Candidates stalled in a stage too long are flagged. </constraints> <format> Return the full HTML in an artifact, then list the stages and flagging logic you used. </format>

You are a senior front-end engineer building partnerships tools. <context> I manage partners and affiliates and want a tracker I can preview as an artifact to monitor performance and payouts. </context> <inputs> - Partner types: [AFFILIATE/RESELLER/AGENCY] - Metrics: [REFERRALS, REVENUE, COMMISSION, STATUS] - Payout terms: [E.G. % OF REVENUE] </inputs> <task> Build a partner tracker: a sortable table with referrals, revenue, owed commission, and tier badges; a detail drawer with the referral history and payout status; tier and status filters; and summary cards for total partner revenue and commission owed. Seed 14 realistic partners. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for sorting, filtering, and the drawer. - Mobile-first, accessible contrast, semantic table markup, real partner names (no lorem ipsum). - Top-performing partners are visually highlighted. </constraints> <format> Return the full HTML in an artifact, then list the metrics and commission logic you used. </format>

You are a senior front-end engineer building customer-success tooling. <context> I run customer success and want an account health tracker I can preview as an artifact to spot churn risk early. </context> <inputs> - Account fields: [COMPANY, PLAN, MRR, CSM, RENEWAL DATE] - Health signals: [USAGE, SUPPORT TICKETS, NPS] - Risk bands: [HEALTHY/WATCH/AT-RISK] </inputs> <task> Build a CS health tracker: an account table with a computed health score and risk badge, a detail drawer showing usage trend, open tickets, and last touchpoint, renewal-soon flags, CSM and risk filters, and summary cards for at-risk MRR and renewals this quarter. Seed 15 realistic accounts. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for scoring, filtering, and the drawer. - Mobile-first, accessible contrast, semantic table markup, real company names (no lorem ipsum). - At-risk accounts with near renewals are surfaced at the top. </constraints> <format> Return the full HTML in an artifact, then list the health-score inputs and risk logic. </format>

You are a senior front-end engineer building marketing-operations tools. <context> I manage inbound leads and want a capture-and-qualification tool I can preview as an artifact to route leads fast. </context> <inputs> - Lead fields: [NAME, COMPANY, SOURCE, BUDGET, ROLE] - Scoring criteria: [E.G. COMPANY SIZE, INTENT, FIT] - Routing rules: [E.G. HOT → SALES, COLD → NURTURE] </inputs> <task> Build a lead qualification tool: an intake form that adds a lead to a scored list, an auto-computed lead score with a hot/warm/cold badge, a routing label based on score, source and status filters, and summary cards for new leads and hot-lead count. Seed 14 realistic leads plus a working add-lead form. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for the form, scoring, and filtering. - Mobile-first, accessible contrast, semantic form markup with labels, real company names (no lorem ipsum). - Hot leads are visually prioritized at the top. </constraints> <format> Return the full HTML in an artifact, then list the scoring criteria and routing rules you used. </format>

You are a senior front-end engineer and data designer building sales-forecasting tools. <context> I need a deal forecast tracker I can preview as an artifact to project the quarter for my sales team. </context> <inputs> - Quota / target: [PERIOD TARGET] - Deal fields: [NAME, VALUE, STAGE, PROBABILITY, CLOSE DATE] - Forecast categories: [COMMIT/BEST-CASE/PIPELINE] </inputs> <task> Build a forecast tracker: a summary showing target, weighted forecast, and gap-to-quota with a progress bar; a deal table with category badges and editable probability; a forecast-category breakdown; and filters by rep and category. Seed 16 realistic deals. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for recalculating the forecast on edits. - Mobile-first, accessible contrast, semantic table markup, real deal names (no lorem ipsum). - The gap-to-quota updates live as probabilities change. </constraints> <format> Return the full HTML in an artifact, then list the forecast categories and calculation logic. </format>

You are a senior front-end engineer building founder tools. <context> I'm raising a round and want an investor CRM I can preview as an artifact to run the raise like a pipeline. </context> <inputs> - Raise stages: [RESEARCH, INTRO, MEETING, DILIGENCE, TERM SHEET] - Investor fields: [FIRM, CHECK SIZE, LEAD/FOLLOW, OWNER] - Target raise: [AMOUNT] </inputs> <task> Build an investor CRM: a kanban by raise stage with investor cards (firm, potential check, warmth), move-stage actions, a header showing committed vs target with a progress bar, a detail drawer with contact notes and next steps, and summary cards for committed amount and active conversations. Seed 16 realistic investors. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for moving cards, totals, and the drawer. - Mobile-first, accessible contrast, semantic HTML, real-looking firm names (no lorem ipsum). - Stalled conversations are flagged to follow up. </constraints> <format> Return the full HTML in an artifact, then list the stages and progress logic you used. </format>

You are a senior front-end engineer building asset-management tools. <context> I track physical assets (or properties) and want a tracker I can preview as an artifact to know status and value. </context> <inputs> - Asset type: [PROPERTIES/EQUIPMENT/VEHICLES] - Fields: [NAME, LOCATION, STATUS, VALUE, ASSIGNED TO] - Status states: [AVAILABLE/IN-USE/MAINTENANCE] </inputs> <task> Build an asset tracker: a searchable table with status badges, assigned owner, and value; a detail drawer with maintenance history and next service date; location and status filters; and summary cards for total asset value and items in maintenance. Seed 16 realistic assets. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for search, filtering, and the drawer. - Mobile-first, accessible contrast, semantic table markup, real asset names (no lorem ipsum). - Assets overdue for maintenance are clearly flagged. </constraints> <format> Return the full HTML in an artifact, then list the fields and maintenance logic you used. </format>

You are a senior front-end engineer building business-development tools. <context> I run outreach and want a follow-up tracker I can preview as an artifact so no contact slips through the cracks. </context> <inputs> - Contact fields: [NAME, COMPANY, CHANNEL, LAST CONTACT, NEXT STEP] - Cadence rules: [E.G. FOLLOW UP EVERY 5 DAYS] - Status: [NEW/CONTACTED/REPLIED/CLOSED] </inputs> <task> Build an outreach tracker: a contact table with last-contact date, a computed due-for-follow-up badge, next-step notes, and status; a 'due today' filter; quick-log buttons to record a touch and reset the cadence; and summary cards for due-today and awaiting-reply counts. Seed 16 realistic contacts. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for cadence calc and logging. - Mobile-first, accessible contrast, semantic table markup, real names (no lorem ipsum). - Overdue follow-ups are visually prioritized. </constraints> <format> Return the full HTML in an artifact, then list the cadence rules and logging behavior you used. </format>

You are a senior front-end engineer building sales-enablement utilities. <context> I need a pricing and quote calculator I can preview as an artifact so my team gives consistent quotes. </context> <inputs> - Products / units: [ITEMS AND UNIT PRICES] - Modifiers: [E.G. VOLUME DISCOUNT, ADD-ONS, TAX] - Output needed: [QUOTE TOTAL, MARGIN] </inputs> <task> Build a quote calculator: input fields for quantity and options, live-updating line items, automatic discount and tax application, a clear total and margin readout, and a copy-quote-summary button. Seed sensible default values so it works on load. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for live calculation and copy. - Mobile-first, accessible contrast, semantic form markup with labels, real product names (no lorem ipsum). - All money values formatted with currency and two decimals. </constraints> <format> Return the full HTML in an artifact, then list the pricing rules and calculation logic you used. </format>

You are a senior front-end engineer building decision-support utilities. <context> I need an ROI calculator I can preview as an artifact to justify purchases or projects to stakeholders. </context> <inputs> - Costs: [UPFRONT AND RECURRING COSTS] - Benefits: [TIME SAVED, REVENUE, COST AVOIDED] - Time horizon: [MONTHS/YEARS] </inputs> <task> Build an ROI calculator: input fields for costs and benefits, computed net benefit, ROI %, and payback period, a simple inline-SVG cumulative-return chart over the time horizon, and a verdict banner (good/marginal/poor investment). Seed realistic defaults. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for live calculation and the chart. - Mobile-first, accessible contrast, semantic form markup with labels, real labels (no lorem ipsum). - Show the formulas used beneath the result for transparency. </constraints> <format> Return the full HTML in an artifact, then list the inputs and formulas you used. </format>

You are a senior front-end engineer building sales-compensation utilities. <context> I manage sales comp and want a commission calculator I can preview as an artifact so reps can see their earnings. </context> <inputs> - Commission structure: [E.G. TIERED RATES, ACCELERATORS] - Quota: [PERIOD QUOTA] - Deal inputs: [CLOSED AMOUNT, PRODUCT MIX] </inputs> <task> Build a commission calculator: inputs for closed revenue and attainment, a tiered-rate breakdown table, accelerator logic above quota, a clear total-payout readout, and a small attainment progress bar. Seed realistic defaults that demonstrate an accelerator kicking in. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for tier and accelerator calculation. - Mobile-first, accessible contrast, semantic form markup with labels, real plan terms (no lorem ipsum). - The breakdown shows exactly how each tier contributes to the total. </constraints> <format> Return the full HTML in an artifact, then list the tiers, accelerators, and formulas you used. </format>

You are a senior front-end engineer building founder finance utilities. <context> I'm a founder and want a runway calculator I can preview as an artifact to know how long our cash lasts. </context> <inputs> - Cash on hand: [BALANCE] - Monthly revenue and expenses: [INFLOWS, OUTFLOWS] - Growth assumptions: [REVENUE GROWTH %] </inputs> <task> Build a runway calculator: inputs for cash, revenue, expenses, and growth; computed monthly net burn and months-of-runway; a projected cash-balance line chart (inline SVG) until zero; and a warning banner when runway drops below a safe threshold. Seed realistic startup defaults. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for projection and the chart. - Mobile-first, accessible contrast, semantic form markup with labels, real labels (no lorem ipsum). - The runway figure recalculates live as inputs change. </constraints> <format> Return the full HTML in an artifact, then list the assumptions and projection logic you used. </format>

You are a senior front-end engineer building resource-planning utilities. <context> I plan team workload and want a capacity planner I can preview as an artifact to balance assignments. </context> <inputs> - Team members and weekly hours: [NAMES, AVAILABLE HOURS] - Projects / tasks and estimates: [WORK ITEMS, HOURS] - Planning period: [WEEK/SPRINT] </inputs> <task> Build a capacity planner: a per-person bar showing allocated vs available hours, an assignment table to allocate work, an over/under-capacity indicator per person, a team utilization summary, and a warning when anyone is over-allocated. Seed realistic people and tasks. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for allocation math and warnings. - Mobile-first, accessible contrast, semantic table markup, real names and tasks (no lorem ipsum). - Over-allocated people are visually flagged red. </constraints> <format> Return the full HTML in an artifact, then list the capacity logic and assumptions you used. </format>

You are a senior front-end engineer building finance utilities. <context> I want to audit our software subscriptions and need a cost auditor I can preview as an artifact to cut waste. </context> <inputs> - Subscriptions: [TOOL NAMES] - Per-tool fields: [SEATS, COST PER SEAT, BILLING CYCLE, OWNER, USAGE] - Goal: [E.G. FIND UNUSED SEATS] </inputs> <task> Build a subscription cost auditor: a table normalizing every tool to monthly cost, a utilization column with an underused flag, total monthly and annual spend, a potential-savings estimate from unused seats, and category and owner filters. Seed 14 realistic subscriptions. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for normalization, totals, and filtering. - Mobile-first, accessible contrast, semantic table markup, real tool names (no lorem ipsum). - Underused or duplicate tools are visually flagged. </constraints> <format> Return the full HTML in an artifact, then list the normalization and savings logic you used. </format>

You are a senior front-end engineer building pricing-strategy utilities. <context> I set prices and want a margin and break-even calculator I can preview as an artifact to price products confidently. </context> <inputs> - Costs: [UNIT COST, FIXED COSTS] - Price: [SELLING PRICE OR TARGET MARGIN] - Volume assumptions: [EXPECTED UNITS] </inputs> <task> Build a margin/break-even calculator: inputs for cost, price, and fixed costs; computed gross margin %, contribution per unit, and break-even units; an inline-SVG cost-vs-revenue break-even chart; and a target-margin solver that suggests the price for a desired margin. Seed realistic defaults. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for live calculation and the chart. - Mobile-first, accessible contrast, semantic form markup with labels, real labels (no lorem ipsum). - All results update live as inputs change. </constraints> <format> Return the full HTML in an artifact, then list the formulas and the solver logic you used. </format>

You are a senior front-end engineer building billing utilities. <context> I need an invoice generator I can preview as an artifact to create clean, printable invoices fast. </context> <inputs> - Business details: [NAME, ADDRESS, LOGO TEXT] - Client details: [NAME, ADDRESS] - Line items: [DESCRIPTION, QTY, RATE] </inputs> <task> Build an invoice generator: editable business and client blocks, an add/remove line-item table with auto-calculated line totals, subtotal, tax, and grand total, an invoice number and due date, and a print/PDF-friendly layout with a print button. Seed a realistic sample invoice. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for line items, totals, and printing. - Mobile-first on screen but clean on print (print CSS), accessible contrast, semantic markup, real sample copy (no lorem ipsum). - Totals recalculate as line items change. </constraints> <format> Return the full HTML in an artifact, then list the fields and calculation/print logic you used. </format>

You are a senior front-end engineer building internal utilities. <context> I need a quick conversion utility I can preview as an artifact for the units my team uses daily. </context> <inputs> - Conversion domains: [E.G. CURRENCY, WEIGHT, VOLUME, TIME] - Common pairs: [MOST-USED CONVERSIONS] - Default values: [STARTING RATES/UNITS] </inputs> <task> Build a conversion utility: a domain selector, two linked input fields that convert live in both directions, a unit dropdown per side, a small reference table of common conversions, and an editable rate field for currency. Seed sensible defaults so it works on load. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for bidirectional conversion. - Mobile-first, accessible contrast, semantic form markup with labels, real units (no lorem ipsum). - Currency rates are editable since they are not live. </constraints> <format> Return the full HTML in an artifact, then list the domains and conversion logic you used. </format>

You are a senior front-end engineer building services-pricing utilities. <context> I scope projects and want a cost estimator I can preview as an artifact to build quotes from roles and hours. </context> <inputs> - Roles and rates: [E.G. DESIGNER, DEV, PM HOURLY RATES] - Project phases: [E.G. DISCOVERY, BUILD, QA] - Modifiers: [CONTINGENCY %, RUSH FEE] </inputs> <task> Build a project cost estimator: a phase-by-role hours grid, auto-calculated cost per phase and total, a contingency and rush-fee toggle, a low/expected/high estimate range, and a copyable estimate summary. Seed a realistic sample project. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for the grid math and copy. - Mobile-first, accessible contrast, semantic table markup, real role and phase names (no lorem ipsum). - Totals and the range recalculate live as hours change. </constraints> <format> Return the full HTML in an artifact, then list the rates, phases, and range logic you used. </format>

You are a senior front-end engineer building HR operations tools. <context> I onboard new hires and want a checklist tool I can preview as an artifact to make every onboarding consistent. </context> <inputs> - Onboarding phases: [E.G. PRE-START, WEEK 1, MONTH 1] - Task owners: [IT, HR, MANAGER] - Common tasks: [ACCOUNTS, EQUIPMENT, TRAINING] </inputs> <task> Build an onboarding checklist tool: a new-hire selector, grouped checklist sections by phase with per-task owner and due-day, a live completion progress bar, an owner filter, and a summary of outstanding tasks per owner. Seed 2-3 sample new hires with realistic tasks. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for checklist state and progress. - Mobile-first, accessible contrast, semantic HTML, real task names (no lorem ipsum). - Overdue tasks (past due-day) are visually flagged. </constraints> <format> Return the full HTML in an artifact, then list the phases and ownership logic you used. </format>

You are a senior front-end engineer building workforce-scheduling tools. <context> I schedule a shift-based team and want a scheduling tool I can preview as an artifact to fill the week without gaps. </context> <inputs> - Staff and roles: [NAMES, ROLES] - Shifts: [TIMES AND REQUIRED HEADCOUNT] - Constraints: [MAX HOURS, AVAILABILITY] </inputs> <task> Build a shift scheduler: a week grid of days × shifts, click-to-assign staff to cells, a per-person weekly-hours tally, an unfilled-shift highlight, an over-max-hours warning, and a coverage summary. Seed a realistic partial schedule. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for assignment, tallies, and warnings. - Mobile-first, accessible contrast, semantic table markup, real names and shift labels (no lorem ipsum). - Unfilled required shifts and over-hours staff are clearly flagged. </constraints> <format> Return the full HTML in an artifact, then list the shift rules and constraint logic you used. </format>

You are a senior front-end engineer building performance-management tools. <context> I run goal-setting and want an OKR tracker I can preview as an artifact to keep the team aligned on outcomes. </context> <inputs> - Objectives: [TOP-LEVEL GOALS] - Key results per objective: [MEASURABLE TARGETS] - Owners and period: [WHO, QUARTER] </inputs> <task> Build an OKR tracker: objective cards each containing key results with a current/target value and a progress bar, an auto-rolled-up objective score, owner tags, an on-track / at-risk / off-track status per KR, and an overall company-progress summary. Seed realistic objectives and key results. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for progress roll-up and status. - Mobile-first, accessible contrast, semantic HTML, real objective text (no lorem ipsum). - At-risk and off-track key results are visually distinct. </constraints> <format> Return the full HTML in an artifact, then list the scoring roll-up and status thresholds you used. </format>

You are a senior front-end engineer building team-collaboration tools. <context> I run recurring meetings and want an agenda and action tracker I can preview as an artifact so decisions don't get lost. </context> <inputs> - Meeting type: [E.G. WEEKLY STANDUP, LEADERSHIP] - Agenda sections: [UPDATES, DECISIONS, BLOCKERS] - Action fields: [TASK, OWNER, DUE] </inputs> <task> Build a meeting tool: an editable agenda with timeboxes, a running notes area per section, an action-items table with owner, due date, and status, a carry-over view of open actions from prior meetings, and a copy-recap button. Seed a realistic meeting with a few open actions. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for action state and copy. - Mobile-first, accessible contrast, semantic HTML, real agenda and action text (no lorem ipsum). - Overdue open actions are visually flagged. </constraints> <format> Return the full HTML in an artifact, then list the sections and action-tracking logic you used. </format>

You are a senior front-end engineer building internal logistics tools. <context> I manage shared equipment and want a checkout system I can preview as an artifact to track who has what. </context> <inputs> - Equipment: [ITEM TYPES] - Fields: [ITEM, ASSIGNED TO, CHECKOUT DATE, DUE DATE] - Status: [AVAILABLE/CHECKED-OUT/OVERDUE] </inputs> <task> Build an equipment checkout system: an item table with status badges and current holder, a check-out form (item, person, due date) and a one-click return, an overdue highlight, an availability filter, and summary cards for items out and overdue. Seed 15 realistic items, some checked out. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for checkout/return state and the form. - Mobile-first, accessible contrast, semantic table markup, real item names (no lorem ipsum). - Overdue items are clearly flagged. </constraints> <format> Return the full HTML in an artifact, then list the fields and checkout/return logic you used. </format>

You are a senior front-end engineer building operations reliability tools. <context> I track operational incidents and want an issue log I can preview as an artifact to manage resolution and learnings. </context> <inputs> - Incident types: [E.G. OUTAGE, SAFETY, QUALITY] - Severity levels: [SEV1-SEV4] - Fields: [TITLE, OWNER, STATUS, OPENED, RESOLVED] </inputs> <task> Build an incident log: a table with severity and status badges, time-open duration, a detail drawer with the timeline and post-incident notes, severity and status filters, and summary cards for open incidents and average time-to-resolve. Seed 14 realistic incidents. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for filtering, duration, and the drawer. - Mobile-first, accessible contrast, semantic table markup, real incident titles (no lorem ipsum). - High-severity open incidents are surfaced at the top. </constraints> <format> Return the full HTML in an artifact, then list the severity scheme and resolution metrics you used. </format>

You are a senior front-end engineer building team-async tools. <context> I run a distributed team and want a standup board I can preview as an artifact to collect daily updates in one place. </context> <inputs> - Team members: [NAMES] - Update format: [YESTERDAY / TODAY / BLOCKERS] - Filters: [PERSON, BLOCKERS-ONLY] </inputs> <task> Build a standup board: a per-person update card with yesterday/today/blockers fields, an add-update form, a blockers-only filter, a visual blocker badge, and a summary of who has and hasn't posted today. Seed realistic updates for several teammates. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for the form, filtering, and posted-status. - Mobile-first, accessible contrast, semantic form markup with labels, real update text (no lorem ipsum). - Cards with blockers are visually surfaced. </constraints> <format> Return the full HTML in an artifact, then list the fields and filtering logic you used. </format>

You are a senior front-end engineer building people-management tools. <context> I run performance reviews and want a review tool I can preview as an artifact to make evaluations structured and fair. </context> <inputs> - Competencies: [E.G. EXECUTION, COLLABORATION, IMPACT] - Rating scale: [E.G. 1-5 OR LEVELS] - Review parts: [SELF, MANAGER, GOALS] </inputs> <task> Build a performance review tool: a competency-by-rating section with notes per competency, a goals-progress section, an auto-computed overall rating, a strengths/growth-areas summary, and a clean print-friendly review layout. Seed a realistic sample review. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for rating calculation; print CSS for export. - Mobile-first, accessible contrast, semantic form markup with labels, real competency text (no lorem ipsum). - The overall rating updates as competency ratings change. </constraints> <format> Return the full HTML in an artifact, then list the competencies and rating logic you used. </format>

You are a senior front-end engineer building internal knowledge tools. <context> I field repeat questions and want an internal knowledge base I can preview as an artifact so the team self-serves answers. </context> <inputs> - Topics: [E.G. HR, IT, EXPENSES, BENEFITS] - Sample questions: [COMMON QUESTIONS] - Audience: [WHO USES IT] </inputs> <task> Build an internal knowledge base: a search bar that filters articles live, category navigation, expandable question/answer accordions, a 'most viewed' section, and a clear empty-state for no results. Seed realistic categories and 12-15 Q&A entries with real answers. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for search and accordions. - Mobile-first, accessible contrast, semantic HTML with proper headings, real Q&A copy (no lorem ipsum). - Search matches both questions and answer text. </constraints> <format> Return the full HTML in an artifact, then list the categories and search behavior you used. </format>

You are a senior front-end engineer building workplace-operations tools. <context> I manage a hybrid office and want a desk booking tool I can preview as an artifact so people can reserve space. </context> <inputs> - Spaces: [DESKS, ROOMS, ZONES] - Booking window: [DAYS AHEAD] - Fields: [PERSON, SPACE, DATE, TIME] </inputs> <task> Build a desk booking tool: a date selector, a visual map or grid of spaces with available/booked states, a click-to-book flow with a confirmation, a my-bookings list with cancel, and a capacity summary for the selected day. Seed a realistic layout with some spaces already booked. </task> <constraints> - One self-contained, responsive HTML file; inline CSS; Google Fonts only; vanilla JS for booking state and the date selector. - Mobile-first, accessible contrast, semantic HTML, real space names (no lorem ipsum). - Booked spaces can't be double-booked and show who has them. </constraints> <format> Return the full HTML in an artifact, then list the spaces and booking rules you used. </format>