Case study · Web tool
The department rota
From a spreadsheet to an online tool shared by the whole team: absences linked to emails, freed rooms and stand-ins, tested delivery, publication in four clicks. The real journey, difficulties included.
Idea
What problem, in one sentence?
State the problem in one sentence
"The rota lives in a spreadsheet that few people know how to edit; every absence triggers a chain of emails and echocardiography rooms stay empty." Until the problem fits in one sentence, nothing gets coded.
DifficultyWanting to solve everything at once (rota, absences, software access, emails).
SolutionList the needs, then pick the first one: a shared rota that the whole team sees up to date.
!Start with the tool, not the automation: emails and stand-ins come later.
Decide what it will be
A rota is neither a skill nor a simple artifact: it is a standalone web tool, used by people who do not have Claude. Claude builds it, tests it and delivers it; it is published outside Claude.
!A Claude artifact is only visible to the people it is shared with: for a whole team, a published site is more robust.
Concept
What will the tool be, and what will it do?
Write the specification before the code
Have Claude draft, from the existing spreadsheet: the staff and their category (senior physicians, fellows, junior doctors, residents), the activities, the half-day sessions, who edits what, and the list of open questions.
What to tell Claude“Here is our rota spreadsheet and the list of staff. Write the specification for a rota tool as a single web page: standard rota, one tab per activity, month view, absences. List anything ambiguous before coding anything.”
DifficultyAcronyms and columns understood by only one person.
SolutionA "decisions made / pending" block: nothing is built until ambiguities are resolved.
Sketch the tabs
A Global tab for the standard rota; one tab per activity (Echocardiography by room and half-day, Clinic, Stress testing, MRI, On-call, Staff meetings, Faculty, Session sheets); an Absences tab; a Month view showing everyone.
!The standard rota must never be changed by a one-off assignment: the weeks are derived from it.
Choose the technical architecture
A single HTML file (nothing to install), a real-time shared database so everyone sees the same data, a team password, and publication through a GitHub repository linked to a static host.
!The team password is never written in the published file or in any circulated document.
Build
What to ask Claude, in what order?
Build the first version
In Cowork or Claude Code, on your computer: Claude writes the file, you open it in the browser, you correct it through small requests. Each delivery carries a version number shown in the title.
What to tell Claude“Build version 1 of the rota from the validated specification. A single HTML file, Global and Echocardiography tabs first. Show the version number in the page title.”
DifficultyThe preview did not display, or was not up to date, on the computer.
SolutionDeliver two separate files: a local preview embedding today's state so it can be seen straight away, and the file to publish, with no data.
Connect the shared database
Real-time sync, drag-and-drop of people into slots, editing rights protected by the password.
DifficultyOld or "random" names appeared on some computers.
SolutionThe published file contained a frozen copy of data from an old export. It was removed, and a red banner now flags any computer that is not connected.
DifficultyThe password window, closed with "Later", never came back.
SolutionA permanent clickable banner as long as the computer is not connected.
!Never embed real data in the published file.
!Test on a "fresh" computer (private browsing), not just your own.
Link absences and emails
One button generates the monthly absence email; another imports replies in the format "NAME: dates" and applies them across all activities. Unknown names are rejected, not guessed.
What to tell Claude“Add to the Absences tab a button that generates the monthly absence email, and an import from an email in the format "NAME: dates" that applies the absences to the activity tabs. Reject unknown names.”
DifficultyAbsences entered in an old format remained invisible.
SolutionList them and propose a conversion, changing nothing without approval.
DifficultyThe month view showed only part of the team.
SolutionThe month view reads the full list of staff.
Freed rooms and stand-ins
Every slot held by an absent person is marked "room freed?". A people × half-days table defines stand-ins; only available stand-ins are proposed, for that week only.
DifficultyA stand-in mentioned was not yet on the staff list (arriving soon).
SolutionAsk for confirmation before adding them; never guess an identity.
!A stand-in assignment never touches the standard rota.
Test
How do you prove it works?
Automatic triple test
Claude drives a browser: 1) no script errors, all modules loaded, with and without data; 2) the key views (full month view, absences visible); 3) real actions (importing an email, drag-and-drop, assigning a stand-in).
DifficultyDropping a person onto an occupied slot swapped the two people and could create a duplicate.
SolutionAction added to the triple test for every version; fix decided separately.
!A test that passes on your computer proves nothing for others: test with and without data.
Double check of half-days and names
Compare the standard rota with each activity tab and list the discrepancies (someone scheduled for echocardiography in the standard rota but missing from the tab). Check names and identifiers against the directory. Nothing is corrected without approval.
DifficultyA misspelt identifier in one tab prevented a person from being displayed.
SolutionSystematic identifier check at every version.
DifficultyContact details that could not be found (secretariat, activity mailbox).
SolutionSearch the directory, then the email archive; if nothing, ask rather than guess.
Go live
How to deliver, publish and sustain it?
Always deliver the same four things
1) the local preview; 2) the file to publish, already renamed index.html in an _A_PUBLIER_vXX folder; 3) the archived online source; 4) the emails drafted in the conversation.
DifficultyThe publishing procedure was unclear.
SolutionRename the file in advance and describe each click, along with what you should see at the end.
Publish in four clicks
Open the rota's GitHub repository; "Add file" then "Upload files"; drag in index.html (it replaces the old one, which is intended); "Commit changes". A minute later: Ctrl + F5, check the version number in the title and the new buttons.
!Publish only the latest version: each version includes the previous ones.
Announce and support
A short email to the secretariat and the activity mailbox, others in copy: what changes, how to report an absence, what to do when the "not connected" banner appears. Drafted in the conversation, sent by you.
!The AI prepares the emails; it never sends them.
Turn it into a skill
Compress the whole discussion into an orchestrator skill called "rota": architecture, known bugs, delivery procedure, triple test, double check, link with the directory. The next conversation starts from there, not from scratch.
What to tell Claude“Summarise this whole discussion into an orchestrator skill called "rota": architecture, bugs encountered and fixes, delivery procedure, triple test, double check of half-days and names, publishing procedure. Present it as a proposal for me to validate.”
!A skill is validated before it is installed; it is reviewed at every major version.