@bleedingdev/modern-js-create 3.2.0-ultramodern.1 → 3.2.0-ultramodern.11

package/package.json

@@ -21,7 +21,7 @@
   "engines": {
     "node": ">=20"
   },
-  "version": "3.2.0-ultramodern.1",
+  "version": "3.2.0-ultramodern.11",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/index.js",
   "bin": {
@@ -41,7 +41,7 @@
     "@types/node": "^25.8.0",
     "@typescript/native-preview": "7.0.0-dev.20260516.1",
     "tsx": "^4.22.0",
-    "@modern-js/i18n-utils": "npm:@bleedingdev/modern-js-i18n-utils@3.2.0-ultramodern.1"
+    "@modern-js/i18n-utils": "npm:@bleedingdev/modern-js-i18n-utils@3.2.0-ultramodern.11"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -52,5 +52,8 @@
     "build": "rslib build && pnpm -w tsgo:dts \"$PWD\"",
     "dev": "rslib build -w",
     "start": "node ./dist/index.js"
+  },
+  "ultramodern": {
+    "frameworkVersion": "3.2.0-ultramodern.11"
   }
 }

package/template/.agents/skills-lock.json

@@ -0,0 +1,34 @@
+{
+  "schemaVersion": 2,
+  "installDir": ".agents/skills",
+  "sources": [
+    {
+      "id": "techsiocz-private",
+      "visibility": "private",
+      "repository": "https://github.com/TechsioCZ/skills",
+      "install": "clone-if-authorized",
+      "baseline": [
+        {
+          "name": "plan-graph",
+          "reason": "Build and validate DAGs from .plan.md files"
+        },
+        {
+          "name": "dag",
+          "reason": "Inspect current plan frontiers and blocked lanes"
+        },
+        {
+          "name": "subagent-graph",
+          "reason": "Design dependency-aware multi-agent launch graphs"
+        },
+        {
+          "name": "helm",
+          "reason": "Steer already-running multi-agent work"
+        },
+        {
+          "name": "debugger-mode",
+          "reason": "Run hypothesis-driven debugging with runtime evidence"
+        }
+      ]
+    }
+  ]
+}

package/template/AGENTS.md

@@ -0,0 +1,20 @@
+# UltraModern Agent Contract
+
+This project is generated for Codex-first UltraModern.js work.
+
+## Quality Gates
+
+- `pnpm lint` runs Oxlint with the Ultracite preset.
+- `pnpm format` runs oxfmt.
+- `pnpm typecheck` runs effect-tsgo as the TypeScript checker.
+- `pnpm ultramodern:check` verifies the generated contract.
+
+## Private Skills
+
+Private orchestration skills are not vendored into this template. If you are authorized for `TechsioCZ/skills`, run:
+
+```bash
+pnpm skills:install
+```
+
+The installer clones that private repository and copies only the allowlisted skills from `.agents/skills-lock.json`.

package/template/api/effect/index.ts.handlebars

@@ -2,60 +2,22 @@
   Effect,
   HttpApiBuilder,
   Layer,
-  Schema,
-  ServiceMap,
   defineEffectBff,
 } from '@modern-js/plugin-bff/effect-server';
 import { bffEffectApi } from '../../shared/effect/api';
 
-class GreetingUnavailableError extends Schema.TaggedError<GreetingUnavailableError>()(
-  'GreetingUnavailableError',
-  {
-    message: Schema.String,
-  },
-) {}
-
-class GreetingService extends ServiceMap.Service<GreetingService>()('GreetingService', {
-  make: Effect.succeed({
-    hello: Effect.fn('GreetingService.hello')(function* () {
-      if (Date.now() < 0) {
-        return yield* Effect.fail(
-          new GreetingUnavailableError({
-            message: 'Greeting service is unavailable',
-          }),
-        );
-      }
-
-      return {
-        message: 'Hello from Effect HttpApi',
-        runtime: 'effect' as const,
-      };
-    }),
-  }),
-}) {
-  static readonly layer = Layer.effect(this, this.make);
-}
-
-const greetingsLayer = HttpApiBuilder.group(bffEffectApi, 'greetings', handlers =>
+const greetingsLayer = HttpApiBuilder.group(bffEffectApi, 'greetings', (handlers) =>
   handlers.handle('hello', () =>
-    GreetingService.use(service => service.hello()).pipe(
-      Effect.catchTag('GreetingUnavailableError', error =>
-        Effect.succeed({
-          message: error.message,
-          runtime: 'effect' as const,
-        }),
-      ),
-    ),
+    Effect.succeed({
+      message: 'Hello from Effect HttpApi',
+      runtime: 'effect' as const,
+    }),
   ),
 );
 
-const layer = HttpApiBuilder.layer(bffEffectApi).pipe(
-  Layer.provide(greetingsLayer),
-  Layer.provide(GreetingService.layer),
-);
+const layer = HttpApiBuilder.layer(bffEffectApi).pipe(Layer.provide(greetingsLayer));
 
 export default defineEffectBff({
   api: bffEffectApi,
   layer,
-});
-{{/if}}
+});{{/if}}

package/template/modern.config.ts.handlebars

@@ -1,41 +1,37 @@
+// @effect-diagnostics nodeBuiltinImport:off processEnv:off
 import { appTools, defineConfig, presetUltramodern } from '@modern-js/app-tools';
 import path from 'node:path';
 {{#if enableBff}}import { bffPlugin } from '@modern-js/plugin-bff';
 {{/if}}{{#if isTanstackRouter}}import { tanstackRouterPlugin } from '@modern-js/plugin-tanstack';
 {{/if}}
-
-const appId = process.env.MODERN_BASELINE_APP_ID || path.basename(process.cwd());
-const enableModuleFederationSSR =
-  process.env.MODERN_BASELINE_ENABLE_MF_SSR !== 'false';
-const enableBffRequestId =
-  process.env.MODERN_BASELINE_ENABLE_BFF_REQUEST_ID !== 'false';
+const appId = process.env['MODERN_BASELINE_APP_ID'] || path.basename(process.cwd());
+const enableModuleFederationSSR = process.env['MODERN_BASELINE_ENABLE_MF_SSR'] !== 'false';
+const enableBffRequestId = process.env['MODERN_BASELINE_ENABLE_BFF_REQUEST_ID'] !== 'false';
 const enableTelemetryExporters =
-  process.env.MODERN_BASELINE_ENABLE_TELEMETRY_EXPORTERS !== 'false';
-const telemetryFailLoudStartup =
-  process.env.MODERN_TELEMETRY_FAIL_LOUD_STARTUP !== 'false';
+  process.env['MODERN_BASELINE_ENABLE_TELEMETRY_EXPORTERS'] !== 'false';
+const telemetryFailLoudStartup = process.env['MODERN_TELEMETRY_FAIL_LOUD_STARTUP'] !== 'false';
+const otlpEndpoint = process.env['MODERN_TELEMETRY_OTLP_ENDPOINT'];
+const victoriaMetricsEndpoint = process.env['MODERN_TELEMETRY_VICTORIA_ENDPOINT'];
 
 // https://bleedingdev.github.io/ultramodern.js/configure/app/usage.html
 export default defineConfig(
   presetUltramodern(
     {
-      plugins: [
+{{#if enableBff}}      bff: {
+{{#if useEffectBff}}        effect: {
+          openapi: true,
+        },
+
+{{/if}}        runtimeFramework: '{{bffRuntime}}',
+      },
+
+{{/if}}      plugins: [
         appTools(),
 {{#if isTanstackRouter}}
         tanstackRouterPlugin(),
 {{/if}}{{#if enableBff}}
         bffPlugin(),
-{{/if}}
-      ],
-{{#if enableBff}}
-      bff: {
-        runtimeFramework: '{{bffRuntime}}',
-{{#if useEffectBff}}
-        effect: {
-          openapi: true,
-        },
-{{/if}}
-      },
-{{/if}}
+{{/if}}      ],
     },
     {
       appId,
@@ -43,8 +39,8 @@ export default defineConfig(
       enableModuleFederationSSR,
       enableTelemetryExporters,
       telemetryFailLoudStartup,
-      otlpEndpoint: process.env.MODERN_TELEMETRY_OTLP_ENDPOINT,
-      victoriaMetricsEndpoint: process.env.MODERN_TELEMETRY_VICTORIA_ENDPOINT,
+      ...(typeof otlpEndpoint === 'string' ? { otlpEndpoint } : {}),
+      ...(typeof victoriaMetricsEndpoint === 'string' ? { victoriaMetricsEndpoint } : {}),
     },
   ),
 );

package/template/oxfmt.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'oxfmt';
+import ultracite from 'ultracite/oxfmt';
+
+export default defineConfig({
+  extends: [ultracite],
+  ignorePatterns: ['dist', 'node_modules', '.modern', '.modernjs', '**/routeTree.gen.ts'],
+  singleQuote: true,
+});

package/template/oxlint.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'oxlint';
+import core from 'ultracite/oxlint/core';
+import react from 'ultracite/oxlint/react';
+
+export default defineConfig({
+  env: {
+    browser: true,
+    node: true,
+  },
+  extends: [core, react],
+  ignorePatterns: ['dist', 'node_modules', '.modern', '.modernjs', '**/routeTree.gen.ts'],
+});

package/template/package.json.handlebars

@@ -1,47 +1,62 @@
 {
   "name": "{{packageName}}",
   "version": "0.1.0",
+  "type": "module",
   "scripts": {
     "reset": "npx rimraf node_modules ./**/node_modules",
     "dev": "modern dev",
     "build": "modern build",
     "serve": "modern serve",
-    "ultramodern:check": "node ./scripts/validate-ultramodern.mjs"{{#unless isSubproject}},
-    "lint": "biome check",
+    "typecheck": "node -e \"const fs = require('node:fs'); const { execFileSync, spawnSync } = require('node:child_process'); const bin = execFileSync('effect-tsgo', ['get-exe-path'], { encoding: 'utf8' }).trim(); if (process.platform !== 'win32') fs.chmodSync(bin, 0o755); const result = spawnSync(bin, ['--noEmit', '-p', 'tsconfig.json'], { stdio: 'inherit' }); process.exit(result.status ?? 1);\"",
+    "skills:install": "node ./scripts/bootstrap-agent-skills.mjs",
+    "skills:check": "node ./scripts/bootstrap-agent-skills.mjs --check",
+    "ultramodern:check": "{{#unless isSubproject}}pnpm format:check && pnpm lint && {{/unless}}pnpm typecheck{{#unless isSubproject}} && pnpm skills:check{{/unless}} && node ./scripts/validate-ultramodern.mjs"{{#unless isSubproject}},
+    "format": "oxfmt .",
+    "format:check": "oxfmt --check .",
+    "lint": "oxlint .",
+    "lint:fix": "oxlint . --fix",
     "prepare": "simple-git-hooks"{{/unless}}
   },
-  "engines": {
-    "node": ">=20"
-  }{{#unless isSubproject}},
-  "lint-staged": {
-    "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}": [
-      "biome check --files-ignore-unknown=true"
-    ]
-  },
-  "simple-git-hooks": {
-    "pre-commit": "npx lint-staged"
-  }{{/unless}},
   "dependencies": {
-    "@modern-js/runtime": "{{version}}"{{#if isTanstackRouter}},
-    "@modern-js/plugin-tanstack": "{{version}}",
-    "@tanstack/react-router": "1.170.1"{{/if}},
+{{#if isTanstackRouter}}    "@modern-js/plugin-tanstack": "{{pluginTanstackVersion}}",
+{{/if}}    "@modern-js/runtime": "{{runtimeVersion}}",
+{{#if isTanstackRouter}}    "@tanstack/react-router": "1.170.1",
+{{/if}}
     "react": "^19.2.3",
     "react-dom": "^19.2.0"
   },
   "devDependencies": {
-    "@modern-js/app-tools": "{{version}}",
-    "@modern-js/tsconfig": "{{version}}"{{#if enableBff}},
-    "@modern-js/plugin-bff": "{{version}}"{{/if}}{{#if enableTailwind}},
+    "@effect/tsgo": "0.7.3",
+    "@modern-js/app-tools": "{{appToolsVersion}}",
+{{#if enableBff}}    "@modern-js/plugin-bff": "{{pluginBffVersion}}",
+{{/if}}    "@modern-js/tsconfig": "{{tsconfigVersion}}",
+{{#if enableTailwind}}
     "@tailwindcss/postcss": "^4.1.18",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.18"{{/if}}{{#unless isSubproject}},
-    "@biomejs/biome": "1.9.4"{{/unless}},
-    "@typescript/native-preview": "7.0.0-dev.20260516.1",
+{{/if}}
     "@types/node": "^20",
     "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6"{{#unless isSubproject}},
+    "@types/react-dom": "^19.1.6",
+    "@typescript/native-preview": "7.0.0-dev.20260518.1",
+{{#unless isSubproject}}
     "lint-staged": "~15.4.0",
-    "simple-git-hooks": "^2.11.1"{{/unless}},
-    "rimraf": "^6.0.1"
+    "oxfmt": "0.50.0",
+    "oxlint": "1.65.0",
+{{/unless}}{{#if enableTailwind}}    "postcss": "^8.5.6",
+{{/if}}    "rimraf": "^6.0.1"{{#unless isSubproject}},
+    "simple-git-hooks": "^2.11.1"{{/unless}}{{#if enableTailwind}},
+    "tailwindcss": "^4.1.18"{{/if}}{{#unless isSubproject}},
+    "ultracite": "7.7.0"{{/unless}}
+  }{{#unless isSubproject}},
+  "simple-git-hooks": {
+    "pre-commit": "npx lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}": [
+      "oxfmt --write",
+      "oxlint --fix"
+    ]
+  }{{/unless}},
+  "engines": {
+    "node": ">=20"
   }
 }

package/template/scripts/bootstrap-agent-skills.mjs

@@ -0,0 +1,95 @@
+import { execFileSync } from 'node:child_process';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+
+const root = process.cwd();
+const lockPath = path.join(root, '.agents/skills-lock.json');
+const checkOnly = process.argv.includes('--check');
+const force = process.argv.includes('--force');
+
+const readJson = (filePath) => JSON.parse(fs.readFileSync(filePath, 'utf-8'));
+
+const run = (command, args, options = {}) =>
+  execFileSync(command, args, {
+    cwd: options.cwd ?? root,
+    encoding: 'utf-8',
+    stdio: options.stdio ?? ['ignore', 'pipe', 'pipe'],
+  });
+
+const cloneSource = (source, targetDir) => {
+  const repo = source.repository.replace(/^https:\/\/github.com\//u, '');
+  try {
+    run('gh', ['repo', 'clone', repo, targetDir, '--', '--depth', '1'], {
+      stdio: 'inherit',
+    });
+  } catch {
+    run('git', ['clone', '--depth', '1', source.repository, targetDir], {
+      stdio: 'inherit',
+    });
+  }
+};
+
+const resolveSkillDir = (sourceRoot, skillName) => {
+  const candidates = [
+    path.join(sourceRoot, skillName),
+    path.join(sourceRoot, 'skills', skillName),
+    path.join(sourceRoot, 'skills', 'engineering', skillName),
+    path.join(sourceRoot, 'skills', 'productivity', skillName),
+  ];
+  return candidates.find((candidate) => fs.existsSync(path.join(candidate, 'SKILL.md')));
+};
+
+if (!fs.existsSync(lockPath)) {
+  console.error('Missing .agents/skills-lock.json');
+  process.exit(1);
+}
+
+const lock = readJson(lockPath);
+const installDir = path.join(root, lock.installDir ?? '.agents/skills');
+const privateSources = (lock.sources ?? []).filter(
+  (source) => source.install === 'clone-if-authorized',
+);
+
+if (checkOnly) {
+  const missing = privateSources.flatMap((source) =>
+    (source.baseline ?? [])
+      .map((skill) => skill.name)
+      .filter((skillName) => !fs.existsSync(path.join(installDir, skillName, 'SKILL.md'))),
+  );
+  if (missing.length > 0) {
+    console.warn(
+      `Private skills not installed: ${missing.join(', ')}. Run pnpm skills:install if you have access.`,
+    );
+  } else {
+    console.log('Agent skills are installed.');
+  }
+  process.exit(0);
+}
+
+fs.mkdirSync(installDir, { recursive: true });
+
+for (const source of privateSources) {
+  const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'ultramodern-skills-'));
+  try {
+    cloneSource(source, tempDir);
+    for (const skill of source.baseline ?? []) {
+      const sourceSkillDir = resolveSkillDir(tempDir, skill.name);
+      if (!sourceSkillDir) {
+        throw new Error(`Skill ${skill.name} not found in ${source.repository}`);
+      }
+      const targetSkillDir = path.join(installDir, skill.name);
+      if (fs.existsSync(targetSkillDir)) {
+        if (!force) {
+          console.log(`Skipping existing ${skill.name}`);
+          continue;
+        }
+        fs.rmSync(targetSkillDir, { force: true, recursive: true });
+      }
+      fs.cpSync(sourceSkillDir, targetSkillDir, { recursive: true });
+      console.log(`Installed ${skill.name}`);
+    }
+  } finally {
+    fs.rmSync(tempDir, { force: true, recursive: true });
+  }
+}

package/template/scripts/validate-ultramodern.mjs.handlebars

@@ -2,17 +2,14 @@ import fs from 'node:fs';
 import path from 'node:path';
 
 const configPath = path.resolve(process.cwd(), 'modern.config.ts');
-const templateManifestPath = path.resolve(
-  process.cwd(),
-  '.modernjs/mv-template-manifest.json',
-);
+const templateManifestPath = path.resolve(process.cwd(), '.modernjs/mv-template-manifest.json');
 
 if (!fs.existsSync(configPath)) {
   console.error('modern.config.ts not found');
   process.exit(1);
 }
 
-const content = fs.readFileSync(configPath, 'utf8');
+const content = fs.readFileSync(configPath, 'utf-8');
 const requiredTokens = [
   'presetUltramodern(',
   'appTools()',
@@ -20,12 +17,10 @@ const requiredTokens = [
   'enableBffRequestId',
   'enableTelemetryExporters',
 ];
-const missing = requiredTokens.filter(token => !content.includes(token));
+const missing = requiredTokens.filter((token) => !content.includes(token));
 
 if (missing.length > 0) {
-  console.error(
-    `Ultramodern contract check failed. Missing tokens: ${missing.join(', ')}`,
-  );
+  console.error(`Ultramodern contract check failed. Missing tokens: ${missing.join(', ')}`);
   process.exit(1);
 }
 
@@ -34,9 +29,7 @@ if (!fs.existsSync(templateManifestPath)) {
   process.exit(1);
 }
 
-const templateManifest = JSON.parse(
-  fs.readFileSync(templateManifestPath, 'utf8'),
-);
+const templateManifest = JSON.parse(fs.readFileSync(templateManifestPath, 'utf-8'));
 const requiredDeniedPaths = [
   '.git/**',
   '.github/**',
@@ -52,8 +45,22 @@ const requiredPostMaterialization = [
   'dependency-install-with-lifecycle-deny',
   'template-manifest-retained',
 ];
+const requiredPaths = [
+  'AGENTS.md',
+  '.agents/skills-lock.json',
+  'oxlint.config.ts',
+  'oxfmt.config.ts',
+  'scripts/bootstrap-agent-skills.mjs',
+];
 const manifestErrors = [];
 
+for (const requiredPath of requiredPaths) {
+  if (!fs.existsSync(path.resolve(process.cwd(), requiredPath))) {
+    console.error(`${requiredPath} not found`);
+    process.exit(1);
+  }
+}
+
 if (templateManifest.schemaVersion !== 1) {
   manifestErrors.push('schemaVersion');
 }
@@ -65,10 +72,10 @@ if (templateManifest.source?.type !== 'builtin') {
 if (
   !Array.isArray(templateManifest.integrity?.checksums) ||
   !templateManifest.integrity.checksums.some(
-    checksum =>
+    (checksum) =>
       checksum.algorithm === 'sha256' &&
       checksum.scope === 'source-tree' &&
-      /^[0-9a-f]{64}$/.test(checksum.value),
+      /^[0-9a-f]{64}$/u.test(checksum.value),
   )
 ) {
   manifestErrors.push('integrity.checksums[source-tree]');
@@ -92,11 +99,68 @@ for (const token of requiredPostMaterialization) {
 
 if (manifestErrors.length > 0) {
   console.error(
-    `Ultramodern template manifest check failed. Invalid fields: ${manifestErrors.join(
-      ', ',
-    )}`,
+    `Ultramodern template manifest check failed. Invalid fields: ${manifestErrors.join(', ')}`,
   );
   process.exit(1);
 }
 
+const packageJson = JSON.parse(
+  fs.readFileSync(path.resolve(process.cwd(), 'package.json'), 'utf-8'),
+);
+const unresolvedTemplateMarker = String.fromCodePoint(123, 123);
+if (JSON.stringify(packageJson).includes(unresolvedTemplateMarker)) {
+  console.error('package.json contains unresolved template markers');
+  process.exit(1);
+}
+const skillsLock = JSON.parse(
+  fs.readFileSync(path.resolve(process.cwd(), '.agents/skills-lock.json'), 'utf-8'),
+);
+const requiredScripts = {
+  format: 'oxfmt .',
+  'format:check': 'oxfmt --check .',
+  lint: 'oxlint .',
+  'lint:fix': 'oxlint . --fix',
+  'skills:check': 'node ./scripts/bootstrap-agent-skills.mjs --check',
+  'skills:install': 'node ./scripts/bootstrap-agent-skills.mjs',
+};
+
+for (const [scriptName, scriptCommand] of Object.entries(requiredScripts)) {
+  if (packageJson.scripts?.[scriptName] !== scriptCommand) {
+    console.error(`Missing or invalid package script: ${scriptName}`);
+    process.exit(1);
+  }
+}
+
+if (
+  !packageJson.scripts?.typecheck?.includes('effect-tsgo') ||
+  !packageJson.scripts.typecheck.includes('get-exe-path')
+) {
+  console.error('typecheck must use effect-tsgo as the TypeScript checker');
+  process.exit(1);
+}
+
+for (const dependency of [
+  '@effect/tsgo',
+  '@typescript/native-preview',
+  'oxlint',
+  'oxfmt',
+  'ultracite',
+]) {
+  if (!packageJson.devDependencies?.[dependency]) {
+    console.error(`Missing devDependency: ${dependency}`);
+    process.exit(1);
+  }
+}
+
+const privateSource = skillsLock.sources?.find(
+  (source) => source.repository === 'https://github.com/TechsioCZ/skills',
+);
+const privateSkills = new Set(privateSource?.baseline?.map((skill) => skill.name));
+for (const skillName of ['plan-graph', 'dag', 'subagent-graph', 'helm', 'debugger-mode']) {
+  if (!privateSkills.has(skillName)) {
+    console.error(`Missing private skill allowlist entry: ${skillName}`);
+    process.exit(1);
+  }
+}
+
 console.log('Ultramodern contract check passed.');

package/template/shared/effect/api.ts.handlebars

@@ -14,5 +14,4 @@ export const bffEffectApi = HttpApi.make('BffApi').add(
       }),
     }),
   ),
-);
-{{/if}}
+);{{/if}}

package/template/src/modern.runtime.ts.handlebars

@@ -1,9 +1,7 @@
 import { defineRuntimeConfig } from '@modern-js/runtime';
 
 export default defineRuntimeConfig({
-{{#if isTanstackRouter}}
-  router: {
+{{#if isTanstackRouter}}  router: {
     framework: 'tanstack',
-  },
-{{/if}}
+  },{{/if}}
 });

package/template/src/routes/index.css.handlebars

@@ -4,7 +4,12 @@
 body {
   padding: 0;
   margin: 0;
-  font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-family:
+    PingFang SC,
+    Hiragino Sans GB,
+    Microsoft YaHei,
+    Arial,
+    sans-serif;
   background: linear-gradient(to bottom, transparent, #fff) #eceeef;
 }
 
@@ -67,8 +72,14 @@ main {
   padding: 0.6rem 0.9rem;
   font-size: 1.05rem;
   font-family:
-    Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
+    Menlo,
+    Monaco,
+    Lucida Console,
+    Liberation Mono,
+    DejaVu Sans Mono,
+    Bitstream Vera Sans Mono,
+    Courier New,
+    monospace;
 }
 
 .container-box .grid {