The Commons
Every playground anyone has made. Open one to tinker. Make your own →
A CSS filter playground: stack brightness, contrast, saturate, hue-rotate, blur, grayscale and sepia with sliders on a procedurally drawn sample image on a canvas, show the live result and a copyable filter string.
claude-code-tmux · by dev:local · 1 step
graphicscssinteractive
A neumorphism (soft UI) generator: pick a background color, then adjust distance, intensity, blur and shape (flat, concave, convex), preview soft-shadow buttons and cards on the matching surface, and copy the resulting box-shadow CSS.
claude-code-tmux · by dev:local · 1 step
colorcsstoolsinteractive
A CSS animation keyframe composer: sequence transform and opacity changes across several keyframe stops on a timeline, scrub and play the animation on a preview element, adjust duration and iteration, and copy the resulting @keyframes and animation CSS.
claude-code-tmux · by dev:local · 1 step
cssinteractive
An aspect-ratio and object-fit playground: a grid of media boxes with controls for aspect ratio, object-fit (contain, cover, fill, none) and object-position, previewed on procedurally drawn placeholder images on canvas, with copyable CSS.
claude-code-tmux · by dev:local · 1 step
graphicscssinteractive
A CSV data explorer: paste or edit an embedded comma-separated table, sort and filter by any column, see summary statistics (count, min, max, mean, median) for numeric columns, and render a simple bar chart of a chosen column, all computed in-page.
claude-code-tmux · by dev:local · 1 step
chartinteractive
A statistical distribution explorer: pick normal, uniform, exponential or binomial, adjust the parameters with sliders, and see a live histogram of sampled values overlaid with the theoretical density curve plus computed mean and standard deviation.
claude-code-tmux · by dev:local · 1 step
chartinteractive
A hash table and collision explorer: hash a set of sample keys into buckets of an adjustable size, visualize the distribution and chained collisions, and compare a naive modulo hash against a simple mixing hash side by side.
claude-code-tmux · by dev:local · 1 step
physicschartinteractive
A pathfinding visualizer: paint walls on a grid, set start and goal cells, choose breadth-first, depth-first, Dijkstra or A*, and watch the frontier expand and the final shortest path highlight, with a count of cells explored.
claude-code-tmux · by dev:local · 1 step
graphicschartinteractive
A number base explorer: enter a value in any base and see it live in binary, octal, decimal and hexadecimal with a per-digit place-value breakdown and a row of togglable bits that update every representation.
claude-code-tmux · by dev:local · 1 step
interactive
A Unicode and UTF-8 character explorer: type any text and see, per character, its Unicode code point, name, category, and the exact UTF-8 byte sequence, with a total byte count and a highlight of multi-byte characters.
claude-code-tmux · by dev:local · 1 step
textinteractive
A color-space converter: enter or pick a color and see RGB, HSL, HSV and CMYK values update together, with per-channel sliders in each space that all stay in sync and a large swatch plus a hex readout.
claude-code-tmux · by dev:local · 1 step
colortoolsinteractive
A run-length and simple compression explorer: type a string and watch run-length encoding and a basic dictionary (LZ-style) compression build up step by step, showing the encoded output and the achieved compression ratio.
claude-code-tmux · by dev:local · 1 step
textinteractive
A unit converter and scale explorer: convert across length, mass, temperature, time and data-size units live as you type, and show a visual proportional bar comparing the value against a few familiar reference points.
claude-code-tmux · by dev:local · 1 step
toolsinteractive
A moving-average and smoothing explorer: over an embedded noisy time-series, adjust a moving-average window and an exponential smoothing factor and see the raw series and both smoothed curves plotted live on the same chart.
claude-code-tmux · by dev:local · 1 step
chartinteractive
An HTTP request lifecycle explorer: step through DNS resolution, TCP handshake, TLS negotiation, request, server processing, response and browser render as an interactive stepper, drilling into each stage's purpose and typical latency contribution.
claude-code-tmux · by dev:local · 1 step
interactive
A network layers explorer: walk the OSI and TCP/IP models side by side, click each layer for its responsibility and example protocols, and watch an animation of a packet gaining and shedding headers as it moves down and up the stack.
claude-code-tmux · by dev:local · 1 step
interactive
A finite state machine explorer: drive a vending machine and a traffic light as live state diagrams, fire events to trigger transitions, watch invalid events get rejected, and see the current state and transition history highlighted.
claude-code-tmux · by dev:local · 1 step
interactive
A CAP theorem explorer: interactively choose two of consistency, availability and partition tolerance, see the consequence explained, and plot where several well-known databases sit on the tradeoff space.
claude-code-tmux · by dev:local · 1 step
chartinteractive
A color theory explorer: an interactive color wheel where you pick a base hue and reveal harmonies (complementary, analogous, triadic, tetradic), see warm/cool grouping, and read common associations and usage notes for each color family.
claude-code-tmux · by dev:local · 1 step
colorinteractive
A JavaScript event loop explorer: step through a sample program and watch the call stack, macrotask queue and microtask queue fill and drain, so the execution order of timeouts, promises and synchronous code becomes visible.
claude-code-tmux · by dev:local · 1 step
interactive
A periodic table explorer: an interactive periodic table with all elements embedded in-page, filter or color by group, period or state of matter, and click an element to see its atomic number, mass, category and a few key properties.
claude-code-tmux · by dev:local · 1 step
colorinteractive
A solar system explorer: the planets rendered to scale-ish on a canvas with adjustable orbital speed and a toggle between real relative sizes and distances, click a planet for facts like orbital period, moons and diameter, all data embedded.
claude-code-tmux · by dev:local · 1 step
physicsgraphicsinteractive
A recursion and the call stack explorer: pick factorial, Fibonacci or Towers of Hanoi, step forward and back through the recursive calls, and watch stack frames push and pop with their arguments and return values on a live stack diagram.
claude-code-tmux · by dev:local · 1 step
mathinteractive
A resume critique playground: an embedded sample software-engineer resume with inline suggestions on quantifying impact, replacing weak verbs, trimming length and fixing formatting, each approvable or rejectable, with a live revised resume reflecting accepted changes.
claude-code-tmux · by dev:local · 1 step
interactive
A product description critique playground: an embedded e-commerce product blurb with suggestions to lead with benefits over features, cut fluff, and sharpen the call to action, approve or reject each and preview the improved copy.
claude-code-tmux · by dev:local · 1 step
interactive
An email tone critique playground: an embedded draft business email flagged for passive-aggressive phrasing, over-hedging, and a buried ask, each suggestion approvable or rejectable, with a live 'revised email' that reads clearer and more direct.
claude-code-tmux · by dev:local · 1 step
interactive
A commit message critique playground: several embedded sample commit messages flagged against imperative mood, conventional-commit prefixes, and body clarity, with approve, reject and comment controls and a cleaned-up commit log preview.
claude-code-tmux · by dev:local · 1 step
interactive
A prime numbers explorer: enter a number to see a live factor tree and primality result, and render an interactive Sieve of Eratosthenes grid up to an adjustable limit that animates crossing out composites.
claude-code-tmux · by dev:local · 1 step
mathinteractive
A plain-language critique playground: an embedded paragraph of dense terms-of-service legalese with plain-English rewrite suggestions, approve or reject each, and watch a readability score improve as accepted rewrites simplify the text.
claude-code-tmux · by dev:local · 1 step
textinteractive
A bitwise operations playground: enter two integers, apply AND, OR, XOR, NOT and left/right shifts, and see each operand and the result rendered as an interactive grid of bits you can toggle, with the decimal and hex values updating live.
claude-code-tmux · by dev:local · 1 step
interactive
An error-message critique playground: an embedded list of unhelpful application error messages with suggestions to make each specific, actionable and human, approve or reject, and see a before-and-after list of the improved messages.
claude-code-tmux · by dev:local · 1 step
interactive
A slide bullet critique playground: an embedded set of wordy presentation bullets with suggestions to tighten them into scannable headlines and cut redundant points, approve or reject each, and preview a cleaner slide.
claude-code-tmux · by dev:local · 1 step
interactive
A meeting-notes critique playground: an embedded block of messy raw meeting notes with suggestions to extract decisions, action items with owners, and open questions, approve or reject each, and a structured summary assembles itself from the accepted items.
claude-code-tmux · by dev:local · 1 step
interactive
A UX microcopy critique playground: embedded button labels, tooltips and empty-state text flagged for clarity, consistency and voice, each approvable or rejectable, with a small live UI mock reflecting the accepted copy changes.
claude-code-tmux · by dev:local · 1 step
texttoolsinteractive
A job-description critique playground: an embedded job posting flagged for gendered or exclusionary language, vague requirements, and a missing salary range, approve or reject each suggestion, with an inclusivity and clarity score that updates.
claude-code-tmux · by dev:local · 1 step
interactive
A changelog critique playground: an embedded developer-centric changelog with suggestions to reframe entries around user impact, group by type, and follow keep-a-changelog conventions, approve or reject each and preview the polished changelog.
claude-code-tmux · by dev:local · 1 step
interactive
A support-reply critique playground: an embedded customer support draft reply flagged for missing empathy, unclear next steps and an unverified promise, approve or reject each suggestion, and see a live revised reply that lands better.
claude-code-tmux · by dev:local · 1 step
interactive
An abstract critique playground: an embedded research paper abstract with suggestions on structure (context, method, result, significance), jargon reduction and length, approve or reject each, and preview the tightened abstract with a word count.
claude-code-tmux · by dev:local · 1 step
interactive
A survey question critique playground: an embedded set of survey questions flagged for leading wording, double-barreled asks and unbalanced scales, approve or reject each fix, and preview the improved, unbiased questionnaire.
claude-code-tmux · by dev:local · 1 step
interactive
A null-safety diff review: a diff adding guards and optional chaining to a function that crashed on missing fields, with line comments, suggested-change blocks, and an approve or request-changes flow, plus a checklist of remaining unguarded paths.
claude-code-tmux · by dev:local · 1 step
interactive
An async refactor diff review: a diff converting nested callbacks into async/await, reviewed for correct error propagation and no lost rejections, with line-level comments and an approve or request-changes verdict.
claude-code-tmux · by dev:local · 1 step
interactive
A dependency upgrade diff review: a package manifest and lockfile diff performing a breaking major-version bump, with a migration checklist covering changelog review, deprecations and test impact, line comments, and a risk-rated verdict.
claude-code-tmux · by dev:local · 1 step
interactive
A test quality diff review: a diff adding unit tests for an edge case, reviewed for assertion strength, clear naming and independence from implementation details, with line comments and an approve or request-changes verdict.
claude-code-tmux · by dev:local · 1 step
interactive
An API compatibility diff review: a diff renaming and reshaping a JSON response field, reviewed for backward compatibility and versioning, with a breaking-change flag, line comments, and a suggested deprecation path.
claude-code-tmux · by dev:local · 1 step
interactive
A SQL injection fix diff review: a diff replacing string-concatenated queries with parameterized statements, with a severity control, a checklist for other injection sinks, line comments and a copyable verdict.
claude-code-tmux · by dev:local · 1 step
interactive
An error-handling diff review: a diff replacing swallowed exceptions and silent fallbacks with explicit propagation and logging, reviewed for no remaining hidden failures, with line comments and a verdict.
claude-code-tmux · by dev:local · 1 step
interactive
A feature-flag cleanup diff review: a diff removing a now-permanent feature flag and its dead alternate branch, reviewed for completeness with no orphaned code or config left behind, with line comments and a verdict.
claude-code-tmux · by dev:local · 1 step
interactive
A layered REST API code map: routes, controllers, services, repositories and the database as interactive layers; click a layer to see its responsibility and trace a single request flowing down through them and the response coming back up.
claude-code-tmux · by dev:local · 1 step
mapinteractive
A database query execution map: parse, plan, optimize, execute and fetch stages for a sample SELECT; click each stage to see what it produces and where an index changes the plan, with a toggle between an indexed and unindexed run.
claude-code-tmux · by dev:local · 1 step
mapinteractive
A message queue architecture map: producer, broker, exchange, queues and consumers with a toggle between fanout, topic and direct routing; publish a sample message and animate it routing to the matching queues and consumers.
claude-code-tmux · by dev:local · 1 step
mapinteractive
A serverless request map: API gateway, function, and a datastore and queue as components; toggle between a cold-start and a warm path and animate a request flowing through, clicking each component for its role and latency contribution.
claude-code-tmux · by dev:local · 1 step
mapinteractive