SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-registry-screenshot-intake-workflow
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
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.
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.
Source skill
Rules (one per line, leading dash optional)
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 URL
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;}
Save changes
Cancel