tkeron 5.2.0 → 6.0.0

package/examples/init_sample/websrc/index.html

@@ -12,7 +12,7 @@
         box-sizing: border-box;
       }
       body {
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
         line-height: 1.6;
         color: #1a1a1a;
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -49,7 +49,7 @@
         backdrop-filter: blur(10px);
         padding: 1.5rem;
         border-radius: 12px;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         grid-row: span 2;
       }
       .hero .features {
@@ -67,17 +67,22 @@
         width: 200px;
         height: 200px;
         margin-bottom: 1rem;
-        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
+        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
         animation: float 3s ease-in-out infinite;
       }
       @keyframes float {
-        0%, 100% { transform: translateY(0); }
-        50% { transform: translateY(-10px); }
+        0%,
+        100% {
+          transform: translateY(0);
+        }
+        50% {
+          transform: translateY(-10px);
+        }
       }
       h1 {
         font-size: 2rem;
         margin-bottom: 0.25rem;
-        text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
       }
       .subtitle {
         font-size: 0.9rem;
@@ -87,12 +92,14 @@
         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;
+        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);
+        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
       }
       h2 {
         color: #667eea;
@@ -118,12 +125,14 @@
         cursor: pointer;
         font-size: 1rem;
         font-weight: 600;
-        transition: transform 0.1s, box-shadow 0.2s;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+        transition:
+          transform 0.1s,
+          box-shadow 0.2s;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
       }
       button:hover {
         transform: scale(1.05);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
       }
       button:active {
         transform: scale(0.98);
@@ -141,18 +150,20 @@
         background: #f0f0f0;
         padding: 0.2rem 0.4rem;
         border-radius: 4px;
-        font-family: 'Courier New', monospace;
+        font-family: "Courier New", monospace;
         font-size: 0.9em;
       }
       p {
         margin-bottom: 0.5rem;
       }
       a {
-        transition: transform 0.2s, box-shadow 0.2s;
+        transition:
+          transform 0.2s,
+          box-shadow 0.2s;
       }
       a:hover {
         transform: translateY(-2px);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
       }
       .crypto-prices-container {
         display: grid;
@@ -165,7 +176,7 @@
         padding: 1.25rem;
         border-radius: 12px;
         color: white;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         transition: transform 0.2s;
       }
       .crypto-card:hover {
@@ -182,7 +193,7 @@
         font-size: 1rem;
       }
       .crypto-symbol {
-        background: rgba(255,255,255,0.2);
+        background: rgba(255, 255, 255, 0.2);
         padding: 0.25rem 0.5rem;
         border-radius: 4px;
         font-size: 0.75rem;
@@ -207,20 +218,42 @@
         <html-components-card></html-components-card>
         <ts-components-card></ts-components-card>
         <counter-card></counter-card>
-        
+
         <!-- Crypto Prices - fetched at build time -->
-        <section style="grid-column: span 3;">
+        <section style="grid-column: span 3">
           <h2>💰 Asset Prices (Build Time)</h2>
-          <p style="font-size: 0.85rem; margin-bottom: 0.75rem;">Real cryptocurrency prices fetched from CoinGecko API at build time:</p>
+          <p style="font-size: 0.85rem; margin-bottom: 0.75rem">
+            Real cryptocurrency prices fetched from CoinGecko API at build time:
+          </p>
           <div id="crypto-prices" class="crypto-prices-container"></div>
         </section>
-        
+
         <!-- Pre-rendered content with external API data -->
-        <section style="grid-column: span 3;">
+        <section style="grid-column: span 3">
           <h2>💬 Quote of the Build</h2>
-          <p style="font-size: 0.85rem; margin-bottom: 0.75rem;">This content was fetched from an external API at build time:</p>
-          <div id="pre-rendered-quote" style="margin: 1rem 0; padding: 0.75rem; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #667eea;"></div>
-          <div id="build-metadata" style="margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid #eee; font-size: 0.75rem; color: #999;"></div>
+          <p style="font-size: 0.85rem; margin-bottom: 0.75rem">
+            This content was fetched from an external API at build time:
+          </p>
+          <div
+            id="pre-rendered-quote"
+            style="
+              margin: 1rem 0;
+              padding: 0.75rem;
+              background: #f8f9fa;
+              border-radius: 8px;
+              border-left: 4px solid #667eea;
+            "
+          ></div>
+          <div
+            id="build-metadata"
+            style="
+              margin-top: 1rem;
+              padding-top: 0.75rem;
+              border-top: 1px solid #eee;
+              font-size: 0.75rem;
+              color: #999;
+            "
+          ></div>
         </section>
       </div>
     </div>

package/examples/init_sample/websrc/index.pre.ts

@@ -1,8 +1,12 @@
 // Pre-rendering - runs at build time
 // Demonstrates importing any TypeScript module for pre-rendering
-import { getRandomQuote, getBuildMetadata, getCryptoPrices } from './api-service';
+import {
+  getRandomQuote,
+  getBuildMetadata,
+  getCryptoPrices,
+} from "./api-service";
 
-const buildTimeElement = document.getElementById('build-time');
+const buildTimeElement = document.getElementById("build-time");
 
 if (buildTimeElement) {
   const now = new Date();
@@ -10,7 +14,7 @@ if (buildTimeElement) {
 }
 
 // Fetch data from external API at build time
-const quoteElement = document.getElementById('pre-rendered-quote');
+const quoteElement = document.getElementById("pre-rendered-quote");
 if (quoteElement) {
   const quote = await getRandomQuote();
   quoteElement.innerHTML = `
@@ -22,7 +26,7 @@ if (quoteElement) {
 }
 
 // Add build metadata
-const metadataElement = document.getElementById('build-metadata');
+const metadataElement = document.getElementById("build-metadata");
 if (metadataElement) {
   const metadata = await getBuildMetadata();
   metadataElement.innerHTML = `
@@ -38,15 +42,17 @@ if (metadataElement) {
 }
 
 // Fetch crypto prices at build time
-const cryptoPricesElement = document.getElementById('crypto-prices');
+const cryptoPricesElement = document.getElementById("crypto-prices");
 if (cryptoPricesElement) {
   const prices = await getCryptoPrices();
-  
-  const pricesHtml = prices.map(crypto => {
-    const changeColor = crypto.price_change_percentage_24h >= 0 ? '#10b981' : '#ef4444';
-    const changeSymbol = crypto.price_change_percentage_24h >= 0 ? '▲' : '▼';
-    
-    return `
+
+  const pricesHtml = prices
+    .map((crypto) => {
+      const changeColor =
+        crypto.price_change_percentage_24h >= 0 ? "#10b981" : "#ef4444";
+      const changeSymbol = crypto.price_change_percentage_24h >= 0 ? "▲" : "▼";
+
+      return `
       <div class="crypto-card">
         <div class="crypto-header">
           <span class="crypto-name">${crypto.name}</span>
@@ -58,9 +64,8 @@ if (cryptoPricesElement) {
         </div>
       </div>
     `;
-  }).join('');
-  
+    })
+    .join("");
+
   cryptoPricesElement.innerHTML = pricesHtml;
 }
-
-

package/examples/init_sample/websrc/ts-components-card.com.html

@@ -1,6 +1,11 @@
 <section>
   <h2>⚡ TypeScript Components</h2>
-  <p style="margin-bottom: 0.75rem;">Dynamic generation with <code>.com.ts</code>:</p>
+  <p style="margin-bottom: 0.75rem">
+    Dynamic generation with <code>.com.ts</code>:
+  </p>
   <user-badge count="3"></user-badge>
-  <p style="font-size: 0.85rem; color: #666; margin-top: 0.75rem;">✓ Loops & conditionals<br>✓ Read attributes dynamically<br>✓ Build-time code execution</p>
+  <p style="font-size: 0.85rem; color: #666; margin-top: 0.75rem">
+    ✓ Loops & conditionals<br />✓ Read attributes dynamically<br />✓ Build-time
+    code execution
+  </p>
 </section>

package/examples/with_style_dedup/websrc/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Style Deduplication Example</title>
+  </head>
+  <body>
+    <h1>Auto Style Deduplication</h1>
+    <p>
+      Each <code>&lt;tag-chip&gt;</code> component has its own
+      <code>&lt;style&gt;</code>. tkeron automatically keeps only one copy in
+      <code>&lt;head&gt;</code> — no matter how many times the component is
+      used.
+    </p>
+
+    <tag-chip label="TypeScript"></tag-chip>
+    <tag-chip label="HTML"></tag-chip>
+    <tag-chip label="CSS"></tag-chip>
+    <tag-chip label="Bun"></tag-chip>
+    <tag-chip label="tkeron"></tag-chip>
+    <tag-chip label="zero deps"></tag-chip>
+
+    <p>
+      6 chips above → 1 <code>&lt;style data-tk-com="tag-chip"&gt;</code> in
+      <code>&lt;head&gt;</code>.
+    </p>
+  </body>
+</html>

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

@@ -0,0 +1,19 @@
+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>
+`;

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.2.0",
+  "version": "6.0.0",
   "description": "CLI build tool for vanilla web development with TypeScript.",
   "type": "module",
   "main": "./src/index.ts",
@@ -12,35 +12,24 @@
   },
   "bin": {
     "tkeron": "./index.ts",
-    "tk": "./index.ts",
-    "tkeron-mcp": "./mcp-server.ts"
+    "tk": "./index.ts"
   },
   "scripts": {
     "tk": "bun index.ts ",
     "test": "bun test --concurrent",
-    "lint": "prettier --write .",
-    "sample1": "bun . build examples/basic_build/src",
-    "sample2": "bun . build examples/with_assets/src",
-    "sample3": "bun . build examples/with_pre/src",
-    "sample4": "bun . build examples/with_com_html_priority/src",
-    "sample5": "bun . build examples/with_com_ts/src",
-    "sample6": "bun . build examples/with_com_ts_priority/src",
-    "sample7": "bun . build examples/with_com_mixed_priority/src",
-    "sample8": "bun . build examples/with_com_html_in_ts/src",
-    "build_examples": "bun run sample1 && bun run sample2 && bun run sample3 && bun run sample4 && bun run sample5 && bun run sample6 && bun run sample7 && bun run sample8"
+    "lint": "prettier --write ."
   },
   "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",
@@ -50,9 +39,7 @@
     "pre-rendering",
     "static-site-generator",
     "backend-driven",
-    "mcp",
-    "model-context-protocol",
-    "ai-integration"
+    "ai-agents"
   ],
   "publishConfig": {
     "access": "public"