← ClaudeAtlas

frontend-craftlisted

Design judgment for building interfaces that do not look templated. Use when writing any user-facing markup, styling, or motion.
Deadshot-77/davinci · ★ 0 · Web & Frontend · score 73
Install: claude install-skill Deadshot-77/davinci
# Frontend craft A model builds what it has seen most, and what it has seen most is the average of every interface in its training data — the same centred hero, the same three cards, the same near-white greys, the same Inter. That average reads as characterless the moment a human looks at it. Breaking it takes a decision made before any code is written, not a cleanup pass after. ## Before any of this: know what the page is arguing `story-direction` comes before everything in this file. A visual direction is a stance about type, colour and density; it is not a decision about what the page says, in what order, and why a reader is still there at the fourth section. Settle the claim and the beats first, then come back here and dress them. ## 1. Go and look at the category first A designer handed a brief does not start drawing. They find out what the category already looks like, and they do it by looking — not by recalling. You can do the same, and you have the tool for it: `shoot.mjs` points at any URL, not only your own dev server, and `Read` renders the image. You can genuinely see a competitor's homepage rather than read a description of it. Do this when the work has a real visual surface and the tier is `standard` or `load-bearing`. A favicon or a config file does not get a competitive audit. 1. **Find the actual set.** Search for who does this specific thing — the studios, products or publications a visitor would compare this against. Not "best website design";