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…

这是什么?这是一个 Next.js 起步样板,搭配 Next.js 16、React 19 和 Tailwind CSS 4,围绕 CONVENTIONS.md 中记录的一套严格的构建约定构建。
这是我要安装的库,还是克隆后在其之上开发的起步仓库?它是一个起步/样板仓库,你克隆它并在其上构建自己的项目,而不是通过 npm install 装进现有应用的包。
怎么让它跑起来?克隆仓库,然后运行 npm run dev 启动开发服务器,npm run build 做生产构建,npm run start 运行该构建。
在它基础上开发前需要什么?只需要能运行脚本的 Node/npm——而且在编写任何组件、区块或页面之前,你必须先读 CONVENTIONS.md,因为整个仓库都围绕它构建。
能不能不做任何阅读就直接开始加组件?不行——CONVENTIONS.md 被称为整个仓库构建方式的全部规范,所以在动任何组件、区块或页面之前必须先读它。
npm run to:avif 是做什么的?它把图片转换成 AVIF 格式并报告其内联字节开销,与仓库的图片优化规则(规则 11)相关联。
AGENTS.md 是做什么用的?它存放面向在这个仓库中工作的 AI 编程智能体的 Next.js 版本说明,与面向人类的 CONVENTIONS.md 分开。
为什么 Rive 动画要放在 LCP 之后?OPTIMIZATION.md 记录了测量数据,说明为什么该资源的 Rive 加载要延迟到最大内容绘制(LCP)之后,以保持页面性能不受损。
Size
0.4 MB
Stars
431
Updated
CommitSep 16
Age
1mo
Commits · 90 Days