tkeron 5.3.0 → 6.0.1

package/examples/init_sample/websrc/styles/main.css

@@ -0,0 +1,112 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  line-height: 1.6;
+  color: #1a1a1a;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+@media (max-width: 900px) {
+  .grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+  }
+}
+
+.page {
+  background: white;
+  border-radius: 12px;
+  padding: 2rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  margin-top: 1rem;
+}
+
+.page h1 {
+  color: #4c51bf;
+  margin-bottom: 0.5rem;
+  font-size: 1.75rem;
+}
+
+.page p {
+  margin-bottom: 0.5rem;
+}
+
+h1 {
+  font-size: 2rem;
+  margin-bottom: 0.25rem;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+h2 {
+  color: #667eea;
+  margin-bottom: 0.75rem;
+  font-size: 1.2rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+p {
+  margin-bottom: 0.5rem;
+}
+
+section {
+  background: white;
+  padding: 1.25rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+
+section:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
+}
+
+section p {
+  font-size: 0.9rem;
+}
+
+code {
+  background: #f0f0f0;
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+  font-family: "Courier New", monospace;
+  font-size: 0.9em;
+}
+
+a {
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+
+a:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}

package/examples/init_sample/websrc/utils/api-service.ts

@@ -0,0 +1,93 @@
+export interface Quote {
+  id: number;
+  quote: string;
+  author: string;
+}
+
+export const escapeHtml = (str: string): string =>
+  str
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+
+export const getRandomQuote = async (): Promise<Quote> => {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 5000);
+  try {
+    const response = await fetch("https://dummyjson.com/quotes/random", {
+      signal: controller.signal,
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data as Quote;
+  } catch {
+    return {
+      id: 0,
+      quote: "The only way to do great work is to love what you do.",
+      author: "Steve Jobs",
+    };
+  } finally {
+    clearTimeout(timeout);
+  }
+};
+
+export const getBuildMetadata = () => ({
+  timestamp: new Date().toLocaleString(),
+  runtime: `Bun ${Bun.version}`,
+  tkeron: process.env.TKERON_VERSION || "unknown",
+  platform: process.platform,
+});
+
+export interface CryptoPrice {
+  id: string;
+  symbol: string;
+  name: string;
+  current_price: number;
+  price_change_percentage_24h: number;
+}
+
+export const getCryptoPrices = async (): Promise<CryptoPrice[]> => {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 5000);
+  try {
+    const response = await fetch(
+      "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=bitcoin,ethereum,solana&order=market_cap_desc&sparkline=false",
+      { signal: controller.signal },
+    );
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data as CryptoPrice[];
+  } catch {
+    return [
+      {
+        id: "bitcoin",
+        symbol: "btc",
+        name: "Bitcoin",
+        current_price: 95000,
+        price_change_percentage_24h: 2.5,
+      },
+      {
+        id: "ethereum",
+        symbol: "eth",
+        name: "Ethereum",
+        current_price: 3500,
+        price_change_percentage_24h: -1.2,
+      },
+      {
+        id: "solana",
+        symbol: "sol",
+        name: "Solana",
+        current_price: 180,
+        price_change_percentage_24h: 5.8,
+      },
+    ];
+  } finally {
+    clearTimeout(timeout);
+  }
+};

package/examples/with_global_styles/websrc/bad.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Bad — link rel stylesheet</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <h1>Bad: <code>&lt;link rel="stylesheet"&gt;</code></h1>
+    <p>
+      The CSS is referenced via a <code>&lt;link&gt;</code> tag. tkeron bundles
+      it into a separate <code>.css</code> file — an extra HTTP request on every
+      page load.
+    </p>
+    <p>
+      Check <code>web/bad.html</code>: you will find a
+      <code>&lt;link rel="stylesheet" href="./bad.css"&gt;</code> and a
+      companion <code>bad.css</code> file next to it.
+    </p>
+    <a href="index.html">Back to index</a>
+  </body>
+</html>

package/examples/with_global_styles/websrc/global-styles.com.ts

@@ -0,0 +1,5 @@
+import { join } from "path";
+
+const css = await Bun.file(join(__dirname, "styles.css")).text();
+
+com.innerHTML = `<style>${css}</style>`;

package/examples/with_global_styles/websrc/good.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Good — global-styles component</title>
+    <global-styles></global-styles>
+  </head>
+  <body>
+    <h1>Good: <code>&lt;global-styles&gt;</code></h1>
+    <p>
+      The <code>&lt;global-styles&gt;</code> component reads
+      <code>styles.css</code> at build time and injects it as a
+      <code>&lt;style&gt;</code> block directly in <code>&lt;head&gt;</code>.
+    </p>
+    <p>
+      Check <code>web/good.html</code>: no external CSS file, all styles are
+      inline. Zero extra HTTP requests.
+    </p>
+    <a href="index.html">Back to index</a>
+  </body>
+</html>

package/examples/with_global_styles/websrc/index.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Global Styles — Overview</title>
+  </head>
+  <body>
+    <h1>Global Styles Import</h1>
+    <p>
+      Two approaches for adding shared CSS to a tkeron page. Compare the
+      compiled output in <code>web/</code>.
+    </p>
+    <ul>
+      <li>
+        <a href="bad.html">Bad — <code>&lt;link rel="stylesheet"&gt;</code></a>:
+        CSS ends up in a separate file (extra HTTP request).
+      </li>
+      <li>
+        <a href="good.html">Good — <code>&lt;global-styles&gt;</code></a>:
+        CSS is inlined at build time (no extra request).
+      </li>
+    </ul>
+  </body>
+</html>

package/examples/with_global_styles/websrc/styles.css

@@ -0,0 +1,24 @@
+body {
+  font-family: system-ui, sans-serif;
+  max-width: 640px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+  color: #1a1a1a;
+  line-height: 1.6;
+}
+
+h1 {
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+p {
+  margin: 0.75rem 0;
+}
+
+code {
+  background: #f0f0f0;
+  padding: 0.1em 0.35em;
+  border-radius: 3px;
+  font-size: 0.875em;
+}

package/examples/with_style_dedup/websrc/tag-chip.com.html

@@ -0,0 +1,15 @@
+<style>
+  .tag-chip {
+    display: inline-block;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 0.2rem 0.65rem;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    margin: 0.2rem;
+    font-family: monospace;
+    letter-spacing: 0.02em;
+  }
+</style>
+<span class="tag-chip">label...</span>

package/examples/with_style_dedup/websrc/tag-chip.com.ts

@@ -1,19 +1,3 @@
 const label = com.getAttribute("label") || "tag";
-
-com.innerHTML = `
-  <style>
-    .tag-chip {
-      display: inline-block;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      color: white;
-      padding: 0.2rem 0.65rem;
-      border-radius: 999px;
-      font-size: 0.75rem;
-      font-weight: 600;
-      margin: 0.2rem;
-      font-family: monospace;
-      letter-spacing: 0.02em;
-    }
-  </style>
-  <span class="tag-chip">${label}</span>
-`;
+const span = com.querySelector(".tag-chip");
+if (span) span.textContent = label;

package/index.ts

@@ -3,6 +3,7 @@ import { getCommands } from "@tkeron/commands";
 import { buildWrapper } from "./src/buildWrapper";
 import { develop } from "./src/develop";
 import { initWrapper } from "./src/initWrapper";
+import { skillsWrapper } from "./src/skillsWrapper";
 import { showBanner } from "./src/banner";
 import packageJson from "./package.json";
 
@@ -36,5 +37,19 @@ getCommands("tkeron", packageJson.version)
   .addOption("force")
   .setCallback(initWrapper)
 
+  .commands()
+
+  .addCommand("skills")
+  .addDescription("Install AI agent skills into the current project")
+  .addPositionedArgument("target")
+  .addOption("force")
+  .addOption({
+    name: "dryRun",
+    aliases: ["dry-run"],
+    type: "boolean",
+    description: "Preview what would be installed without making changes",
+  })
+  .setCallback(skillsWrapper)
+
   .commands()
   .start();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tkeron",
-  "version": "5.3.0",
+  "version": "6.0.1",
   "description": "CLI build tool for vanilla web development with TypeScript.",
   "type": "module",
   "main": "./src/index.ts",
@@ -12,8 +12,7 @@
   },
   "bin": {
     "tkeron": "./index.ts",
-    "tk": "./index.ts",
-    "tkeron-mcp": "./mcp-server.ts"
+    "tk": "./index.ts"
   },
   "scripts": {
     "tk": "bun index.ts ",
@@ -23,15 +22,14 @@
   "author": "tkeron",
   "license": "MIT",
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.29.0",
-    "@tkeron/commands": "0.4.7",
-    "@tkeron/html-parser": "1.5.6",
-    "@tkeron/tools": "^0.4.1"
+    "@tkeron/commands": "0.4.8",
+    "@tkeron/html-parser": "1.5.7",
+    "@tkeron/tools": "^0.5.0"
   },
   "devDependencies": {
-    "@types/bun": "^1.3.11",
-    "prettier": "^3.8.1",
-    "typescript": "^6.0.2"
+    "@types/bun": "^1.3.14",
+    "prettier": "^3.8.3",
+    "typescript": "^6.0.3"
   },
   "keywords": [
     "cli",
@@ -41,9 +39,7 @@
     "pre-rendering",
     "static-site-generator",
     "backend-driven",
-    "mcp",
-    "model-context-protocol",
-    "ai-integration"
+    "ai-agents"
   ],
   "publishConfig": {
     "access": "public"