sa-registry-screenshot-intake-workflow v2026-06-15
Registry workflow entry for turning attached screenshots/mockups into draft or live registry rows. Captures source image path, exact-match versus near-match status, component scope, reusable HTML/CSS requirements, QA evidence, and pending approvals so visual ideas do not remain only in chat attachments.
Source skill: registry-screenshot-intake; requested by Sam 2026-06-15 · Updated 2026-06-15 19:35:06
When to use
Use whenever Sam attaches screenshots, mockup sheets, design comps, page captures, or asks whether visuals are built and saved in the registry. Start with read-only exact/near-match verification, then create missing draft rows after approval.
Rules & constraints
- 1. Always check the live registry first by exact text, option names, and visual intent.
- 2. Classify each screenshot as Exact Saved, Near Match Saved, Missing Draft Needed, or Page Composition Note.
- 3. For every new row, include source screenshot path or chat source, exact-match status, status Beta/Live, category, when-to-use, rules, deployment notes, HTML, and CSS.
- 4. If the screenshot is a page composition rather than a standalone component, create a composition-notes row and reference the component rows it depends on.
- 5. Save a pre-change /api/elements snapshot under C:\Users\SAguiar\Documents\Codex before adding or editing registry rows.
- 6. Verify public catalog/detail pages after inserts and create a Notion session export with pending approval choices.
- 7. Offer remote/cloud migration or automation hardening if this becomes recurring.
Live reference
Deployment notes
This is a process/workflow registry row, not a deployable site component. It should later be promoted into an agent skill or checklist automation so future agents can intake screenshots consistently and avoid losing design intent during context compaction.
HTML
<section class="sa-registry-intake" aria-labelledby="sa-registry-intake-title">
<h2 id="sa-registry-intake-title">Screenshot Intake Workflow</h2>
<ol><li>Capture source: screenshot path, page URL, chat attachment, date, and requester.</li><li>Search registry by exact text, option name, class name, and visual role.</li><li>Classify: Exact Saved, Near Match Saved, Missing Draft Needed, or Page Composition Note.</li><li>Create or update rows with reusable HTML/CSS, rules, when-to-use, and QA requirements.</li><li>Verify public detail pages and export a Notion closeout with pending approval choices.</li></ol>
</section>CSS
.sa-registry-intake{font-family:Poppins,system-ui,sans-serif;max-width:860px;margin:0 auto;padding:34px;background:#f7f9fa;border-left:4px solid #D97706;color:#0B212D;}.sa-registry-intake h2{margin:0 0 18px;text-align:center;text-transform:uppercase;font-size:22px;line-height:1.2;color:#0B212D!important;}.sa-registry-intake ol{margin:0;padding-left:24px;display:grid;gap:10px;}.sa-registry-intake li{font-size:16px;line-height:1.55;font-weight:600;}