npm - starter-structure-cli - Versions diffs - 0.2.1 → 0.2.2 - Mend

starter-structure-cli 0.2.1 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1210) hide show

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

@@ -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.jsx"></script>
+  </body>
+</html>

package/templates/single/react-vite-tailwind-landing/package.json ADDED Viewed

@@ -0,0 +1,23 @@
+{
+  "name": "__APP_NAME__",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "tailwindcss": "^4.1.0",
+    "vite": "^6.2.0"
+  }
+}

package/templates/single/react-vite-tailwind-landing/src/App.jsx ADDED Viewed

@@ -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"
+];
+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"]
+  }
+];
+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-tailwind-landing/src/components/feature-grid/index.jsx ADDED Viewed

@@ -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."
+  }
+];
+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-tailwind-landing/src/index.css ADDED Viewed

@@ -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-tailwind-landing/src/main.jsx ADDED Viewed

@@ -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-tailwind-landing/vite.config.js ADDED Viewed

@@ -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-shadcn-tailwind/.env.example ADDED Viewed

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

package/templates/single/react-vite-ts-shadcn-tailwind/README.md ADDED Viewed

@@ -0,0 +1,18 @@
+# __APP_NAME__
+React + Vite + shadcn/ui-style Tailwind starter in TypeScript.
+## Included
+- React powered by Vite
+- Tailwind CSS v4 with CSS variables
+- Reusable `cn` helper and a button primitive
+- Dashboard-style starter screen to build on
+## Getting started
+```bash
+npm install
+npm run dev
+```

package/templates/single/react-vite-ts-shadcn-tailwind/components.json ADDED Viewed

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "ui": "@/components/ui",
+    "utils": "@/lib/utils"
+  }
+}

package/templates/single/react-vite-ts-shadcn-tailwind/index.html ADDED Viewed

@@ -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-shadcn-tailwind/package.json ADDED Viewed

@@ -0,0 +1,31 @@
+{
+  "name": "__APP_NAME__",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+    "tailwind-merge": "^2.6.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.0",
+    "@types/node": "^22.13.10",
+    "@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-shadcn-tailwind/src/App.tsx ADDED Viewed

@@ -0,0 +1,59 @@
+import StatsPanel from "@/components/stats-panel";
+import { Button } from "@/components/ui/button";
+const workstreams = [
+  { name: "Onboarding", state: "Ready", tone: "text-emerald-600" },
+  { name: "Billing", state: "Draft", tone: "text-amber-600" },
+  { name: "Insights", state: "Review", tone: "text-sky-600" }
+] as const;
+export default function App() {
+  const appName = import.meta.env.VITE_APP_NAME || "__APP_NAME__";
+  return (
+    <main className="px-5 py-8 md:px-10">
+      <section className="mx-auto max-w-6xl overflow-hidden rounded-[2rem] border border-[var(--border)] bg-white/85 shadow-[0_30px_120px_rgba(15,23,42,0.08)] backdrop-blur">
+        <div className="grid gap-10 p-8 md:grid-cols-[1.1fr_0.9fr] md:p-12">
+          <div className="space-y-8">
+            <div className="space-y-5">
+              <span className="inline-flex rounded-full border border-sky-200 bg-sky-50 px-3 py-1 text-sm font-medium text-sky-900">
+                shadcn/ui-style React starter
+              </span>
+              <div className="space-y-4">
+                <h1 className="max-w-2xl text-5xl font-semibold tracking-tight text-slate-950 md:text-6xl">
+                  {appName} starts with reusable UI primitives instead of one-off markup.
+                </h1>
+                <p className="max-w-xl text-lg leading-8 text-[var(--muted-foreground)]">
+                  Use a button primitive, utility helpers, CSS variables, and a dashboard-style page shell
+                  as the base for admin panels, internal tools, or product dashboards.
+                </p>
+              </div>
+            </div>
+            <div className="flex flex-wrap gap-3">
+              <Button size="lg">Create project</Button>
+              <Button size="lg" variant="secondary">Preview components</Button>
+            </div>
+            <div className="grid gap-3 rounded-3xl bg-[var(--muted)] p-4">
+              {workstreams.map((item) => (
+                <div
+                  key={item.name}
+                  className="flex items-center justify-between rounded-2xl bg-white px-4 py-3 shadow-sm"
+                >
+                  <div>
+                    <p className="font-medium text-slate-950">{item.name}</p>
+                    <p className="text-sm text-[var(--muted-foreground)]">Current module status</p>
+                  </div>
+                  <span className={`text-sm font-semibold ${item.tone}`}>{item.state}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+          <StatsPanel />
+        </div>
+      </section>
+    </main>
+  );
+}

package/templates/single/react-vite-ts-shadcn-tailwind/src/components/stats-panel/index.tsx ADDED Viewed

@@ -0,0 +1,30 @@
+import { Button } from "@/components/ui/button";
+const summary = [
+  { label: "Active seats", value: "1,284" },
+  { label: "Weekly conversions", value: "18.4%" },
+  { label: "Response time", value: "94 ms" }
+] as const;
+export default function StatsPanel() {
+  return (
+    <aside className="rounded-[1.75rem] border border-[var(--border)] bg-slate-950 p-6 text-slate-50">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <p className="text-sm uppercase tracking-[0.24em] text-slate-400">Overview</p>
+          <h2 className="mt-3 text-2xl font-semibold">UI blocks ready for the next screen.</h2>
+        </div>
+        <Button variant="secondary" size="sm">Export</Button>
+      </div>
+      <div className="mt-8 grid gap-3">
+        {summary.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-2 text-2xl font-semibold text-white">{item.value}</p>
+          </div>
+        ))}
+      </div>
+    </aside>
+  );
+}

package/templates/single/react-vite-ts-shadcn-tailwind/src/components/ui/button/index.tsx ADDED Viewed

@@ -0,0 +1,33 @@
+import { ButtonHTMLAttributes } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-xl font-medium transition-colors focus-visible:outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--primary)] text-[var(--primary-foreground)] hover:opacity-90 focus-visible:ring-[var(--ring)]",
+        secondary: "bg-[var(--secondary)] text-[var(--secondary-foreground)] hover:bg-slate-200 focus-visible:ring-[var(--ring)]",
+        ghost: "bg-transparent text-[var(--foreground)] hover:bg-slate-100 focus-visible:ring-[var(--ring)]"
+      },
+      size: {
+        sm: "h-9 px-3 text-sm",
+        md: "h-10 px-4 text-sm",
+        lg: "h-11 px-5 text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>;
+export function Button({ className, variant, size, ...props }: ButtonProps) {
+  return <button className={cn(buttonVariants({ variant, size }), className)} {...props} />;
+}

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

@@ -0,0 +1,51 @@
+@import "tailwindcss";
+:root {
+  --background: oklch(0.985 0.002 240);
+  --foreground: oklch(0.215 0.018 264);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.215 0.018 264);
+  --primary: oklch(0.61 0.14 223);
+  --primary-foreground: oklch(0.985 0.01 240);
+  --secondary: oklch(0.94 0.01 240);
+  --secondary-foreground: oklch(0.28 0.02 262);
+  --muted: oklch(0.95 0.01 240);
+  --muted-foreground: oklch(0.48 0.02 260);
+  --border: oklch(0.9 0.01 250);
+  --ring: oklch(0.61 0.14 223 / 0.36);
+  font-family: "Manrope", "Segoe UI", sans-serif;
+}
+* {
+  border-color: var(--border);
+}
+* {
+  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;
+  background:
+    radial-gradient(circle at top, rgba(59, 130, 246, 0.18), transparent 30%),
+    linear-gradient(180deg, #f8fafc 0%, #eef2ff 50%, #f8fafc 100%);
+  color: var(--foreground);
+}

package/templates/single/react-vite-ts-shadcn-tailwind/src/lib/utils/index.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

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

@@ -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-shadcn-tailwind/src/vite-env.d.ts ADDED Viewed

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

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

@@ -0,0 +1,24 @@
+{
+  "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,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"]
+}

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

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

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

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

package/templates/single/react-vite-ts-shadcn-tailwind/vite.config.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src")
+    }
+  }
+});

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

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

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

@@ -0,0 +1,18 @@
+# __APP_NAME__
+React + Vite + Tailwind starter in TypeScript.
+## Included
+- React 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/react-vite-ts-tailwind/index.html ADDED Viewed

@@ -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>