Skip to content
CodeLifter

Vibe coding prompts

Six scripts and tips from the original CodeLifter, rebuilt as prompts. The editors tested the code each prompt describes; the prompts have not yet been run against a named assistant, so compare what you get with the reviewed code on its page.

All prompts 6

  1. CL-002 · Content5 fixes · verified 2026-10-15

    Random quote generator

    Credited quotes, never the same twice in a row, announced to screen readers with their credit.

    Write a random quote generator in plain JavaScript with no dependencies. Store each quote as an object with text, speaker, source title and source URL. Show the quote in a blockquote inside a figure, set the blockquote's cite attribute to the source URL, and put the credit in a figcaption: the speaker's name, then a link to the source. Never show the same quote twice in a row. Write text with textContent and build the link with createElement, never innerHTML. Give the figure aria-live="polite" and aria-atomic="true" so screen readers announce each quote with its credit. Use a real button element, and start the script with an SPDX-License-Identifier: MIT comment.

  2. CL-001 · Navigation6 fixes · verified 2026-10-15

    Go back to previous page

    Calls history.back() only when the visitor came from your own site, and follows a real link everywhere else.

    Write a "go back" link in plain JavaScript with no dependencies. Start with a normal <a> element whose href is a sensible fallback page, so it works without scripts. In its click handler, leave clicks with any button other than the main one, and clicks with Ctrl, Cmd, Shift or Alt held, to the browser. Call history.back() only when document.referrer is on the same origin and history.length is greater than 1; otherwise let the link follow its href. Treat a missing or unreadable referrer as a direct visit. Attach the handler with addEventListener, not an inline onclick, and start the script with an SPDX-License-Identifier: MIT comment.

  3. CL-003 · Interaction6 fixes · verified 2026-10-15

    Image popup

    A native dialog: Escape closes it, focus returns to the thumbnail, and the large image keeps its alt text.

    Write an image popup in plain JavaScript using the native <dialog> element and showModal(). Each thumbnail is a link with the class popup that points to the full-size image, so it still opens where scripts or dialog support are missing. Use one click listener on the document. Set the large image's src and alt as properties, never by writing HTML, and take the alt from a data-alt attribute or the thumbnail's alt text. Put autofocus on a visible Close button, close the dialog when the backdrop is clicked, leave Escape to the browser, clear the image source on close and return focus to the thumbnail that opened it. Add an MIT licence comment.

  4. CL-004 · Interaction6 fixes · verified 2026-10-15

    Mouse position

    Pointer coordinates for mouse, pen and touch, with viewport, page and element values, written at most once per frame.

    Write plain JavaScript that shows the pointer position over one box. Listen for pointermove on that box, not mousemove on the document, so pen and touch work too, and set touch-action: none on the box only. Show the pointer type and three rounded coordinate pairs: clientX and clientY, pageX and pageY, offsetX and offsetY. Keep only the newest event and write the readout at most once per animation frame with requestAnimationFrame. Write with textContent, never innerHTML, show a short message on pointerleave, and add an MIT licence comment.

  5. CL-005 · Interaction7 fixes · verified 2026-10-15

    Draggable element

    Drag with a mouse, finger or pen, or move it with the arrow keys. It stays inside its container.

    Write a draggable element in plain JavaScript using pointer events, with listeners on the element itself, not on document. On pointerdown with the main button, call setPointerCapture and remember the offset between the pointer and the element, so a fast drag keeps hold and the element does not jump. Move it with transform, not top and left, and clamp it inside its parent. Make it focusable with tabindex="0", give it an accessible name that mentions the arrow keys, and move it 10 pixels per arrow key press, or 50 with Shift, calling preventDefault only for the arrows. Set touch-action: none on the element only, and add an MIT licence comment.

  6. CL-006 · Content5 fixes · verified 2026-10-15

    Accessible slideshow

    Real previous and next buttons, slides named for screen readers, and no autoplay, so there is nothing to pause.

    Write an image slideshow in plain JavaScript with no autoplay. Put each slide in a figure with role="group", aria-roledescription="slide" and an aria-label such as "2 of 5", inside a wrapper with aria-live="polite" and aria-atomic="false". Give the container aria-roledescription="carousel" and a label that does not contain the word carousel. Give every image its own alt text. Use real <button> elements for Previous and Next, wrap at both ends, and hide inactive slides with the hidden attribute. Add a short fade that a prefers-reduced-motion: reduce media query switches off. Support several slideshows on one page, and add an MIT licence comment.

What every prompt here spells out

A one-line prompt leaves the assistant to guess. Ours spell out five things, shown here with lines from the random quote prompt.

How to write your own
  1. 1 The platform and its limitsPlain JavaScript, no dependencies, and which browser APIs to use.in plain JavaScript with no dependencies
  2. 2 Where the data comes fromWhat each item holds, including a source for anything quoted.text, speaker, source title and source URL
  3. 3 The edge case it would missBehaviour a quick test can easily miss, stated as a rule.Never show the same quote twice in a row
  4. 4 The unsafe shortcut to avoidNamed outright, so the answer cannot quietly use it.build the link with createElement, never innerHTML
  5. 5 Who else uses the pageKeyboard and screen reader behaviour, stated as a requirement, plus the licence line.aria-live="polite" and aria-atomic="true"

Questions on the forum

Ask on the forum
  1. Prompts · Answered by the editors How do I stop a coding assistant from using innerHTML?
  2. Prompts · Answered by the editors Do the CodeLifter prompts work with local models?
  3. Script Shelf · Answered by the editors What happened to the old image rollover script?