Verified Spec-Driven Development (VSDD) is a unified software engineering methodology that fuses three proven paradigms into a single AI-orchestrated pipeline:
Use this structure when writing spec documents. Adapt section depth to the complexity of the feature — not every spec needs every section.
Before writing: Read 1-2 existing specs in the target folder to match local conventions (tone, heading depth, use of tables vs prose, code example density).
# [Feature Name]
| name | description |
|---|---|
deliberate |
Structured iterative brainstorming and planning protocol for features, refactors, and technical designs. Use when the user says "brainstorm", "think through", "deliberate", begins describing a task with background context like "I want to... because... so that...", or references an existing spec file for implementation planning. Produces either an implementation plan (Plan Mode), a spec document, or a decision summary. |
A structured protocol for iterative planning through brainstorming, critical feedback, and convergence.
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width"/> | |
| </head> | |
| <body style="height: 300vh"> | |
| <svg style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);" | |
| width="655" height="209" viewBox="0 0 655 209" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M653 207V62C653 28.8629 626.228 2 593.091 2C519.318 2 391.639 2 292.675 2C270.583 2 252.717 19.9124 252.717 42.0038C252.717 63.5378 252.717 81.7221 252.717 81.7221C252.717 81.7221 252.717 81.7221 252.717 81.7221V167C252.717 189.091 234.808 207 212.717 207H2" | |
| stroke="#EAECF0" stroke-width="4" stroke-linecap="round"/> |
Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.
You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.
You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)
Don't like Next? Here's how to do the same in Gatsby.
| /* | |
| Made by Elly Loel - https://ellyloel.com/ | |
| With inspiration from: | |
| - Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/ | |
| - Andy Bell - https://piccalil.li/blog/a-modern-css-reset/ | |
| - Adam Argyle - https://unpkg.com/open-props@1.3.16/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE | |
| Notes: | |
| - `:where()` is used to lower specificity for easy overriding. | |
| */ |
In the olden days, HTML was prepared by the server, and JavaScript was little more than a garnish, considered by some to have a soapy taste.
After a fashion, it was decided that sometimes our HTML is best rendered by JavaScript, running in a user's browser. While some would decry this new-found intimacy, the age of interactivity had begun.
But all was not right in the world. Somewhere along the way, we had slipped. Our pages went uncrawled by Bing, time to first meaningful paint grew faster than npm, and it became clear: something must be done.
And so it was decided that the applications first forged for the browser would also run on the server. We would render our HTML using the same logic on the server and the browser, and reap the advantages of both worlds. In a confusing series of events a name for this approach was agreed upon: Server-side rendering. What could go wrong?
In dark rooms, in hushed tones, we speak of colours.
| /* Using a JavaScript proxy for a super low code REST client */ | |
| // via https://dev.to/dipsaus9/javascript-lets-create-aproxy-19hg | |
| // also see https://towardsdatascience.com/why-to-use-javascript-proxy-5cdc69d943e3 | |
| // also see https://github.com/fastify/manifetch | |
| // also see https://github.com/flash-oss/allserver | |
| // and https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb | |
| const createApi = (url) => { | |
| return new Proxy({}, { | |
| get(target, key) { |
