← ClaudeAtlas

samanticlab-design-shiplisted

Helper for samanticlab-design. Load right before a website goes live — "get it ready to deploy", "final check", "make the ZIP", "is this ready for Netlify". A pre-launch checklist for static HTML/CSS/JS sites, with the phone details. Not for design decisions.
samvanrooyen2022-sys/samanticlab-design · ★ 0 · Web & Frontend · score 70
Install: claude install-skill samvanrooyen2022-sys/samanticlab-design
# Ship: the pre-launch checklist Read `samanticlab-design` first. This runs once, after the finish step in section 8 has reported **ship** or after the last fix round. Go down the list in order. Every line is a check; mark each pass or fix. Nothing here is optional for a live site. ## Phone - Screenshots at 390 and 360 wide, full page, real copy, real images. Then 768 and 1440. - No horizontal scroll at any width. Long emails, URLs and names wrap (`overflow-wrap: anywhere`, `min-width: 0` on grid and flex children). - Zoom the phone view to 200%. Nothing clips, nothing overlaps, no fixed-height text boxes. - Full-height sections use `100dvh`. Anything fixed to the top or bottom has `padding` from `env(safe-area-inset-top/bottom)` and the viewport meta carries `viewport-fit=cover`. - The main action sits in thumb reach on the first screen, or in a sticky bottom bar that never covers content. - The menu: opens with one tap, is a full readable panel, closes on Escape and on tapping outside, moves focus into itself when open, and returns focus to the button when closed. - Nothing important is hover-only. Hover states sit inside `@media (hover: hover)`. - Phone number is `<a href="tel:+27…">`, address opens a map link, email is `mailto:`. Tapping dials. - Form fields carry `autocomplete` (`name`, `tel`, `email`, `street-address`) and the right `type` and `inputmode`, so the phone shows the right keyboard. - Tap feedback within 100 to 150ms. Pressed states change colour or opaci