starter-structure-cli 0.2.0 → 0.2.2

package/templates/single/react-vite-ts-tailwind/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "__APP_NAME__",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "tailwindcss": "^4.1.0",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.0"
+
+  }
+}

package/templates/single/react-vite-ts-tailwind/src/App.tsx

@@ -0,0 +1,77 @@
+import FeatureGrid from "./components/feature-grid";
+
+const launchTracks = [
+  "Landing page sections with clear content hierarchy",
+  "Tailwind v4 styling with a warm editorial visual language",
+  "Simple component structure that is easy to extend"
+] as const;
+
+const checklist = [
+  { label: "Brand system", value: "Colors, voice, layout" },
+  { label: "Core pages", value: "Home, feature, CTA blocks" },
+  { label: "Launch speed", value: "Fast local edits with Vite" }
+] as const;
+
+export default function App() {
+  const appName = import.meta.env.VITE_APP_NAME || "__APP_NAME__";
+
+  return (
+    <main className="px-6 py-8 md:px-10 lg:px-12">
+      <section className="mx-auto grid min-h-[calc(100vh-4rem)] max-w-6xl gap-10 rounded-[2rem] border border-[var(--line)] bg-[var(--panel)] p-8 shadow-[0_30px_120px_rgba(15,23,42,0.08)] backdrop-blur md:grid-cols-[1.2fr_0.8fr] md:p-12">
+        <div className="flex flex-col justify-between gap-8">
+          <div className="space-y-6">
+            <span className="inline-flex w-fit rounded-full border border-amber-300 bg-amber-50 px-4 py-2 text-sm font-medium text-amber-900">
+              React + Vite + Tailwind starter
+            </span>
+            <div className="space-y-4">
+              <h1 className="max-w-3xl text-5xl font-semibold tracking-tight text-slate-900 md:text-6xl">
+                {appName} ships with a clean marketing shell, not a blank page.
+              </h1>
+              <p className="max-w-2xl text-lg leading-8 text-[var(--muted)]">
+                Start from a deliberate layout with strong spacing, textured color, and clear sections
+                instead of rebuilding the same landing page structure on every project.
+              </p>
+            </div>
+          </div>
+
+          <div className="grid gap-4 sm:grid-cols-3">
+            {launchTracks.map((item) => (
+              <article
+                key={item}
+                className="rounded-3xl border border-white/70 bg-white/75 p-5 text-sm leading-7 text-slate-700 shadow-sm"
+              >
+                {item}
+              </article>
+            ))}
+          </div>
+        </div>
+
+        <aside className="flex flex-col justify-between rounded-[1.75rem] bg-slate-950 p-6 text-slate-50 shadow-[0_20px_80px_rgba(15,23,42,0.3)]">
+          <div className="space-y-4">
+            <p className="text-sm uppercase tracking-[0.24em] text-slate-400">Launch checklist</p>
+            <div className="space-y-3">
+              {checklist.map((item) => (
+                <div
+                  key={item.label}
+                  className="rounded-2xl border border-white/10 bg-white/5 p-4"
+                >
+                  <p className="text-sm text-slate-400">{item.label}</p>
+                  <p className="mt-1 text-base font-medium text-white">{item.value}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="mt-8 rounded-3xl bg-linear-to-br from-orange-400 via-amber-300 to-lime-200 p-[1px]">
+            <div className="rounded-[calc(1.5rem-1px)] bg-slate-950/95 p-5">
+              <p className="text-sm text-slate-400">Ready for the next template layer?</p>
+              <p className="mt-2 text-lg font-medium">Add auth, CMS, or dashboard modules on top of this shell.</p>
+            </div>
+          </div>
+        </aside>
+      </section>
+
+      <FeatureGrid />
+    </main>
+  );
+}

package/templates/single/react-vite-ts-tailwind/src/components/feature-grid/index.tsx

@@ -0,0 +1,32 @@
+const cards = [
+  {
+    title: "Intentional look",
+    body: "Warm neutrals, sharp typography, and layered surfaces give the starter a point of view immediately."
+  },
+  {
+    title: "Fast edits",
+    body: "Sections are plain React components, so changing copy and layout stays straightforward."
+  },
+  {
+    title: "Portable setup",
+    body: "You can turn this into a SaaS page, agency site, waitlist, or docs front page without redoing the base."
+  }
+] as const;
+
+export default function FeatureGrid() {
+  return (
+    <section className="mx-auto mt-10 max-w-6xl">
+      <div className="grid gap-4 md:grid-cols-3">
+        {cards.map((card) => (
+          <article
+            key={card.title}
+            className="rounded-[1.75rem] border border-[var(--line)] bg-white/70 p-6 shadow-sm"
+          >
+            <p className="text-lg font-semibold text-slate-900">{card.title}</p>
+            <p className="mt-3 text-sm leading-7 text-slate-600">{card.body}</p>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/single/react-vite-ts-tailwind/src/index.css

@@ -0,0 +1,47 @@
+@import "tailwindcss";
+
+:root {
+  color-scheme: light;
+  --canvas: #f4efe4;
+  --ink: #1f2937;
+  --muted: #6b7280;
+  --panel: rgba(255, 255, 255, 0.82);
+  --line: rgba(31, 41, 55, 0.12);
+  font-family: "Space Grotesk", "Segoe UI", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+#root {
+  min-height: 100vh;
+}
+
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  color: var(--ink);
+  background:
+    radial-gradient(circle at top left, rgba(240, 107, 70, 0.16), transparent 28%),
+    radial-gradient(circle at 85% 20%, rgba(22, 163, 74, 0.12), transparent 22%),
+    linear-gradient(180deg, #fcfaf5 0%, var(--canvas) 100%);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

package/templates/single/react-vite-ts-tailwind/src/main.tsx

@@ -0,0 +1,11 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import App from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/templates/single/react-vite-ts-tailwind/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/single/react-vite-ts-tailwind/tsconfig.app.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["src"]
+}

package/templates/single/react-vite-ts-tailwind/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/templates/single/react-vite-ts-tailwind/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/single/react-vite-ts-tailwind/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()]
+});

package/templates/single/react-vite-ts-tailwind-landing/.env.example

@@ -0,0 +1 @@
+VITE_APP_NAME=__APP_NAME__

package/templates/single/react-vite-ts-tailwind-landing/README.md

@@ -0,0 +1,18 @@
+# __APP_NAME__
+
+React + Vite + Tailwind landing starter in TypeScript.
+
+## Included
+
+- React powered by Vite
+- Tailwind CSS v4 with the Vite plugin
+- Landing-page focused hero, proof, and offer sections
+- Ready-to-edit copy blocks for fast marketing site setup
+
+## Getting started
+
+```bash
+npm install
+npm run dev
+```
+

package/templates/single/react-vite-ts-tailwind-landing/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Starter project for __APP_NAME__ powered by React, Vite, and Tailwind."
+    />
+    <title>__APP_NAME__</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/single/react-vite-ts-tailwind-landing/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "__APP_NAME__",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "tailwindcss": "^4.1.0",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.0"
+
+  }
+}

package/templates/single/react-vite-ts-tailwind-landing/src/App.tsx

@@ -0,0 +1,107 @@
+const proofPoints = [
+  "Clear hero, benefits, and conversion sections",
+  "Tailwind v4 styling with layered cards and gradients",
+  "Simple React structure for quick content edits"
+] as const;
+
+const offerColumns = [
+  {
+    name: "Launch",
+    summary: "Use this when you need a polished MVP site quickly.",
+    items: ["Hero and proof sections", "CTA-ready layout", "Fast local iteration"]
+  },
+  {
+    name: "Scale",
+    summary: "Extend the shell with product pages, blog routes, or forms.",
+    items: ["Component-driven sections", "Reusable visual system", "Easy copy updates"]
+  }
+] as const;
+
+export default function App() {
+  const appName = import.meta.env.VITE_APP_NAME || "__APP_NAME__";
+
+  return (
+    <main className="px-6 py-8 md:px-10 lg:px-12">
+      <section className="mx-auto max-w-6xl overflow-hidden rounded-[2rem] border border-[var(--line)] bg-[var(--panel)] shadow-[0_30px_120px_rgba(15,23,42,0.08)] backdrop-blur">
+        <div className="grid gap-10 p-8 md:grid-cols-[1.15fr_0.85fr] md:p-12">
+          <div className="space-y-8">
+            <span className="inline-flex w-fit rounded-full border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm font-medium text-emerald-900">
+              Landing page starter
+            </span>
+
+            <div className="space-y-5">
+              <h1 className="max-w-3xl text-5xl font-semibold tracking-tight text-slate-900 md:text-6xl">
+                {appName} starts with a real marketing page, not a placeholder.
+              </h1>
+              <p className="max-w-2xl text-lg leading-8 text-[var(--muted)]">
+                Use this starter when you want a clean product or agency landing page with
+                strong hierarchy, clear calls to action, and room to expand without redoing
+                the basics.
+              </p>
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-3">
+              {proofPoints.map((item) => (
+                <article
+                  key={item}
+                  className="rounded-3xl border border-white/70 bg-white/75 p-5 text-sm leading-7 text-slate-700 shadow-sm"
+                >
+                  {item}
+                </article>
+              ))}
+            </div>
+          </div>
+
+          <aside className="rounded-[1.75rem] bg-slate-950 p-6 text-slate-50 shadow-[0_20px_80px_rgba(15,23,42,0.3)]">
+            <p className="text-sm uppercase tracking-[0.24em] text-slate-400">Conversion flow</p>
+            <div className="mt-5 space-y-4">
+              {offerColumns.map((column) => (
+                <section key={column.name} className="rounded-3xl border border-white/10 bg-white/5 p-5">
+                  <div className="flex items-center justify-between gap-4">
+                    <h2 className="text-lg font-semibold text-white">{column.name}</h2>
+                    <span className="rounded-full bg-white/10 px-3 py-1 text-xs uppercase tracking-[0.2em] text-slate-300">
+                      Ready
+                    </span>
+                  </div>
+                  <p className="mt-3 text-sm leading-7 text-slate-300">{column.summary}</p>
+                  <ul className="mt-4 space-y-2 text-sm text-slate-200">
+                    {column.items.map((item) => (
+                      <li key={item} className="rounded-2xl bg-white/5 px-4 py-3">
+                        {item}
+                      </li>
+                    ))}
+                  </ul>
+                </section>
+              ))}
+            </div>
+          </aside>
+        </div>
+
+        <section className="border-t border-[var(--line)] px-8 py-8 md:px-12">
+          <div className="grid gap-4 md:grid-cols-3">
+            <article className="rounded-[1.75rem] bg-white/70 p-6 shadow-sm">
+              <p className="text-sm uppercase tracking-[0.2em] text-slate-500">Narrative</p>
+              <p className="mt-3 text-base leading-7 text-slate-700">
+                Replace the copy blocks with your positioning, customer pain points, and feature
+                highlights.
+              </p>
+            </article>
+            <article className="rounded-[1.75rem] bg-white/70 p-6 shadow-sm">
+              <p className="text-sm uppercase tracking-[0.2em] text-slate-500">Sections</p>
+              <p className="mt-3 text-base leading-7 text-slate-700">
+                Add testimonials, pricing, FAQs, or integrations without changing the visual
+                system.
+              </p>
+            </article>
+            <article className="rounded-[1.75rem] bg-white/70 p-6 shadow-sm">
+              <p className="text-sm uppercase tracking-[0.2em] text-slate-500">Next layer</p>
+              <p className="mt-3 text-base leading-7 text-slate-700">
+                Connect forms, CMS content, or auth flows once the landing shell is approved.
+              </p>
+            </article>
+          </div>
+        </section>
+      </section>
+    </main>
+  );
+}

package/templates/single/react-vite-ts-tailwind-landing/src/components/feature-grid/index.tsx

@@ -0,0 +1,32 @@
+const cards = [
+  {
+    title: "Intentional look",
+    body: "Warm neutrals, sharp typography, and layered surfaces give the starter a point of view immediately."
+  },
+  {
+    title: "Fast edits",
+    body: "Sections are plain React components, so changing copy and layout stays straightforward."
+  },
+  {
+    title: "Portable setup",
+    body: "You can turn this into a SaaS page, agency site, waitlist, or docs front page without redoing the base."
+  }
+] as const;
+
+export default function FeatureGrid() {
+  return (
+    <section className="mx-auto mt-10 max-w-6xl">
+      <div className="grid gap-4 md:grid-cols-3">
+        {cards.map((card) => (
+          <article
+            key={card.title}
+            className="rounded-[1.75rem] border border-[var(--line)] bg-white/70 p-6 shadow-sm"
+          >
+            <p className="text-lg font-semibold text-slate-900">{card.title}</p>
+            <p className="mt-3 text-sm leading-7 text-slate-600">{card.body}</p>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/single/react-vite-ts-tailwind-landing/src/index.css

@@ -0,0 +1,47 @@
+@import "tailwindcss";
+
+:root {
+  color-scheme: light;
+  --canvas: #f4efe4;
+  --ink: #1f2937;
+  --muted: #6b7280;
+  --panel: rgba(255, 255, 255, 0.82);
+  --line: rgba(31, 41, 55, 0.12);
+  font-family: "Space Grotesk", "Segoe UI", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+#root {
+  min-height: 100vh;
+}
+
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  color: var(--ink);
+  background:
+    radial-gradient(circle at top left, rgba(240, 107, 70, 0.16), transparent 28%),
+    radial-gradient(circle at 85% 20%, rgba(22, 163, 74, 0.12), transparent 22%),
+    linear-gradient(180deg, #fcfaf5 0%, var(--canvas) 100%);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

package/templates/single/react-vite-ts-tailwind-landing/src/main.tsx

@@ -0,0 +1,11 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import App from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/templates/single/react-vite-ts-tailwind-landing/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/single/react-vite-ts-tailwind-landing/tsconfig.app.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["src"]
+}

package/templates/single/react-vite-ts-tailwind-landing/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/templates/single/react-vite-ts-tailwind-landing/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/single/react-vite-ts-tailwind-landing/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()]
+});

package/templates/single/vue-vite-tailwind/.env.example

@@ -0,0 +1 @@
+VITE_APP_NAME=__APP_NAME__

package/templates/single/vue-vite-tailwind/README.md

@@ -0,0 +1,18 @@
+# __APP_NAME__
+
+Vue + Vite + Tailwind starter in JavaScript.
+
+## Included
+
+- Vue 3 powered by Vite
+- Tailwind CSS v4 with the Vite plugin
+- A polished single-page starter layout
+- Ready-to-edit sections and shared styles
+
+## Getting started
+
+```bash
+npm install
+npm run dev
+```
+

package/templates/single/vue-vite-tailwind/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Starter project for __APP_NAME__ powered by Vue, Vite, and Tailwind."
+    />
+    <title>__APP_NAME__</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/templates/single/vue-vite-tailwind/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "__APP_NAME__",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.13"
+
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "tailwindcss": "^4.1.0",
+    "vite": "^6.2.0"
+
+  }
+}