CIC Maker

How the whole system works

CIC Maker is a single web app that runs in your browser and reads & writes a folder on your own computer. There is no server, no sign-up, and nothing is uploaded.

Four ways the system can run

Why you can trust it

What it does

1. What CIC Maker is

CIC Maker is a free, open-source tool for building Cleaning Instruction Cards — the documents food manufacturers use to record how each piece of equipment gets cleaned. Chemicals, contact times, PPE, methods, photos, sign-off fields — all on one printable card per machine. It is designed to support BRC-aligned cleaning documentation; it does not by itself certify or guarantee compliance, which depends on your own procedures and audit.

The tool runs in any modern web browser. There is no signup, no login, and nothing is uploaded to a server. Made by DaVinci Enterprise Services. Free to use, free to share, the source code is open.

2. Three ways to use CIC Maker

A. Try it without setting anything up

Visit cicmaker.co.uk, click Use Without Folder, and start making cards straight away. Everything works — wizard, expert editor, PDF export, recommendations. Your cards are kept in the browser's own storage and do survive between sessions — but they live in that one browser only, and clearing your browser data deletes them. Connect a folder, or export cards as files, to keep them safely.

Good for: a quick look, a one-off card, a demo.

B. Connect a folder (recommended)

This is the way the tool is designed to be used. Download the starter pack from cicmaker.co.uk, unzip it somewhere safe (OneDrive is ideal), then open the site (or the desktop HTML — see below) and click Connect Folder. From then on the app saves your cards, images and settings into your folder. Connecting a folder uses the browser's File System Access API, which today is available in Chrome and Microsoft Edge on desktop — if your browser doesn't support it, you can still use Browser-only mode or the desktop HTML.

Good for: real day-to-day use.

C. Desktop HTML (offline)

The starter pack also includes CIC-MAKER.html — the app itself, packaged as a single HTML file. Double-click to open it in your browser, point it at the same folder, and you have the full app running offline. Same features as the web version, no internet needed. Plus one extra: AI Review (see section 10).

Good for: factories without reliable internet, or teams that want the AI Review feature.

3. Setting up your CIC-Maker folder

Six steps. Takes about three minutes.

1. Download the starter pack from cicmaker.co.uk. The file is called starter-pack.zip.
2. Unzip it to a folder you will not move or delete. OneDrive is the best choice — your data is automatically backed up, and you can open it from another device. Dropbox, Google Drive and network shares work too, as long as the folder shows up as a normal local folder your browser can write to.
3. Open CIC Maker. Either visit cicmaker.co.uk in Chrome or Edge, or double-click CIC-MAKER.html inside the folder you just unzipped.
4. Click "Connect Folder" on the welcome screen.
5. Pick the folder you just unzipped — the one called CIC-Maker.
6. The app loads with example data. Now you can edit anything to match your facility.

4. Inside the CIC-Maker folder

The folder is organised into numbered subfolders so it is easy to find things. Files that humans edit are in CSV format — open them in Excel, Numbers, or LibreOffice. Files the app manages are in JSON format — leave those alone unless you know what you're doing.

5. The desktop HTML (CIC-MAKER.html)

You don't need an internet connection to use CIC Maker. Inside your folder there's a file called CIC-MAKER.html — that's the entire app, packaged as a single HTML file. Double-click it and your default browser opens with CIC Maker running locally.

It's the same app that's online at cicmaker.co.uk, with two differences:

• It works fully offline. Every library it needs (QR codes, file export, the print engine) is bundled inside the file — nothing is fetched from the internet.
• AI Review is available (if you add your own Claude API key in Settings). On the web version this button stays hidden — see section 10.

The same folder works for both — connect CIC-MAKER.html to your CIC-Maker folder, then later open cicmaker.co.uk and connect it to the same folder. Both see the same data.

6. Auto-save & where your data lives

CIC Maker auto-saves as you type. Every change marks the card "dirty" and a second later it is saved. Two layers hold your work:

• Your browser's IndexedDB — the always-on local store for cards and photos. (Lightweight settings use the browser's local storage.)
• Your connected folder — when a folder is connected, each save also writes the card's JSON into 09_Exports/. (The one-file master library in 11_Library/ is refreshed on an explicit Save or delete, not on the background autosave.) With no folder connected, saves stay in the browser only.

When auto-save fires, a small "Saving…" indicator appears, changing to "Saved" when the write completes. Crucially, the app only ever shows "Saved" once the write has genuinely succeeded — if a save fails it says so, and never falsely reassures you.

Auto-save also fires every 30 seconds while a card is open, when you switch tabs or windows, when you close the tab, and on every Next / Previous in the Wizard. The Save button still works any time for an explicit save with a confirmation. Auto-save and manual save use the same write path, so they cannot conflict.

7. The Wizard (mobile-friendly)

The Wizard walks you through one card, one screen at a time. It's the easiest way to create a card on a phone or tablet — for example, the hygiene manager standing at the equipment with a phone in hand. It shows your text as clean plain text — anything you formatted with bold or highlight in the desktop editor appears here as plain text (the formatting markers are stripped, so you never see raw codes).

Desktop and phone run the same card through slightly different step orders. Both auto-save a draft on every Next / Previous, so you can stop mid-card and pick up later.

Desktop wizard — 11 steps

1. Doc Info — reference, revision, date issued, equipment name, area, status (Draft / Authorised), QR code URL, risk assessment reference.
2. Responsibilities — who cleans it, who inspects it, who signs it off.
3. Precautions — lockout, isolation, safety steps before opening any guard.
4. PPE & Tools — tap the pictograms you need (overalls, gloves, boots, visor, brushes, hoses, scrapers).
5. Chemicals — add one or more, each with code, use, rate, contact time, and any tool overrides.
6. Cleaning Steps — the step-by-step instructions, one method tab per cleaning regime (the four names from your methods.csv). Steps can carry their own photos.
7. Inspection — key inspection points: what the supervisor checks to confirm clean.
8. Photos — add photos from camera or file, with numbered hotspot markers you can drag and caption.
9. Panels & MM — removable parts and panels.
10. Doc Control — Created By, Date Created, Authorised By, Date Authorised.
11. Review & Save.

Phone wizard — 11 steps

The same card, tuned for a phone at the machine. The order differs — Chemicals comes before PPE — and the run ends with a dedicated SOPs step instead of Doc Control:

1. Equipment Info
2. Responsibilities
3. Precautions
4. Chemicals
5. PPE & Safety
6. Cleaning Steps (each step can carry its own photos)
7. Inspection Points
8. Photos
9. Electrical Panels
10. Additional SOPs (up to six linked SOPs, each printed as a QR code)
11. Review & Save

8. The Expert Editor (desktop)

For advanced use on a larger screen, the Expert Editor shows every field on a single scrollable page. No step-by-step — just everything visible, edit anything, save when ready.

Sections in the Expert Editor:

• Header — reference, equipment name, area, status, revision, date issued.
• Precautions, Other Information & method steps — support light formatting: Bold and Highlight (a colour you pick), plus line breaks. That's the full set — there is no italic or bullet-list formatting. Formatting is stored as simple markers and shown as clean text everywhere it's read.
• Chemicals — a table of chemical rows: code, use, rate, contact time, and optional tool annotations.
• Method tabs — four tabs named from methods.csv, each with its own step list and chemicals.
• Photos with hotspots — upload, click the image to drop a numbered marker, caption each marker, and drag any placed marker to nudge it.
• KIP list — Key Inspection Points checked at sign-off.
• Additional SOPs — up to six linked SOPs (see the callout below).
• Custom fields — extra fields you define in Settings; each can hold text, or an image with a caption.
• PDF preview — see the final printable card before saving.

9. Saving, exporting & sharing

Saving happens two ways: automatic (as you type, see section 6) and manual (the Save button). When a folder is connected, both write one JSON file per card into 09_Exports/, named after the card — saving again overwrites that same file rather than piling up dated copies (plus a single .json.bak safety copy that rolls over). With no folder connected, saves stay in the browser. The file name matches the card's 10_Images/ folder and stays fixed even if you rename the card's reference.

Sharing one card. Click Export HTML to get a single self-contained file — one .html per card (a reference and an equipment/machine name are required first, so every export is identifiable). When a folder is connected the file lands in 09_Exports/ and the app asks before overwriting; otherwise it downloads. The recipient opens it in any browser and sees the same card, with built-in controls to print / save as PDF, a short "how to edit" note, and tap-to-zoom photos.

Exporting many cards at once. You can export selected cards — or your whole library — as a single ZIP of individual HTML files, ready to archive or hand over in one go. Each file inside re-imports cleanly.

Re-opening a saved card. Import CIC opens an exported .html; Import JSON opens a saved .json. Either way the card returns complete — every field, photo, custom label and section restored. Re-importing the same card updates it in place; if the copy you import is older than what's already there, the app keeps the newer version rather than overwriting your edits. For Import JSON, keep your folder connected so photos load from 10_Images/.

Moving your whole library. Everything you explicitly Save is mirrored into 11_Library/CIC-Library.json (refreshed on Save and delete — not on the background autosave). To move your library, copy that file and the 10_Images/ folder across, then connect the folder (cards appear automatically) or click Import Library. Cards merge by newest version, so importing never overwrites newer edits and a deleted card stays deleted.

10. AI Review (desktop only)

AI Review is available in the desktop HTML (CIC-MAKER.html). It compares your draft against similar past cards from the recommendation database and proposes per-section edits.

What you see: your original section on the left, the suggestion on the right, with Accept (replace your text) or Skip (keep yours) per section. You stay in control; the AI never overwrites silently.

At the bottom of the modal:

• ✕ Cancel — close, change nothing.
• ↻ Regenerate with comment — type a refinement ("shorter precautions", "mention guards") and re-run.
• ✓ Accept all changes — apply every suggestion at once.

Chemicals are referenced by name in the AI's output rather than supplier codes, so operators can read the recommendations without a lookup.

What it needs & what leaves your computer. AI Review needs your own Claude API key from Anthropic (console.anthropic.com). You paste it into Settings; it is stored only in your browser's local storage and is never sent to us. The card's text is sent directly from your browser to Anthropic's API only when you run Review or Regenerate — pressing Accept just applies a suggestion locally and sends nothing. This is the one and only time any card content leaves your computer, and only at your request.

11. Customising your colour code

The cleaning-utensil colour-coding chart prints at the bottom of every card. The default chart is colour-coding-aligned (Red for RTE floors, White for food contact, Blue for low-risk equipment, etc.) but every facility has its own variation.

To customise: open 06_Colour-Code/colour-code.csv in Excel, Numbers, or LibreOffice. Each row is one colour, with columns name, hex, description, labelColour, pattern, border.

• name — the label that prints under the swatch (e.g. "Red", "White").
• hex — the swatch colour as a hex code (e.g. #dc2626).
• description — what the colour is used for (e.g. "RTE & RTC floors").
• labelColour — optional. The text colour for the bold label. Leave empty to fall back to hex.
• pattern — optional. A CSS background string for striped or tape-pattern swatches (e.g. a repeating gradient).
• border — optional. A CSS border for pale swatches that would otherwise be invisible — e.g. 1.5px solid #d1d5db for a white tile.

Save the file as CSV (UTF-8), reload CIC Maker, and the next card you generate uses the new chart. (For safety, the app accepts only valid colour, gradient and border values here and ignores anything else.)

12. Customising areas, chemicals, supervisors

Same pattern as the colour code — edit the CSV in a spreadsheet, save, reload. These files are yours: the app reads them and never overwrites them.

• Areas: 02_Areas/areas.csv. Columns site and area; one row per area. Each shows in the dropdown as "Site — Area". A row with a site but no area renders as a standalone site label.
• Chemicals: 04_Chemicals/chemicals.csv. Columns include code, name, hazardClass, defaultPPE, defaultControls, typicalUsage, sdsUrl. Comma-separated lists go inside quotes: "Gloves, Apron, Boots". SDS link: paste a Safety Data Sheet web link (must start with http:// or https://) into sdsUrl and that chemical's name becomes a clickable link on every exported card — leave it blank and the name stays plain text.
• Supervisors: 03_Supervisors/supervisors.csv. One column: name. An empty file means the supervisor field stays free text.
• Method names: 05_Methods/methods.csv. Exactly four rows — the four method tab names.
• Operator name & brand: change these inside CIC Maker's Settings panel; the app writes 01_Settings/settings.json for you. If you hand-edit it, keep the JSON valid.

After editing any CSV, click the reload button in the top bar (or refresh the tab while connected).

13. Troubleshooting

"The app says my folder permission was revoked"

Browser permissions sometimes lapse after a major browser update or a long idle period. Click Connect Folder again and pick the same folder. Your data is still there.

"I moved my folder and now the app can't find it"

Click Connect Folder again and navigate to the new location. CIC Maker stores no absolute paths.

"There's no Connect Folder option / it won't let me pick a folder"

Folder connection needs a browser that supports the File System Access API — Chrome or Microsoft Edge on desktop. In other browsers, use Browser-only mode or the desktop CIC-MAKER.html, and export your cards as files to keep them.

"My cards aren't appearing in 09_Exports/"

Check the top bar. If you see a folder pill with the folder name, you're connected and saves are going to disk. If not, you're in browser-only mode. Click Connect Folder to switch.

"The AI Review button isn't there"

AI Review is desktop-only. Open CIC-MAKER.html from inside your folder; the public website does not show it.

"I edited a CSV and the app didn't update"

Click the reload button in the top bar, or refresh the tab. The app caches loaded data and re-reads on demand.

"My CSV file shows a parse error"

CSV is mostly forgiving but quoting matters: a comma inside a value needs quotes around the whole cell. Open the file in Excel or LibreOffice and Save As CSV — they handle quoting correctly. If a file is unparseable the app falls back to bundled defaults, so your data is never lost — just temporarily ignored.

"It says a save failed / storage is unavailable"

The browser's storage (IndexedDB) is full, blocked, or in a restricted (private) mode. A red banner stays pinned to the top of the screen, telling you exactly what to do, until storage works or you connect a folder. The app will not pretend the card was saved. Connect a data folder so saves write straight to disk, and/or use Export HTML to get the card out to a file immediately. Your in-progress work stays in the browser in the meantime where possible.

14. Privacy & your data

Your data stays on your computer. Nothing is uploaded to us — we never see your cleaning cards. The web app is a static site served from Netlify: no backend, no server-side database, no analytics that profile you. In your browser, cards and photos are held in IndexedDB and lightweight settings in local storage.

The recommendation engine runs entirely in your browser. AI Review (desktop only) is the single exception — when you run a Review or Regenerate, the card's text goes to Anthropic's API using your own key. We never see it.

If you connect a folder, all reads and writes are local: the browser's File System Access API gives the app permission to read and write only the one folder you picked, nothing else on your computer.

Security posture. The app runs under a strict Content-Security-Policy, uses no dynamic code execution, and ships no third-party tracking. Exported cards carry their own, tighter policy. Every release passes an internal multi-reviewer security and code-quality gate before it is published.

15. Custom adjustments & contact

Need CIC Maker customised for your facility? Custom integrations with your existing systems, bespoke field types, white-labelled deployments, training for your hygiene team — we're available for paid engagements.

Email info@davincienterprise.co.uk to discuss what you need.

16. About CIC Maker

CIC Maker is built and maintained by DaVinci Enterprise Services. The mission is simple: replace chemical-supplier lock-in with software that hygiene teams fully own — your data, your folder, your choice of chemicals.

Site: cicmaker.co.uk
Contact: info@davincienterprise.co.uk
Companies House: SC796218