workflow-editor README

The project's README from github.com/kargulstudio/workflow-editor. As one markdown file: README.md.

Kargul Starter

Next.js 16 + React 19 + Tailwind CSS 4 boilerplate. Read CONVENTIONS.md before writing any component, section, or page — it is the whole spec for how this repo is built.

Getting started

npm install
npm run dev

Open http://localhost:3000.

Script What it does
npm run dev Start the dev server
npm run build Production build
npm run start Serve the production build
npm run lint ESLint
npm run to:avif Convert an image to AVIF and report its inline cost — rule 11
npm run extract:avif Pull the first frame of every .webm under public/ as a poster
npm run frame:rive Render a still from a .riv file for use as its poster

First things to set on a new project

  1. lib/seo.ts — SITE_NAME, SITE_URL, SITE_DESCRIPTION, SITE_ROUTES. Everything in app/robots.ts, app/sitemap.ts, app/llms.txt/route.ts and every page's metadata derives from these (rule 18). Set NEXT_PUBLIC_SITE_URL in the environment to override the URL per deploy.
  2. app/globals.css — match the @layer base type scale and the --padding-section-* tokens to the design before building anything (rules 1 and 3).
  3. app/opengraph-image.jpg — 1200×630, with an opengraph-image.alt.txt beside it.
  4. Fonts — app/layout.tsx ships Inter + a local Inter Display; swap them for the design's typeface.

Docs

File What's in it
CONVENTIONS.md The build rules. Read first.
AGENTS.md Next.js version notes for agents
OPTIMIZATION.md Why Asset's Rive loading is gated behind LCP, with the measurements

workflow-editor (kargulstudio/workflow-editor)

Searching Database…

What is this?This is a Next.js starter boilerplate pairing Next.js 16, React 19 and Tailwind CSS 4, built around a strict set of build conventions documented in CONVENTIONS.md.
Is this a library I install, or a starter repo I clone and build on?It is a starter/boilerplate repo you clone and build your own project on top of, not a package you npm install into an existing app.
How do I get it running?Clone the repo, then run npm run dev to start the dev server, npm run build for a production build, and npm run start to serve that build.
What do I need before building on it?Just Node/npm to run the scripts — and before writing any component, section, or page you must read CONVENTIONS.md, since the whole repo is built around it.
Can I just start adding components without reading anything first?No — CONVENTIONS.md is described as the entire spec for how the repo is built, so it has to be read before touching any component, section, or page.
What does npm run to:avif do?It converts an image to AVIF format and reports its inline byte cost, which ties into the repo's image-optimization rule (rule 11).
What is AGENTS.md for?It holds Next.js version notes aimed at AI coding agents working in this repo, separate from the human-facing CONVENTIONS.md.
Why is the Rive animation gated behind LCP?OPTIMIZATION.md documents measurements showing why the asset's Rive loading is delayed until after Largest Contentful Paint, to keep page performance intact.
Size
0.4 MB
Stars
432
Updated
CommitSep 16
Age
1mo
Commits · 90 Days