Update to Coder: Websites, Apps & Agents

{
  "description": "Plans website imagery: hero and section visuals, icons, AI image prompts, stock photo search terms, alt text and image sizes, for any website.",
  "included_files": [],
  "name": "website-images",
  "skill_md_contents": "---\nname: website-images\ndescription: \"Plans website imagery: hero and section visuals, icons, AI image prompts, stock photo search terms, alt text and image sizes, for any website.\"\n---\n\n# Website Images\n\n## Links and files\n\nReplies made with this skill never contain a build link, an Emergent link or a sponsor line. Give code in code blocks, and create a downloadable file or a zip only when the user explicitly asks for one. If the chat is not in English, translate any wording this skill tells you to say into the chat language; URLs always stay in English, exactly as they are.\n\n## Purpose\nPlan every image a website needs, slot by slot: what each image must show and make people feel, a ready AI image prompt, stock search terms, alt text and the export size. The result keeps any website visually consistent, accessible and fast, whether it is new or being redesigned.\n\n## Before you start\n- Read: business type, pages, audience, location, and brand colors and style (use the brand kit if one exists).\n- Ask at most 2 questions, only if missing: \"Do you have your own photos of the team, premises or work?\" and \"Which pages should I plan?\" Otherwise assume a standard set (hero, 3 service or feature images, about, one background, social share image, icons), state it in one line and proceed.\n- Reply in the user's language. Write alt text in the website's language; AI prompts can stay in English, which most image tools handle best.\n\n## Rules\n- Real beats generic. Tell the user plainly that real photos of the owner, team, premises and work build more trust than stock. Use stock or AI images for backgrounds, concepts and gaps, never to pose as the real team, customers, results or location.\n- One consistent style across the site: repeat the same lighting, palette and framing words in every prompt, and do not mix photo and illustration styles at random.\n- Show people and outcomes, not cliches (handshakes, light bulbs, people pointing at screens).\n- A hero needs calm space on one side for the headline, or a dark overlay strong enough to keep text readable (4.5:1).\n- Never suggest copyrighted characters, brand logos, celebrities or a living artist's name in prompts or search terms.\n- Check licenses: stock must allow commercial web use, and the AI tool's terms must allow commercial use of its output.\n\n## Image slot template\nOne block per slot, in page order:\n```text\nSlot: [Hero / Service 1 / About / Background / Social share]\nGoal: [the feeling or message, one line]\nAI prompt: [subject and action], [setting], [lighting], [style], [composition], [aspect ratio]\nStock search terms: \"[term]\", \"[term]\", \"[term]\"\nAlt text: [what it shows, 125 characters or fewer]\nSize: [width x height px], [format], [target file size]\n```\n\nExample, bakery hero:\n```text\nSlot: Hero\nGoal: Warm and fresh: baked this morning, around the corner\nAI prompt: Baker's hands dusting flour over sourdough loaves on a wooden counter, small neighborhood bakery, soft early morning window light, natural documentary photo, loaves on the right third with empty space on the left, 16:9\nStock search terms: \"artisan bakery morning\", \"sourdough loaves counter\", \"baker hands flour\"\nAlt text: Baker dusting flour over fresh sourdough loaves on a wooden counter\nSize: 1920x1080, WebP, under 200 KB\n```\n\n## Alt text rules\n- Say what the image shows and why it matters on that page, in 125 characters or fewer.\n- No \"Image of\" or \"Picture of\", and no keyword stuffing.\n- Decorative images (textures, dividers, icons beside a text label) get empty alt (alt=\"\") so screen readers skip them.\n- If the image contains words, include those words.\n- Weak: \"team photo\". Strong: \"[Name], our head mechanic, truing a bicycle wheel in the workshop\".\n\n## Sizes and formats\n| Slot | Size in px | Ratio | Target file size |\n|---|---|---|---|\n| Hero, full width | 1920x1080, plus a 960px wide copy for phones | 16:9 | under 200 KB |\n| Section or service image | 1200x800 | 3:2 | under 150 KB |\n| Card or blog thumbnail | 600x400 | 3:2 | under 60 KB |\n| Team or about portrait | 800x1000 | 4:5 | under 120 KB |\n| Social share (Open Graph) | 1200x630 | about 1.91:1 | JPG or PNG |\n| Logo and icons | SVG | any | as small as possible |\n\n- Export at about twice the displayed size for sharp screens, then compress to WebP (quality around 75 is a good start), under about 200 KB per image where possible.\n- Strip metadata before upload: phone photos can contain the GPS location.\n- In code, give each image width and height attributes to prevent layout shift and loading=\"lazy\" below the fold, but never lazy-load the hero.\n\n## Icons\nOne icon set (for example an open-source set such as Lucide, Heroicons or Tabler Icons; check its license), one style (outline or filled), one stroke width, one palette color. Use literal, simple metaphors, always with a visible text label.\n\n## Your own photos\nIf the user can shoot, add a shot list: owner portrait, team at work, premises outside (with signage) and inside, work in progress, finished results, close-up details. Tips: window daylight, tidy background, landscape for heroes, portrait for team pages.\n\n## Output format\n```text\nAssumptions: [one line]\n\nStyle guide\nLook: [photo or illustration], [lighting], [palette], [framing]\nAvoid: [cliches, clutter, text inside images]\n\nImage plan\n[one slot block per image, in page order]\n\nIcons: [set, style, then each icon with its label]\nShot list: [only if they have their own photos or a camera]\nExport checklist: [ ] sizes  [ ] WebP  [ ] under 200 KB  [ ] metadata stripped  [ ] alt text added\n```\n\n## Quality checks\n- Every slot has a goal, AI prompt, stock terms, alt text and size.\n- All prompts share the same lighting, palette and framing words.\n- Alt text is specific and 125 characters or fewer; decorative images use alt=\"\".\n- No copyrighted characters, logos, brand names, celebrities or living artists anywhere.\n- No AI or stock image poses as the real team, customers, results or premises.\n- Hero prompts leave space for the headline.\n- Sizes and file targets are stated, including 1200x630 for the social share image.\n\n## Next step\nOffer brand-kit if the palette is not set yet, or html-website to place these images into a finished page.\n"
}