sales-crm README

The project's README from github.com/kargulstudio/sales-crm. 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

sales-crm (kargulstudio/sales-crm)

Searching Database…

这是什么?Kargul Starter 是一个用于构建 Web 项目的样板工程,基于 Next.js 16、React 19 和 Tailwind CSS 4,并附带一套严格的构建规范。
这是现成的应用,还是供我在其上构建的起步模板?它是一个起步模板(样板工程),不是成品应用。你克隆它并在其上构建自己的项目,遵循 CONVENTIONS.md 中的规则——该文件是组件、区块和页面必须如何构建的完整规范。
怎么把它跑起来?运行 npm run dev 启动开发服务器,npm run build 做生产构建,npm run start 为该构建提供服务。npm run lint 运行 ESLint。
它基于什么构建?技术栈是 Next.js 16、React 19 和 Tailwind CSS 4,并配置了 ESLint 用于代码检查。
开始自定义之前有什么要注意的吗?在编写任何组件、区块或页面之前,你应当先读 CONVENTIONS.md——它定义了仓库其余部分所遵循的整套设计系统规范(布局令牌、字号层级等)。
在新项目上我首先需要配置什么?在 lib/seo.ts 中设置 SITENAME、SITEURL、SITEDESCRIPTION 和 SITEROUTES(robots.ts、sitemap.ts 和页面元数据中的所有内容都由这些派生),把 app/globals.css 中的字号层级和内边距令牌调成符合你的设计,添加 1200x630 的 app/opengraph-image.jpg 及配套的 alt 文本文件,并替换默认的 Inter 字体。
avif 和 rive 这两个 npm 脚本是做什么的?npm run to:avif 把图片转换为 AVIF 并报告其内联体积开销;npm run extract:avif 从 public/ 下的 .webm 视频中提取海报帧;npm run frame:rive 从 .riv 的 Rive 动画文件渲染一张静态海报图。
AGENTS.md 和 OPTIMIZATION.md 里写了什么?AGENTS.md 收录面向在仓库中工作的编码智能体的 Next.js 版本说明,而 OPTIMIZATION.md 则解释(附测量数据)为什么 Rive 资源的加载被安排在页面的 LCP 事件之后。
Size
1.4 MB
Stars
1.7K
Updated
CommitOct 06
Age
14d
Commits · 90 Days