// slides-6.jsx — Workflow detail slides (full-bleed embeds of the standalone
// workflow pages). Each is a self-contained 1280×720 HTML card scaled 1.5× to
// fill the 1920×1080 stage exactly.
// Globals used: Slide.
function WorkflowSlide({ src, label }) {
return (
);
}
function S_Workflow1({ num, total }) {
const steps = [
{ n: '1', t: 'Find the PDF', s: 'Grabs the newest Employee_Labor_Detail PDF in the input folder.' },
{ n: '2', t: 'Extract', s: 'pdfplumber pulls the pay-period dates and every Location 3 / GL 66000 line.' },
{ n: '3', t: 'Match names', s: 'Exact-matches each name to Column B and finds the right date column.' },
{ n: '4', t: 'Write cells', s: 'Fills hours, dollars & PTO across five sections — leaves formula cells alone.' },
{ n: '5', t: 'Save', s: 'Writes the workbook to SharePoint and prompts to delete the PDF.' }];
return (
Reads the payroll PDF and writes Location 3 labor data into the workbook — the same five fixed steps, the same way, every time. No judgment, no memory.
);
}
function S_Workflow1b({ num, total }) {
const breaks = [
{ t: "Name doesn't match", s: '"Finnegan, D." vs. "Finnegan, David" → silently dumped into "All Other."' },
{ t: 'New employee', s: 'No row in Column B → their hours vanish into the catch-all.' },
{ t: 'PDF format changes', s: 'iSolved → Paylocity tweak → the regex returns zero rows.' },
{ t: 'Excel is open', s: 'File is locked → the save throws and the run dies.' }];
return (
It does exactly what it was told — and nothing more. The moment reality drifts from the rules, it fails silently or stops cold.
→
So a human has to step in.
);
}
function S_Workflow2({ num, total }) {
const nodes = [
{ n: '1', t: 'Run the Python script', s: 'Claude runs the exact same deterministic script as the engine.', from: '← Workflow 1 lives here', hi: true },
{ n: '2', t: 'Hit a new edge case', s: 'A new employee, a renamed GL code, a different PDF layout.' },
{ n: '3', t: 'Diagnose & fix', s: 'Reads the error, resolves it for this run, gets the report out.' },
{ n: '4', t: 'Write the fix back', s: 'Patches extract_payroll.py and logs it in the skill\'s failures table.' }];
return (
The same script — now wrapped in judgment and memory. Claude runs the report from plain language, handles what the script can't, and writes every lesson back into the code so it never has to learn it twice.
{nodes.map((nd, i) =>
{nd.n}
{nd.t}
{nd.s}
{nd.from &&
{nd.from}
}
{i < nodes.length - 1 &&
→
}
)}
↻
Next run is smarter. The edge case that used to break the script is handled before it happens — and the system hardens with every run.
{[
{ label: 'Build time', value: '8 hrs' },
{ label: 'Time saved', value: '30 min / mo' },
{ label: 'ROI', value: '~1.5 yrs', hi: true }].
map((m) =>
)}
…worth every minute.
);
}
function S_Workflow3({ num, total }) {
const steps = [
{ n: '1', t: 'Discovers', s: 'At session start, Claude reads only each skill\'s name + description — cheap to keep dozens on hand.' },
{ n: '2', t: 'Triggers', s: 'You say "run production labor." It matches the description, so Claude loads the full SKILL.md into context.' },
{ n: '3', t: 'Follows', s: 'Claude works the steps as written — running the bundled script, applying judgment, checking the output.' },
{ n: '4', t: 'Improves', s: 'When it learns something new, it writes the lesson back into the SKILL.md — so the next run already knows it.', hi: true }];
const Mono = ({ children, color }) =>
{children};
return (
SKILL.md
A skill is just a folder with a Markdown file — SKILL.md — that teaches Claude one job. Plain-English instructions on top, the deterministic script bundled alongside. If you can write a memo, you can write a skill.
{/* SKILL.md file card */}
What's inside
production-labor / SKILL.md
---
name: production-labor
description: Run when
asked to "run production labor."
---
## Steps
1. Run extract_payroll.py
2. Reconcile any name mismatch
3. Validate totals vs. last period
# + the script, references, notes
{/* How Claude reads it */}
{badge}
{headline}
{body}
;
return (
Think of it as a digital bridge between your systems.
{/* Bridge diagram */}
{/* Power + risk */}
An incredibly powerful tool.
Not without risk.
More on that, next →
);
}
Object.assign(window, { S_WhatIsAPI });
// ─── The list of APIs we call ────────────────────────────────────────────
function S_APIList({ num, total }) {
const apis = [
{ name: 'Toast', sub: 'POS — sales & labor hours by store', dot: C.peach },
{ name: 'QuickBooks', sub: 'Accounting & journal entries', dot: C.coral },
{ name: 'Bill.com', sub: 'Accounts payable & payments', dot: C.powder },
{ name: 'Database', sub: 'Supabase — our system of record', dot: C.aqua },
{ name: 'SharePoint', sub: 'Workbooks & shared file storage', dot: C.butter },
{ name: 'Outlook', sub: 'Sending reports, alerts & email', dot: C.pink },
{ name: 'Weather', sub: 'Daily forecast — ice cream tracks the weather', dot: C.teal },
];
return (
Every place the workers can reach to grab data or push results — on their own, without me in the middle.
);
}
Object.assign(window, { S_APIList });
// ─── The key to your front door (image beat) ─────────────────────────────
function S_GreatPower({ num, total }) {
return (
Not without risk.
);
}
// ─── Not without risk — the risk list ────────────────────────────────────
function S_APIRisks({ num, total }) {
const risks = [
{ t: "It's standing access", s: 'An API key is always-on access to your data — not a one-time login you can walk away from.' },
{ t: 'Scope it tightly', s: 'Give each key the least it needs — read-only where you can, one system at a time.' },
{ t: 'Store it safely', s: 'Never in the code, never in a chat. Keys live in a secrets manager, not a spreadsheet.' },
{ t: 'Know the blast radius', s: 'Know exactly what each key can reach — and what happens the day one leaks.' },
];
return (
An API is the key to your front door.} />
Inside that front door is all your company data. Every key you hand out is another way in — so I treat them that way.
);
}
Object.assign(window, { S_GreatPower, S_APIRisks }); 