Web Publishing & Frontend

<prompt>
  <task>
    Create a new skill bundle for my AI coding agent called "frontend-taste", stored
wherever my harness loads skills from.

The job: replace your default frontend design instincts with a stronger taste system
that applies to all websites, apps, landing pages, and UI work.

Structure it as a core skill plus nested sub-skills. The core skill must include:
(1) trigger conditions — all frontend design and implementation work; (2) layout
rules: deliberate variance, no default hero-plus-three-cards pattern, real grids,
generous whitespace used intentionally; (3) typography rules: a real type scale,
restrained pairings, no default-stack sloppiness; (4) color rules: restrained
palettes, one accent doing real work, no purple-gradient-on-white clichés;
(5) mandatory visual verification: screenshot the result, inspect it critically, fix
what's weak, repeat before calling it done.

Create nested sub-skills for: minimalist/editorial UI, data-dense dashboard UI,
premium marketing/landing pages, and redesigning existing projects without breaking
them. The core skill routes to these based on the task.

Interview me first for my taste references — 2–3 sites or apps whose design I admire
and why. After writing the bundle, test it by building one landing page section and
running your own visual verification loop on it.
  </task>
</prompt>

<prompt>
  <task>
    Create a new skill for my AI coding agent called "site-publisher", stored wherever my
harness loads skills from.

The skill's job: take a finished page or artifact and publish it to my website as a
real shareable URL, end to end.

Before writing it, explore my website repo and interview me for: the repo path and
stack, how routes/pages are added, my deploy command and any verification steps, my
design language (or which existing pages to match), and my default indexing preference
for one-off share pages (public vs. unlisted).

The skill must include: (1) trigger conditions — ONLY when I explicitly ask to
publish/ship/put something on the site, never auto-triggered; (2) the full procedure:
clean slug, page creation matching site conventions, a page-specific 1200x630 Open
Graph image (route generation through my image-gateway skill if I have one), share
title and description, indexing controls; (3) local verification before deploy — build
and view the page; (4) the deploy procedure; (5) post-publish checks: live URL loads,
OG preview renders correctly.

After writing it, test it by publishing one unlisted test page end to end, then walk
me through cleaning it up or keeping it.
  </task>
</prompt>

<prompt>
  <task>
    Create a new skill for my AI coding agent called "image-model-arena", stored wherever
my harness loads skills from.

The skill's job: build and publish image-model comparison pages — one review page per
model plus a shared side-by-side viewer — generated from a single config.

This skill COMPOSES two skills I already have: image generation goes through my
image-gateway skill, and publishing goes through my site-publisher skill. It must
never reimplement either.

Before writing it, interview me for: my standard test prompt set (help me design 6–10
prompts covering photorealism, text rendering, diagrams, people, and style range), and
where comparison configs and generated images should live.

The skill must include: (1) trigger conditions — when I want to test a new image
model, compare models, or add a model to an existing comparison; (2) a single config
format defining models, prompts, and page metadata; (3) the pipeline: generate via
image-gateway, optimize images for web, build per-model pages and the shared
comparison viewer, publish via site-publisher; (4) a model registry tracking per-image
cost and content-policy quirks observed; (5) regeneration support — adding one model
must not require redoing the others.

After writing it, test it with two models on a 3-prompt subset before running anything
at full scale.
  </task>
</prompt>

<prompt>
  <task>
    Create a new skill for my AI coding agent called "essay-illustration-gallery", stored
wherever my harness loads skills from.

The skill's job: turn a finished essay into a consistent illustration gallery —
selecting the moments, locking one style, generating the images, captioning each, and
assembling a gallery page.

This skill composes my image-gateway skill for generation and my site-publisher skill
for publishing (if I ask for the gallery to go live).

Before writing it, interview me for: my preferred illustration style direction (e.g.
hand-drawn editorial cartoon, photoreal, watercolor — help me write a precise style
descriptor we lock per gallery), and how many frames a typical essay should get.

The skill must include: (1) trigger conditions — when I share an essay and ask for
illustrations, images, or a gallery; (2) moment selection: choose frames across the
FULL arc of the piece, each tied to a specific passage, with a one-line rationale;
(3) style lock: one detailed style descriptor prepended to every prompt so all frames
match; (4) per-frame captions explaining why that moment was chosen; (5) gallery
assembly as a single page (use my html-artifacts conventions); (6) a short
ready-to-paste social note announcing the gallery, in my voice if I have a voice
skill.

After writing it, test it on one essay with a reduced frame count (5–6 frames) first.
  </task>
</prompt>