@noobdemon/noob-cli 1.7.4 → 1.7.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noobdemon/noob-cli",
-  "version": "1.7.4",
+  "version": "1.7.6",
   "publishConfig": {
     "access": "public"
   },
@@ -12,6 +12,7 @@
   "files": [
     "bin/",
     "src/",
+    "skills/",
     "README.md",
     "LICENSE"
   ],

package/skills/frontend-design/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: frontend-design
+description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
+license: Complete terms in LICENSE.txt
+---
+
+This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
+
+The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
+
+## Design Thinking
+
+Before coding, understand the context and commit to a BOLD aesthetic direction:
+- **Purpose**: What problem does this interface solve? Who uses it?
+- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
+- **Constraints**: Technical requirements (framework, performance, accessibility).
+- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
+
+**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
+
+Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
+- Production-grade and functional
+- Visually striking and memorable
+- Cohesive with a clear aesthetic point-of-view
+- Meticulously refined in every detail
+
+## Frontend Aesthetics Guidelines
+
+Focus on:
+- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
+- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
+- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
+- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
+- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
+
+NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
+
+Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
+
+**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
+
+Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

package/src/i18n.js

@@ -62,6 +62,8 @@ export const t = {
   cmdAutoYolo: "/auto-yolo     lưu/bỏ yolo làm mặc định mỗi lần chạy (cần xác nhận)",
   cmdInit: "/init           quét dự án & tạo noob.md (tổng quan + quy ước, như Claude Code)",
   cmdKarpathy: "/karpathy [path]  rà soát code theo 4 nguyên tắc Karpathy (/kc)",
+  cmdFrontendDesign: "/frontend-design <yêu cầu>  thiết kế UI frontend chất lượng cao theo skill (/fd)",
+  cmdImprove: "/improve [hint]  phân tích workspace & đề xuất tính năng cải thiện (/imp)",
   cmdUltra: "/ultra <mục tiêu>  tự hành: noob tự nghĩ & tự làm nhiệm vụ tới khi xong (/u)",
   cmdLearn: "/learn [ghi chú]  chưng cất bài học của phiên vào noob.md",
   cmdCompact: "/compact         tóm tắt phiên ngay để gọn ngữ cảnh (giữ trí nhớ dài hạn)",
@@ -123,6 +125,10 @@ export const t = {
   autoCompactDone: (bK, aK, pct) => `✓ Auto-compact: ${bK}k → ${aK}k chars (giảm ${pct}%). Trí nhớ dài hạn đã giữ lại trong session_summary.`,
   autoCompactFail: "Auto-compact thất bại — bạn nên /clear hoặc /compact thủ công.",
   initRunning: "đang quét dự án & soạn noob.md…",
+  frontendDesignRunning: "đang vận dụng skill frontend-design…",
+  improveRunning: "đang khảo sát workspace & soạn đề xuất cải thiện…",
+  frontendDesignNoSkill: "không tìm thấy skills/frontend-design/SKILL.md — skill chưa được cài.",
+  frontendDesignNeedReq: "cần mô tả yêu cầu. Ví dụ: /frontend-design landing page cho app nghe nhạc lo-fi",
   initOverwriteWarn: (p) => `⚠ Đã có noob.md tại ${p}. /init sẽ ghi đè nội dung hiện tại.`,
   initOverwriteConfirm: "Ghi đè? gõ 'y' để xác nhận, phím khác để huỷ › ",
   initCancel: "Huỷ /init — giữ nguyên noob.md.",

package/src/repl.js

@@ -15,6 +15,7 @@ import { loadMemory, memoryPath } from "./memory.js";
 import { t } from "./i18n.js";
 import { checkLatest, runUpdate, CURRENT } from "./update.js";
 import * as sessions from "./sessions.js";
+import { loadSkill, listSkills } from "./skills.js";
 
 // Lệnh dùng cho autocomplete. Gõ "/l" → lọc các lệnh có "l" (login, logout,
 // clear, models, yolo…); ↑/↓ chọn, Tab điền, Enter chạy mục đang sáng.
@@ -29,6 +30,8 @@ const SLASH = [
   { name: "/auto-yolo", desc: "lưu yolo làm mặc định (cần xác nhận)" },
   { name: "/init", desc: "quét dự án & tạo noob.md" },
   { name: "/karpathy", desc: "rà soát code (Karpathy)" },
+  { name: "/frontend-design", desc: "thiết kế UI frontend chất lượng cao (skill)" },
+  { name: "/improve", desc: "phân tích workspace & gợi ý tính năng cải thiện" },
   { name: "/ultra", desc: "tự hành: tự nghĩ & làm nhiệm vụ" },
   { name: "/agent", desc: "bật/tắt agent mode (spawn sub-agent)" },
   { name: "/tokens", desc: "xem số token đã dùng phiên này" },
@@ -332,6 +335,39 @@ export async function startRepl(opts = {}) {
   }
   const startFresh = () => (session = sessions.newSession({ cwd: process.cwd(), model: state.model.id }));
 
+  // /frontend-design <yêu cầu> — vận dụng skill frontend-design (skills/frontend-design/SKILL.md)
+  // để model tạo UI frontend chất lượng cao, tránh "AI slop" aesthetic.
+  async function runFrontendDesign(arg) {
+    if (!config.apiKey) return console.log(c.tool("  " + t.notLoggedIn));
+    if (!arg) return console.log(c.err("  " + t.frontendDesignNeedReq));
+    const skill = loadSkill("frontend-design");
+    if (!skill) return console.log(c.err("  " + t.frontendDesignNoSkill));
+    const prompt = `Bạn đang thực thi SKILL "frontend-design". Đọc kỹ hướng dẫn skill dưới đây và TUÂN THỦ khi xây dựng UI.
+
+=== SKILL: frontend-design ===
+${skill}
+=== HẾT SKILL ===
+
+YÊU CẦU NGƯỜI DÙNG:
+${arg}
+
+Thực thi: đọc/tạo file cần thiết bằng tool, viết code production-grade theo đúng tinh thần skill (typography đặc sắc, color/theme có cam kết, motion có chủ đích, layout bất ngờ, tránh AI slop). Báo cáo ngắn gọn các file đã tạo và lựa chọn thẩm mỹ chính.`;
+    console.log(c.tool("  🎨 " + t.frontendDesignRunning));
+    await handle(prompt);
+    persist();
+  }
+
+  // /improve [hint] — model rà soát workspace & đề xuất tính năng/cải tiến.
+  // KHÔNG sửa code, chỉ phân tích & đề xuất.
+  async function runImprove(arg) {
+    if (!config.apiKey) return console.log(c.tool("  " + t.notLoggedIn));
+    const focus = arg ? `\nNgười dùng nhấn mạnh: "${arg}". Ưu tiên theo hướng đó nhưng vẫn nêu gợi ý quan trọng khác.` : "";
+    const prompt = `Đóng vai senior engineer & product reviewer. KHẢO SÁT workspace hiện tại và đề xuất TÍNH NĂNG / CẢI TIẾN cho dự án.${focus}\n\nQUY TRÌNH (dùng tool, không nói suông):\n1. list_dir thư mục gốc để nắm cấu trúc.\n2. Đọc README.md, package.json, noob.md, CHANGELOG.md (nếu có) để hiểu mục đích & trạng thái.\n3. list_dir/glob các thư mục mã chính. KHÔNG đọc hết file — chỉ đủ để nắm kiến trúc.\n4. grep TODO/FIXME/HACK/XXX để biết chỗ tác giả đã ghi nhận.\n5. Ghi nhận thiếu test/lint/CI nếu có.\n\nSAU KHẢO SÁT, viết báo cáo Markdown TIẾNG VIỆT theo cấu trúc:\n\n## Tóm tắt dự án\n2–4 dòng: làm gì, tech gì, trạng thái.\n\n## Điểm mạnh hiện tại\n3–6 gạch đầu dòng.\n\n## Gợi ý cải thiện\n5–10 đề xuất, MỖI cái:\n### N. <Tên>\n- **Vấn đề/cơ hội:** quan sát cụ thể (kèm tên_file:dòng nếu được).\n- **Đề xuất:** mô tả tính năng/cải tiến.\n- **Lợi ích:** UX/hiệu năng/độ tin cậy/mở rộng.\n- **Công sức:** S (vài giờ) / M (1–2 ngày) / L (>2 ngày).\n- **Ưu tiên:** P0 / P1 / P2.\n\n## Đề xuất ưu tiên hàng đầu\n1–3 mục P0 nên làm trước, kèm lý do.\n\nQUY TẮC: bám observation từ code thật, KHÔNG gợi ý chung chung, thẳng thắn không nịnh, KHÔNG sửa code, KHÔNG ghi noob.md.`;
+    console.log(c.tool("  ✨ " + t.improveRunning));
+    await handle(prompt);
+    persist();
+  }
+
   // /karpathy [path] — bắt noob tự rà soát code theo 4 nguyên tắc Karpathy.
   // Không có path → soát các file đã đổi trong phiên (model thấy qua FILES CHANGED).
   async function runKarpathy(arg) {
@@ -941,6 +977,15 @@ NGUYÊN TẮC:
       case "kc":
         await runKarpathy(arg);
         break;
+      case "frontend-design":
+      case "frontend":
+      case "fd":
+        await runFrontendDesign(arg);
+        break;
+      case "improve":
+      case "imp":
+        await runImprove(arg);
+        break;
       case "ultra":
       case "u":
         await runUltra(arg);
@@ -1216,6 +1261,8 @@ function printHelp() {
         "  " + t.cmdAutoYolo,
         "  " + t.cmdInit,
         "  " + t.cmdKarpathy,
+        "  " + t.cmdFrontendDesign,
+      "  " + t.cmdImprove,
         "  " + t.cmdUltra,
         "  " + t.cmdLearn,
         "  " + t.cmdCompact,

package/src/skills.js

@@ -0,0 +1,68 @@
+// Quản lý skills: mỗi skill là một thư mục `skills/<name>/` chứa `SKILL.md`
+// (theo quy ước Anthropic). Khi user gõ `/<skill-name>`, repl nạp nội dung
+// SKILL.md đó như context bổ sung rồi giao việc cho agent.
+//
+// Resolve theo 2 tầng:
+//   1) `<cwd>/skills/<name>/SKILL.md`  — skill user tự viết trong project của họ
+//      (override được skill mặc định, để tinh chỉnh phong cách riêng).
+//   2) `<noob-cli-package>/skills/<name>/SKILL.md`  — skill đóng gói theo CLI,
+//      đảm bảo `npm i -g @noobdemon/noob-cli` xong là `/frontend-design` chạy
+//      được trên MỌI máy mà không cần clone repo.
+//
+// API tối giản — không over-engineer:
+//   loadSkill(name)  -> string | null  (nội dung SKILL.md, null nếu không có)
+//   listSkills()     -> string[]       (tên skill có sẵn, gộp 2 nguồn)
+//   skillPath(name)  -> string | null  (đường dẫn tuyệt đối SKILL.md đã resolve)
+
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+// Thư mục `skills/` đi kèm package (cùng cấp với `src/`, `bin/`).
+// `import.meta.url` -> .../noob-cli/src/skills.js  =>  ../skills
+const PACKAGE_SKILLS_DIR = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..", "skills");
+
+function userSkillsDir() {
+  return path.join(process.cwd(), "skills");
+}
+
+function candidatePaths(name) {
+  return [
+    path.join(userSkillsDir(), name, "SKILL.md"), // user override trước
+    path.join(PACKAGE_SKILLS_DIR, name, "SKILL.md"), // built-in của CLI
+  ];
+}
+
+export function skillPath(name) {
+  for (const p of candidatePaths(name)) {
+    if (fs.existsSync(p)) return p;
+  }
+  return null;
+}
+
+export function loadSkill(name) {
+  try {
+    const p = skillPath(name);
+    if (!p) return null;
+    return fs.readFileSync(p, "utf8");
+  } catch {
+    return null;
+  }
+}
+
+function listIn(dir) {
+  try {
+    if (!fs.existsSync(dir)) return [];
+    return fs
+      .readdirSync(dir, { withFileTypes: true })
+      .filter((e) => e.isDirectory() && fs.existsSync(path.join(dir, e.name, "SKILL.md")))
+      .map((e) => e.name);
+  } catch {
+    return [];
+  }
+}
+
+export function listSkills() {
+  const merged = new Set([...listIn(userSkillsDir()), ...listIn(PACKAGE_SKILLS_DIR)]);
+  return [...merged].sort();
+}