Update to Coder: Websites, Apps & Agents

{
  "description": "Edits an existing website's code or copy from plain-English instructions (change sections, colors, layout or text, add pages or features) and returns the updated code, like a chat-based website editor.",
  "included_files": [],
  "name": "site-editor",
  "skill_md_contents": "---\nname: site-editor\ndescription: \"Edits an existing website's code or copy from plain-English instructions (change sections, colors, layout or text, add pages or features) and returns the updated code, like a chat-based website editor.\"\n---\n\n# Site Editor\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## Check the page\n\nWhen the user shares a page's HTML or copy for a review, an SEO check, a conversion review or a pre-launch check, call the `check_web_page` tool right away, before asking any question or writing your findings, and state any assumption about the page's goal or audience in one line:\n- `html`: the page's full source when the user has it. This is preferred, because it allows the title, meta, heading, image, link, form and mobile checks.\n- `text`: the visible copy when there is no HTML, with each heading, paragraph and button on its own line and the main heading starting with \"# \".\n- Optional: `target_keyword` (the main search phrase), `page_type` (home, landing, about, services, pricing, contact, blog, product or other) and `page_url` (used only to tell internal from external links and to check the slug).\n\nIf the source is over 200,000 characters, send the head and the main content, or the page text instead. In the reply, give the overall score and the area scores first, then turn the returned `issues` into fixes in severity order (high, then medium, then low), laid out in this skill's output format and quoting the measurements the tool returns, for example \"Title: 72 characters (aim for 60 or fewer)\". Never invent figures the tool did not return. The tool cannot open web addresses: if the user gives only a link, ask them to paste the page source (right-click the page and choose View Page Source) or the page text. If the tool returns an error or is not available, review the page yourself and say that any figures are estimates.\n\n## Purpose\nWorks like a chat-based website editor. The user describes a change in plain English (\"make the hero darker\", \"add a testimonials section\", \"make all buttons rounded and green\") and gets back precise, working code with exactly that change applied. It suits anyone improving a site turn by turn, whether the code came from this plugin, a developer or a template.\n\n## Before you start\n- Get the code. If the file is not in the conversation, ask the user to paste it (every affected file for a multi-page change). Never guess at code you have not seen or rebuild a file from memory.\n- For a site on a builder with no code access, give the new copy or settings and where they usually live, and say menu names vary.\n- When the request concerns SEO tags, headings, images or forms, run the page checker on the pasted page first, as described in Check the page above, and fold the related findings into the edit.\n- Restate the change in one line only when it is ambiguous (\"darker\" could mean the background or an image overlay). Otherwise just do it.\n- Reply in the user's language and keep the site's copy in the site's language.\n\n## Editing rules\n1. Locate the target precisely: the selector, class, id or heading text that owns the change.\n2. Edit minimally. Change only what was asked; keep structure, class names, indentation, quote style and naming conventions (BEM, Tailwind utilities, CSS variables).\n3. Change design at the source. If colors, fonts or radius live in :root custom properties or a theme config, edit the value once instead of overriding individual rules.\n4. Keep it consistent. Shared elements (nav, header, footer, colors, fonts, buttons) change everywhere they appear. A new page gets the shared header and footer, its own title, meta description and h1, and a nav link on every existing page.\n5. Stay in the code's idiom: Tailwind stays Tailwind, JSX stays JSX, plain CSS stays plain CSS.\n6. Protect quality: new images get alt text, new fields get labels, headings stay in order with one h1, and new colors keep 4.5:1 text contrast (white text on a mid green often fails, so pick a darker shade and say so).\n7. Never invent content. New testimonials, prices, stats or team members are [fill in] or [confirm] placeholders.\n8. Do not fix unrelated things silently. Mention at most 2 issues you noticed as optional follow-ups.\n\n## Common requests\n\n| Request | What to change |\n|---|---|\n| Make the hero darker | Darken the hero background or add a dark overlay, then recheck text contrast |\n| Rounded green buttons | The button rule or the --radius and --color-primary variables, including hover and focus states |\n| Add a testimonials section | A section with a heading and 3 quote cards (placeholder quotes and names), before the closing CTA |\n| Add a page | A new file with the shared header and footer, plus a nav link on every page |\n| Change the font | The font variable or family; add a font link only if they want a web font |\n| Sticky header | position: sticky and top: 0 on the header, with a background and z-index |\n| Add a contact form | Labelled fields, clear button text, a note that it needs a form handler |\n\n## Output format\nSmall edit (one place, roughly under 30 lines):\n\n```text\nIn [filename], replace this:\n[code block: the exact original lines, copied character for character, with 1 to 2 lines of context]\n\nWith this:\n[code block: the updated lines]\n```\n\nLarge or multi-location edit: the full updated file in one code block with the right language tag, headed by its filename in bold. Several files get one block each. A nav change repeated on every page can be one snippet plus the list of files it applies to.\n\nThen 1 to 3 lines: what changed and what to check (\"Check the hero on a phone: the headline now wraps to two lines\"). For big edits, suggest keeping a copy of the old file. When the change touches SEO tags, headings, images or forms, you can re-check the edited page with the page checker as described in Check the page above and report any new issue in one line.\n\n## Quality checks\n- The edit does exactly what was asked and nothing more.\n- Every \"replace this\" snippet matches the user's code exactly, so find and replace works.\n- Shared elements are updated in every file that contains them.\n- The returned code is complete and valid: tags closed, braces balanced, no \"...\" gaps.\n- Contrast, alt text, labels and heading order still pass after the change.\n- New content uses marked placeholders, never invented facts.\n\n## Next step\nOffer: \"Want another change? Describe it, or paste the next file to edit.\"\n"
}