create-agntcms-app 0.2.1

package/dist/template/styles/typography.css

@@ -0,0 +1,469 @@
+.prose:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    /* Brand-aligned token wiring. DS rules:
+     *   body  = text-primary (off-white #E8E6DC), not text-tertiary
+     *   links = teal (interactive)
+     *   code  = teal on teal-dim surface (#0D2420)
+     *   quote left-border = teal
+     */
+    --tw-prose-body: var(--color-text-primary);
+    --tw-prose-headings: var(--color-text-primary);
+    --tw-prose-lead: var(--color-text-secondary);
+    --tw-prose-links: var(--color-text-brand-primary);
+    --tw-prose-bold: var(--color-text-primary);
+    --tw-prose-counters: var(--color-text-secondary);
+    --tw-prose-bullets: var(--color-text-secondary);
+    --tw-prose-hr: var(--color-border-secondary);
+    --tw-prose-quotes: var(--color-text-primary);
+    --tw-prose-quote-borders: var(--color-border-brand);
+    --tw-prose-captions: var(--color-text-tertiary);
+    --tw-prose-code: var(--color-text-brand-primary);
+    --tw-prose-pre-code: var(--color-text-brand-primary);
+    --tw-prose-pre-bg: var(--color-bg-brand-primary);
+    --tw-prose-th-borders: var(--color-border-primary);
+    --tw-prose-td-borders: var(--color-border-secondary);
+
+    /* Base */
+    color: var(--tw-prose-body);
+    font-family: var(--font-body);
+    font-size: var(--text-md);
+    line-height: var(--text-md--line-height);
+}
+
+.prose :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    /* Text */
+    &:where(p) {
+        margin-top: calc(var(--spacing) * 4);
+        margin-bottom: calc(var(--spacing) * 4);
+    }
+
+    &:where([class~="lead"]) {
+        font-size: var(--text-md);
+        line-height: var(--text-md--line-height);
+        margin-top: 1.2em;
+        margin-bottom: 1.2em;
+    }
+
+    /* Lists */
+    &:where(ol) {
+        list-style-type: decimal;
+
+        margin-top: calc(var(--spacing) * 4);
+        margin-bottom: calc(var(--spacing) * 4);
+        padding-inline-start: calc(var(--spacing) * 5.75);
+    }
+    &:where(ul) {
+        list-style-type: disc;
+
+        margin-top: calc(var(--spacing) * 4);
+        margin-bottom: calc(var(--spacing) * 4);
+        padding-inline-start: calc(var(--spacing) * 5.75);
+    }
+    &:where(li) {
+        margin-top: calc(var(--spacing) * 2);
+        margin-bottom: calc(var(--spacing) * 2);
+    }
+    &:where(ol > li) {
+        padding-inline-start: 1px;
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    &:where(ul > li) {
+        padding-inline-start: 1px;
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    /* Horizontal rules */
+    &:where(hr) {
+        margin-top: calc(var(--spacing) * 8);
+        margin-bottom: calc(var(--spacing) * 8);
+    }
+
+    /* Quotes */
+    &:where(blockquote) {
+        color: var(--tw-prose-quotes);
+
+        border-left-width: 2px;
+        border-left-color: var(--tw-prose-quote-borders);
+
+        padding-inline-start: 0;
+        margin-top: calc(var(--spacing) * 10);
+        margin-bottom: calc(var(--spacing) * 10);
+    }
+    &:where(blockquote p) {
+        margin: 0;
+        font-weight: 500;
+        font-style: italic;
+
+        font-size: var(--text-xl);
+        line-height: var(--text-xl--line-height);
+    }
+    &:where(blockquote p:first-of-type::before) {
+        content: open-quote;
+    }
+    &:where(blockquote p:last-of-type::after) {
+        content: close-quote;
+    }
+
+    /* Headings — Satoshi (display) with DS-mandated tracking.
+     * Tracking values are non-negotiable per BRAND.md. */
+    &:where(h1) {
+        color: var(--tw-prose-headings);
+        font-family: var(--font-display);
+        font-weight: 500;
+        letter-spacing: -0.04em;
+
+        font-size: var(--text-display-sm);
+        line-height: var(--text-display-sm--line-height);
+        margin-bottom: calc(var(--spacing) * 5);
+        margin-top: calc(var(--spacing) * 10);
+    }
+    &:where(h2) {
+        color: var(--tw-prose-headings);
+        font-family: var(--font-display);
+        font-weight: 500;
+        letter-spacing: -0.02em;
+
+        font-size: var(--text-display-xs);
+        line-height: var(--text-display-xs--line-height);
+        margin-bottom: calc(var(--spacing) * 4);
+        margin-top: calc(var(--spacing) * 8);
+    }
+    &:where(h3) {
+        color: var(--tw-prose-headings);
+        font-family: var(--font-display);
+        font-weight: 500;
+        letter-spacing: -0.01em;
+
+        font-size: var(--text-xl);
+        line-height: var(--text-xl--line-height);
+        margin-bottom: calc(var(--spacing) * 3);
+        margin-top: calc(var(--spacing) * 8);
+    }
+    &:where(h4) {
+        color: var(--tw-prose-headings);
+        font-family: var(--font-display);
+        font-weight: 500;
+        letter-spacing: -0.01em;
+
+        font-size: var(--text-lg);
+        line-height: var(--text-lg--line-height);
+        margin-bottom: calc(var(--spacing) * 2);
+        margin-top: calc(var(--spacing) * 5);
+    }
+
+    &:where(h2 + *) {
+        margin-top: 0;
+    }
+    &:where(h3 + *) {
+        margin-top: 0;
+    }
+    &:where(h4 + *) {
+        margin-top: 0;
+    }
+
+    &:where(h1 strong) {
+        font-weight: 900;
+        color: inherit;
+    }
+    &:where(h2 strong) {
+        font-weight: 800;
+        color: inherit;
+    }
+    &:where(h3 strong) {
+        font-weight: 700;
+        color: inherit;
+    }
+    &:where(h4 strong) {
+        font-weight: 700;
+        color: inherit;
+    }
+
+    /* Media */
+
+    &:where(img) {
+        border-radius: var(--radius-xl);
+        width: 100%;
+        object-fit: cover;
+
+        margin-top: calc(var(--spacing) * 8);
+        margin-bottom: calc(var(--spacing) * 8);
+    }
+    &:where(video) {
+        margin-top: calc(var(--spacing) * 8);
+        margin-bottom: calc(var(--spacing) * 8);
+    }
+    &:where(figure) {
+        margin-top: calc(var(--spacing) * 10);
+        margin-bottom: calc(var(--spacing) * 10);
+    }
+    &:where(figure > *) {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    &:where(figure:has(> blockquote)) {
+        border-left-width: 2px;
+        border-left-color: var(--tw-prose-quote-borders);
+        padding-top: calc(var(--spacing) * 2);
+        padding-bottom: calc(var(--spacing) * 2);
+
+        padding-inline-start: calc(var(--spacing) * 4);
+    }
+    &:where(figure:has(> blockquote) blockquote) {
+        padding-inline-start: 0;
+        border: none;
+    }
+    &:where(img + figcaption) {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--spacing) * 1.5);
+    }
+    &:where(figcaption) {
+        color: var(--tw-prose-captions);
+
+        font-size: var(--text-sm);
+        line-height: var(--text-sm--line-height);
+        margin-top: calc(var(--spacing) * 3);
+    }
+    &:where(cite) {
+        font-style: normal;
+    }
+
+    /* Inline elements */
+    &:where(a:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)) {
+        font-weight: 400;
+        text-decoration: underline;
+        text-underline-offset: 3px;
+    }
+
+    &:where(a:focus-visible) {
+        border-radius: var(--radius-sm);
+        outline: 2px solid var(--color-focus-ring);
+        outline-offset: 2px;
+    }
+    &:where(:is(h1, h2, h3) a) {
+        color: var(--tw-prose-headings);
+        font-weight: inherit;
+        text-decoration: none;
+    }
+
+    /* Inline code element — DS: JetBrains Mono, teal text on teal-dim bg,
+     * weight 400, 4px radius, 2px×8px padding. No box-shadow. */
+    &:where(code:not(pre code)) {
+        font-family: var(--font-mono);
+        color: var(--tw-prose-code);
+        font-size: 0.8125rem; /* 13px per DS */
+        line-height: 1.25rem;
+        font-weight: 400;
+        border-radius: var(--radius-sm);
+        padding: 2px 8px;
+        background: var(--tw-prose-pre-bg);
+
+        &::before,
+        &::after {
+            content: "";
+        }
+    }
+}
+
+.prose.prose-centered-quote :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    &:where(blockquote) {
+        padding-inline-start: 0px !important;
+        border-left: none;
+        text-align: center;
+    }
+    &:where(figure:has(> blockquote)) {
+        border-left: none;
+        padding-inline-start: 0px !important;
+        padding-top: 0px !important;
+        padding-bottom: 0px !important;
+        text-align: center;
+    }
+}
+
+.prose.prose-minimal-quote :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    &:where(blockquote) {
+        border-left: none;
+        padding-inline-start: 0px !important;
+    }
+    &:where(figure:has(> blockquote)) {
+        border-left: none;
+        padding-inline-start: 0px !important;
+    }
+}
+
+.prose.md\:prose-lg:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    @media (width >= 48rem /* 768px */) {
+        /* Base */
+        font-size: var(--text-lg);
+        line-height: var(--text-lg--line-height);
+    }
+}
+
+.prose.md\:prose-lg :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    @media (width >= 48rem /* 768px */) {
+        /* Text */
+        &:where(p) {
+            margin-top: calc(var(--spacing) * 4.5);
+            margin-bottom: calc(var(--spacing) * 4.5);
+        }
+
+        &:where([class~="lead"]) {
+            font-size: var(--text-xl);
+            line-height: var(--text-xl--line-height);
+            margin-top: 1.09em;
+            margin-bottom: 1.09em;
+        }
+
+        /* Lists */
+        &:where(ol) {
+            margin-top: calc(var(--spacing) * 4.5);
+            margin-bottom: calc(var(--spacing) * 4.5);
+            padding-inline-start: calc(var(--spacing) * 6.5);
+        }
+        &:where(ul) {
+            margin-top: calc(var(--spacing) * 4.5);
+            margin-bottom: calc(var(--spacing) * 4.5);
+            padding-inline-start: calc(var(--spacing) * 6.5);
+        }
+
+        &:where(ol > li) {
+            padding-inline-start: 1px;
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+        &:where(ul > li) {
+            padding-inline-start: 1px;
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+
+        /* Horizontal rules */
+        &:where(hr) {
+            margin-top: calc(var(--spacing) * 8);
+            margin-bottom: calc(var(--spacing) * 8);
+        }
+
+        /* Quotes */
+        &:where(blockquote) {
+            padding-inline-start: 0;
+            margin-top: calc(var(--spacing) * 12);
+            margin-bottom: calc(var(--spacing) * 12);
+        }
+        &:where(blockquote p) {
+            margin: 0;
+
+            font-size: var(--text-display-xs);
+            line-height: var(--text-display-xs--line-height);
+        }
+
+        /* Headings — keep DS font + tracking on the larger md:prose-lg variant */
+        &:where(h1) {
+            font-family: var(--font-display);
+            letter-spacing: -0.04em;
+            font-size: var(--text-display-md);
+            line-height: var(--text-display-md--line-height);
+            margin-bottom: calc(var(--spacing) * 6);
+            margin-top: calc(var(--spacing) * 12);
+        }
+        &:where(h2) {
+            font-family: var(--font-display);
+            letter-spacing: -0.02em;
+            font-size: var(--text-display-sm);
+            line-height: var(--text-display-sm--line-height);
+            margin-bottom: calc(var(--spacing) * 5);
+            margin-top: calc(var(--spacing) * 10);
+        }
+        &:where(h3) {
+            font-family: var(--font-display);
+            letter-spacing: -0.01em;
+            font-size: var(--text-display-xs);
+            line-height: var(--text-display-xs--line-height);
+            margin-bottom: calc(var(--spacing) * 4);
+            margin-top: calc(var(--spacing) * 8);
+        }
+        &:where(h4) {
+            font-family: var(--font-display);
+            letter-spacing: -0.01em;
+            font-size: var(--text-xl);
+            line-height: var(--text-xl--line-height);
+            margin-bottom: calc(var(--spacing) * 3);
+            margin-top: calc(var(--spacing) * 8);
+        }
+        &:where(h2 + *) {
+            margin-top: 0;
+        }
+        &:where(h3 + *) {
+            margin-top: 0;
+        }
+        &:where(h4 + *) {
+            margin-top: 0;
+        }
+
+        &:where(figure) {
+            margin-top: calc(var(--spacing) * 12);
+            margin-bottom: calc(var(--spacing) * 12);
+        }
+        &:where(figure > *) {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+        &:where(figure:has(> blockquote)) {
+            padding-inline-start: calc(var(--spacing) * 5);
+        }
+        &:where(figure > blockquote + figcaption) {
+            font-size: var(--text-md);
+            line-height: var(--text-md--line-height);
+        }
+
+        &:where(figcaption) {
+            margin-top: calc(var(--spacing) * 4);
+        }
+
+        /* Inline elements */
+        &:where(a:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)) {
+            font-weight: 400;
+            text-decoration: underline;
+            text-underline-offset: 3px;
+        }
+        &:where(:is(h1, h2, h3) a) {
+            color: var(--tw-prose-headings);
+            font-weight: inherit;
+            text-decoration: none;
+        }
+
+        /* Inline code element — keep DS treatment in md:prose-lg too */
+        &:where(code:not(pre code)) {
+            font-family: var(--font-mono);
+            color: var(--tw-prose-code);
+            font-size: 0.8125rem;
+            line-height: 1.25rem;
+            font-weight: 400;
+            border-radius: var(--radius-sm);
+            padding: 2px 8px;
+            background: var(--tw-prose-pre-bg);
+        }
+    }
+}
+
+/* Remove top margin from first element */
+.prose > :first-child:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-top: 0;
+}
+.prose > :last-child:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    margin-bottom: 0;
+}
+
+/* Manifesto / long-form essay typography. DS rules: Source Serif 4, 17px,
+ * line-height 1.75, max 68ch measure. Apply via `prose prose-essay`. */
+.prose.prose-essay:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    font-family: var(--font-essay);
+    font-size: 17px;
+    line-height: 1.75;
+    max-width: 68ch;
+}
+.prose.prose-essay :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    &:where(p) {
+        font-family: var(--font-essay);
+    }
+}

package/dist/template/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "noEmit": true,
+    "allowJs": false,
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "next-env.d.ts",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    ".next",
+    "dist"
+  ]
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "create-agntcms-app",
+  "version": "0.2.1",
+  "description": "create-agntcms-app: scaffold a new agntcms project from the canonical template",
+  "type": "module",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "bin": {
+    "create-agntcms-app": "./dist/index.mjs"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "commander": "^12.1.0",
+    "@agntcms/skills": "0.2.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  }
+}