What is this?
Kargul Starter is a boilerplate for building web projects with Next.js 16, React 19, and Tailwind CSS 4, shipped with a strict set of build conventions.
Kargul Starter is a boilerplate for building web projects with Next.js 16, React 19, and Tailwind CSS 4, shipped with a strict set of build conventions.Is this a ready-made app or a starter template I build on top of?It is a starter template (boilerplate), not a finished app. You clone it and build your own project on top of it, following the rules in CONVENTIONS.md, which acts as the full spec for how components, sections, and pages must be built.
It is a starter template (boilerplate), not a finished app. You clone it and build your own project on top of it, following the rules in CONVENTIONS.md, which acts as the full spec for how components, sections, and pages must be built.How do I get it running?Run npm run dev to start the dev server, npm run build for a production build, and npm run start to serve that build. npm run lint runs ESLint.
Run npm run dev to start the dev server, npm run build for a production build, and npm run start to serve that build. npm run lint runs ESLint.What's it built on?The stack is Next.js 16, React 19, and Tailwind CSS 4, with ESLint configured for linting.
The stack is Next.js 16, React 19, and Tailwind CSS 4, with ESLint configured for linting.Any catch before I start customizing it?You're expected to read CONVENTIONS.md before writing any component, section, or page — it defines the entire design-system spec (layout tokens, type scale, etc.) that the rest of the repo follows.
You're expected to read CONVENTIONS.md before writing any component, section, or page — it defines the entire design-system spec (layout tokens, type scale, etc.) that the rest of the repo follows.What do I need to configure first on a new project?Set SITENAME, SITEURL, SITEDESCRIPTION and SITEROUTES in lib/seo.ts (everything in robots.ts, sitemap.ts and page metadata derives from these), match the type scale and padding tokens in app/globals.css to your design, add a 1200x630 app/opengraph-image.jpg with an alt text file, and swap out the default Inter fonts.
Set SITENAME, SITEURL, SITEDESCRIPTION and SITEROUTES in lib/seo.ts (everything in robots.ts, sitemap.ts and page metadata derives from these), match the type scale and padding tokens in app/globals.css to your design, add a 1200x630 app/opengraph-image.jpg with an alt text file, and swap out the default Inter fonts.What are the avif and rive npm scripts for?npm run to:avif converts an image to AVIF and reports its inline size cost, npm run extract:avif pulls a poster frame from .webm videos under public/, and npm run frame:rive renders a still poster image from a .riv Rive animation file.
npm run to:avif converts an image to AVIF and reports its inline size cost, npm run extract:avif pulls a poster frame from .webm videos under public/, and npm run frame:rive renders a still poster image from a .riv Rive animation file.What's in AGENTS.md and OPTIMIZATION.md?AGENTS.md holds Next.js version notes meant for coding agents working in the repo, while OPTIMIZATION.md explains (with measurements) why Rive asset loading is gated behind the page's LCP event.
AGENTS.md holds Next.js version notes meant for coding agents working in the repo, while OPTIMIZATION.md explains (with measurements) why Rive asset loading is gated behind the page's LCP event.What are similar projects?workflow-editor, Next-js-Boilerplate, saas-starter, tailwind-nextjs-starter-blog, arc-library, NotionNext, react-starter-kit, rare-ui
workflow-editor, Next-js-Boilerplate, saas-starter, tailwind-nextjs-starter-blog, arc-library, NotionNext, react-starter-kit, rare-uiWhich topics is it in?design-tokens, images, performance-optimization, javascript-framework, starter-kit, eslint, fonts, seo, boilerplate, reactjs, template, tailwindcss
design-tokens, images, performance-optimization, javascript-framework, starter-kit, eslint, fonts, seo, boilerplate, reactjs, template, tailwindcss