30 Claude Prompts That Write JavaScript

You are a Node.js engineer who writes practical command-line scripts. <context> I want a Node script that sorts files in a folder into subfolders by type, returned as one self-contained, commented script ready to run with node. </context> <inputs> - Target folder: [PATH OR PASS AS ARGV] - Grouping rule: [BY EXTENSION / BY DATE / BY CUSTOM MAP OF EXT TO FOLDER] - Dry-run first: [YES / NO] - On name collision: [SKIP / RENAME WITH SUFFIX] </inputs> <task> Write a script using node:fs and node:path that reads the folder, decides each file's destination subfolder by the chosen rule, creates folders as needed, and moves files, honoring the collision rule. Support a --dry-run flag that logs planned moves without touching anything and print a summary count at the end. </task> <constraints> - Node built-ins only, no npm packages; use async fs promises. - Never overwrite silently; the collision rule is respected and logged. - Comment argument parsing and the move logic; skip directories and hidden files unless told. </constraints> <format> Return the full script in one code block, then note the exact run command and what --dry-run prints. </format>

You are a Node.js engineer who writes robust data-conversion scripts. <context> I need a Node script that converts a CSV file to JSON, returned as one self-contained, commented script ready to run with node. </context> <inputs> - Input CSV path and output JSON path: [PATHS OR ARGV] - Delimiter and quote char: [E.G. COMMA, DOUBLE-QUOTE] - Type coercion: [KEEP STRINGS / PARSE NUMBERS AND BOOLEANS] - Header row present: [YES / NO, OR SUPPLY COLUMN NAMES] </inputs> <task> Write a script that reads the CSV, correctly parses quoted fields containing commas and escaped quotes and newlines, maps rows to objects using the header (or provided names), optionally coerces numbers and booleans, and writes pretty-printed JSON. Print row and error counts. Do not pull in a CSV library. </task> <constraints> - Node built-ins only; the parser handles quoted fields and embedded delimiters, not a naive split(','). - Validate the file exists; report malformed rows instead of crashing. - Comment the parsing state machine and the coercion rules. </constraints> <format> Return the full script in one code block, then note the run command and how to switch delimiters (e.g. TSV). </format>

You are a Node.js engineer who writes filesystem tooling. <context> I need a script that scans a directory tree and reports sizes and the biggest files, returned as one self-contained, commented Node script ready to run. </context> <inputs> - Root path: [PATH OR ARGV] - Report: [TOTAL SIZE / TOP N LARGEST FILES / SIZE BY EXTENSION] - N for top-largest: [E.G. 20] - Ignore patterns: [E.G. node_modules, .git] </inputs> <task> Write a script that recursively walks the tree (skipping ignored folders), sums total size, tracks the top N largest files, and aggregates bytes by extension. Print a clean, human-readable report with sizes formatted (KB/MB/GB) and a sorted top-N table. Handle permission errors gracefully. </task> <constraints> - Node built-ins only; recursion or an explicit stack, not shelling out to du. - Skip symlink loops and unreadable paths without crashing; comment the walk and formatting. - Byte formatting is a small reusable helper. </constraints> <format> Return the full script in one code block, then note the run command and how to change the ignore list. </format>

You are a Node.js engineer who writes small servers with no framework. <context> I need a tiny REST API server backed by an in-memory store, returned as one self-contained, commented Node script ready to run. </context> <inputs> - Resource name: [E.G. tasks] - Fields on the resource: [E.G. id, title, done] - Port: [E.G. 3000] - Routes I need: [LIST, GET ONE, CREATE, UPDATE, DELETE] </inputs> <task> Write a server using node:http that implements CRUD for the resource with an in-memory array, parses JSON bodies safely, routes by method and path (including an id segment), returns correct status codes (200/201/204/400/404), sets JSON content-type and basic CORS, and generates ids. Seed two example records and log the routes on startup. </task> <constraints> - Node built-ins only, no Express or other packages; handle invalid JSON with a 400. - Comment the router, the body parser, and each handler's status codes. - Return proper 404 for unknown routes and 405 hints where useful. </constraints> <format> Return the full script in one code block, then note the run command plus example curl calls for each route. </format>

You are a Node.js engineer who writes safe codebase-wide edit scripts. <context> I need a script that finds and replaces text across many files, returned as one self-contained, commented Node script ready to run. </context> <inputs> - Root folder and file glob: [E.G. ./src, ONLY .js AND .ts] - Find and replace: [LITERAL STRING OR REGEX, PLUS REPLACEMENT] - Dry-run first: [YES / NO] - Backups: [WRITE .bak FILES / NONE] </inputs> <task> Write a script that recursively finds matching files, counts and previews matches per file, and performs the replacement (literal or regex), honoring a --dry-run flag and an optional backup. Print a summary of files changed and total replacements. Skip binary files and the usual ignore folders. </task> <constraints> - Node built-ins only; regex mode escapes correctly and supports flags. - Never write when --dry-run is set; comment the file matching, the replace, and the backup logic. - Skip node_modules, .git, and non-text files by default. </constraints> <format> Return the full script in one code block, then note the run command and the difference between literal and regex mode. </format>

You are a front-end engineer who builds accessible vanilla-JS components. <context> I need an accessible modal dialog, returned as one self-contained, commented JavaScript snippet (with the minimal CSS) ready to run. </context> <inputs> - Open trigger selector: [E.G. .open-modal] - Modal content: [INLINE HTML / REFERENCED BY DATA-TARGET] - Close options: [X BUTTON, BACKDROP CLICK, ESC KEY] - Return focus to: [THE TRIGGER] </inputs> <task> Write a modal controller that opens on the trigger, traps focus inside the dialog (Tab and Shift+Tab wrap), closes on the X, backdrop click, and Escape, restores focus to the trigger, sets aria-hidden and role=dialog with aria-modal, and locks background scroll while open. Support multiple modals via data-target. Include the minimal CSS. </task> <constraints> - Vanilla JS, no libraries; correct ARIA and a real focus trap. - Comment the focus-trap and keyboard handling; restore body scroll on close. - Works for more than one modal on the page. </constraints> <format> Return the full JavaScript plus minimal CSS in one code block, then note the HTML structure it expects. </format>

You are a front-end engineer who builds accessible interactive widgets. <context> I need a tabs component with proper keyboard support, returned as one self-contained, commented JavaScript snippet (with minimal CSS) ready to run. </context> <inputs> - Tabs container selector: [E.G. .tabs] - Number of tabs and labels: [DESCRIBE OR READ FROM MARKUP] - Default active tab: [FIRST / BY INDEX] - Activation: [AUTOMATIC ON FOCUS / MANUAL ON ENTER-SPACE] </inputs> <task> Write a tabs controller that wires role=tablist/tab/tabpanel and aria-selected, shows the active panel and hides the rest, supports Left/Right (and Home/End) arrow navigation with roving tabindex, and follows the chosen activation model. Enhance existing markup progressively so content is visible without JS. Include minimal CSS. </task> <constraints> - Vanilla JS, no libraries; full ARIA tab pattern and roving tabindex. - Comment the keyboard map and the aria wiring; support multiple tab groups per page. </constraints> <format> Return the full JavaScript plus minimal CSS in one code block, then note the tab/panel HTML structure it enhances. </format>

You are a front-end engineer who builds smooth, accessible disclosure widgets. <context> I need an accordion for an FAQ section, returned as one self-contained, commented JavaScript snippet (with minimal CSS) ready to run. </context> <inputs> - Accordion container selector: [E.G. .faq] - Behavior: [ONE OPEN AT A TIME / ALLOW MULTIPLE OPEN] - Start state: [ALL CLOSED / FIRST OPEN] - Animate height: [YES / NO] </inputs> <task> Write an accordion controller using button headers with aria-expanded toggling their panels, supporting the chosen single-vs-multiple open behavior, keyboard operation (Enter/Space), and an optional smooth height animation. Enhance existing markup so it degrades gracefully without JS. Include minimal CSS with a rotating chevron. </task> <constraints> - Vanilla JS, no libraries; each header is a real button with aria-expanded and aria-controls. - Comment the toggle and the single-open logic; animation uses max-height or the details element cleanly. </constraints> <format> Return the full JavaScript plus minimal CSS in one code block, then note the header/panel HTML it expects. </format>

You are a front-end engineer who builds small reusable UI systems. <context> I need a toast notification system I can call from anywhere, returned as one self-contained, commented JavaScript module (with minimal CSS) ready to run. </context> <inputs> - Types: [SUCCESS, ERROR, INFO, WARNING] - Position: [TOP-RIGHT / BOTTOM-CENTER / ETC] - Auto-dismiss ms (0 = sticky): [E.G. 4000] - Max visible at once: [E.G. 3] </inputs> <task> Write a toast module exposing toast.success/error/info/warning(message, options) that creates a container if missing, stacks toasts up to the max (queueing extras), auto-dismisses with a pause-on-hover timer, supports a manual close button and an optional action link, and animates in and out. Include the minimal CSS per type. Add a demo firing one of each. </task> <constraints> - Vanilla JS, no libraries; timers pause on hover and resume on leave. - Accessible: container is an aria-live region; comment the queue and timer logic. - No memory leaks: remove elements and clear timers on dismiss. </constraints> <format> Return the full JavaScript plus minimal CSS in one code block with the demo, then note how to change the position. </format>

You are a front-end engineer who builds accessible form widgets. <context> I need an interactive star-rating input, returned as one self-contained, commented JavaScript snippet (with minimal CSS) ready to run. </context> <inputs> - Container selector: [E.G. #rating] - Number of stars: [E.G. 5] - Allow half stars: [YES / NO] - Hidden input name for form submit: [E.G. score] </inputs> <task> Write a widget that renders the stars, fills them on hover and click, sets a value in a hidden input for form submission, supports keyboard (arrow keys to change, Enter to set), and exposes an onChange callback. If half stars are enabled, handle the half-position on hover. Build it as a radiogroup with proper ARIA so it is screen-reader usable. Include minimal CSS. </task> <constraints> - Vanilla JS, no libraries; keyboard and pointer both work; role=radiogroup with aria-checked. - Comment the hover/click math and the half-star handling; hidden input stays in sync. </constraints> <format> Return the full JavaScript plus minimal CSS in one code block, then note how to read the value on form submit. </format>

You are a JavaScript engineer who writes careful string utilities. <context> I need slugify plus case-conversion helpers, returned as one self-contained, commented JavaScript module ready to run. </context> <inputs> - Helpers I want: [SLUGIFY, CAMEL-CASE, KEBAB-CASE, SNAKE-CASE, TITLE-CASE] - Handle accents/diacritics: [YES, STRIP TO ASCII / NO] - Slug separator: [HYPHEN / UNDERSCORE] - Max slug length: [E.G. 60 OR NONE] </inputs> <task> Write slugify (lowercase, strip or transliterate accents, remove punctuation, collapse spaces to the separator, trim, optional length cap) and the requested case converters, each pure with a doc comment and an example. End with a self-test block running each on tricky inputs (accents, emoji, extra spaces) and logging results. </task> <constraints> - No dependencies; use Unicode normalization for accent stripping when requested. - Comment the regex in each helper; functions are pure and handle empty strings. </constraints> <format> Return the full JavaScript in one code block with the self-test, then note how to switch the separator or length cap. </format>

You are a JavaScript engineer who writes practical validation helpers. <context> I need a small validation module with well-commented regexes, returned as one self-contained JavaScript file ready to run. </context> <inputs> - Validators I need: [EMAIL, URL, PHONE, POSTAL CODE, STRONG PASSWORD] - Locale for phone/postal: [E.G. US / INTERNATIONAL] - Password rules: [MIN LENGTH, UPPER, NUMBER, SYMBOL] - Return style: [BOOLEAN / {valid, reason}] </inputs> <task> Write each requested validator as a function with a documented regex (explaining what each part matches), following the chosen return style, plus a password checker that reports which specific rule failed. End with a self-test block covering valid and invalid samples for each validator and logging pass/fail. </task> <constraints> - No dependencies; regexes are readable and commented, not opaque one-liners. - Be pragmatic on email (RFC-perfect is not the goal); explain the tradeoff in a comment. - Password checker returns actionable reasons, not just false. </constraints> <format> Return the full JavaScript in one code block with the self-test, then note the known limits of each regex. </format>

You are a JavaScript engineer who writes text-parsing utilities. <context> I need to extract structured items from free text, returned as one self-contained, commented JavaScript module ready to run. </context> <inputs> - What to extract: [EMAILS, URLS, @MENTIONS, #HASHTAGS, PHONE NUMBERS, DOLLAR AMOUNTS] - Dedupe results: [YES / NO] - Preserve order or sort: [ORDER OF APPEARANCE / SORTED] - Return: [ARRAYS PER TYPE / OBJECTS WITH INDEX POSITIONS] </inputs> <task> Write an extract(text) function that returns the requested entity types using well-commented regexes with the global flag, optionally deduping and ordering per the inputs. If index positions are requested, include start/end offsets for each match. End with a self-test on a messy sample paragraph and log the parsed result. </task> <constraints> - No dependencies; each regex is explained inline and tested against edge cases (trailing punctuation on URLs, etc.). - Do not double-count overlapping matches; comment the dedupe and ordering logic. </constraints> <format> Return the full JavaScript in one code block with the self-test, then note how to add a new entity type. </format>

You are a JavaScript engineer who writes safe string-templating helpers. <context> I need a small template interpolator for mail-merge style text, returned as one self-contained, commented JavaScript module ready to run. </context> <inputs> - Placeholder syntax: [E.G. {{name}} OR ${name}] - Support nested keys: [YES, E.G. {{user.email}} / NO] - Missing-value behavior: [LEAVE BLANK / KEEP PLACEHOLDER / THROW] - Optional formatters/filters: [E.G. {{price | currency}} — YES / NO] </inputs> <task> Write a render(template, data) that replaces placeholders using the chosen syntax, resolves nested keys safely, follows the missing-value policy, and (if enabled) applies simple named formatters like upper, currency, or date. Include a couple of default formatters and a demo merging a template with a sample data object. </task> <constraints> - No dependencies; no eval or new Function — a regex/replace approach only, for safety. - Comment the placeholder regex, nested-key resolution, and formatter dispatch. - Missing values follow the policy exactly and never render 'undefined'. </constraints> <format> Return the full JavaScript in one code block with the demo, then note how to register a custom formatter. </format>

You are a JavaScript engineer who writes content-analysis helpers. <context> I need a text-stats utility (reading time, word count, truncation), returned as one self-contained, commented JavaScript module ready to run. </context> <inputs> - Reading speed (WPM): [E.G. 225] - Count from: [PLAIN TEXT / STRIP HTML FIRST] - Truncate mode: [BY WORDS / BY CHARACTERS, WITH AN ELLIPSIS, NO MID-WORD CUT] - Also want: [SENTENCE COUNT / EST. READING GRADE / NONE] </inputs> <task> Write functions for wordCount, readingTime (returns minutes and a friendly label), and truncate (word- or char-based without cutting a word, appending an ellipsis), optionally stripping HTML first and computing the extra stats requested. Handle empty input and multiple spaces. End with a self-test on a sample paragraph logging every stat. </task> <constraints> - No dependencies; HTML stripping via a commented regex when enabled. - truncate never breaks a word mid-way and never adds an ellipsis when nothing was cut; comment the logic. </constraints> <format> Return the full JavaScript in one code block with the self-test, then note how to change the WPM or truncation mode. </format>