@flitzrrr/frontend-design-skills 1.0.0

package/bin/cli.js

@@ -0,0 +1,317 @@
+#!/usr/bin/env node
+
+const { execSync } = require("child_process");
+const path = require("path");
+const fs = require("fs");
+const os = require("os");
+
+const REPO_URL = "https://github.com/flitzrrr/frontend-design-skills.git";
+const SKILL_DIR = path.join(os.homedir(), ".frontend-design-skills");
+
+// Resolve the package root (where skills-src/ and integration files live)
+const PKG_ROOT = path.resolve(__dirname, "..");
+
+const PLATFORMS = {
+  "claude-code": {
+    name: "Claude Code",
+    type: "project",
+    files: ["CLAUDE.md"],
+  },
+  cursor: {
+    name: "Cursor",
+    type: "project",
+    files: [".cursorrules"],
+  },
+  windsurf: {
+    name: "Windsurf",
+    type: "project",
+    files: [".windsurfrules"],
+  },
+  lovable: {
+    name: "Lovable",
+    type: "project",
+    files: [".lovable"],
+  },
+  codex: {
+    name: "Codex (OpenAI)",
+    type: "global",
+    dir: path.join(os.homedir(), ".codex", "skills"),
+    files: ["AGENTS.md"],
+  },
+  copilot: {
+    name: "VS Code (GitHub Copilot)",
+    type: "global",
+    dir: path.join(os.homedir(), ".copilot", "skills"),
+  },
+  antigravity: {
+    name: "Antigravity (Gemini)",
+    type: "global",
+    dir: path.join(os.homedir(), ".gemini", "antigravity", "skills"),
+  },
+  opencode: {
+    name: "OpenCode",
+    type: "global",
+    dir: path.join(os.homedir(), ".config", "opencode", "skills"),
+  },
+  aider: {
+    name: "Aider",
+    type: "project",
+    files: [".aider/conventions.md"],
+  },
+};
+
+function log(msg) {
+  console.log(`  ${msg}`);
+}
+
+function header(msg) {
+  console.log(`\n> ${msg}\n`);
+}
+
+function ensureSkillCache() {
+  if (fs.existsSync(SKILL_DIR)) {
+    log("Updating skill cache...");
+    try {
+      execSync("git pull --ff-only", { cwd: SKILL_DIR, stdio: "pipe" });
+      log("Updated to latest version.");
+    } catch {
+      log("Warning: Could not update. Using existing cache.");
+    }
+  } else {
+    log(`Cloning ${REPO_URL}...`);
+    execSync(`git clone --depth 1 ${REPO_URL} "${SKILL_DIR}"`, {
+      stdio: "pipe",
+    });
+    log("Cloned successfully.");
+  }
+}
+
+// Resolve skills-src from npm package (preferred) or git cache (fallback)
+function resolveSkillsSrc() {
+  const pkgSkills = path.join(PKG_ROOT, "skills-src");
+  if (fs.existsSync(pkgSkills)) return pkgSkills;
+  const cacheSkills = path.join(SKILL_DIR, "skills-src");
+  if (fs.existsSync(cacheSkills)) return cacheSkills;
+  return null;
+}
+
+function copyFile(src, dst) {
+  const dstDir = path.dirname(dst);
+  fs.mkdirSync(dstDir, { recursive: true });
+  fs.copyFileSync(src, dst);
+}
+
+function linkSkillsTo(targetDir, skillsSrc) {
+  fs.mkdirSync(targetDir, { recursive: true });
+
+  const skills = fs
+    .readdirSync(skillsSrc)
+    .filter(
+      (d) =>
+        !d.startsWith("_") &&
+        fs.statSync(path.join(skillsSrc, d)).isDirectory()
+    );
+
+  let linked = 0;
+  for (const skill of skills) {
+    const src = path.join(skillsSrc, skill);
+    const dst = path.join(targetDir, skill);
+
+    if (fs.existsSync(dst)) {
+      try {
+        fs.rmSync(dst, { recursive: true });
+      } catch {
+        /* ignore */
+      }
+    }
+
+    try {
+      fs.symlinkSync(src, dst, "junction");
+      linked++;
+    } catch {
+      log(`Warning: Could not symlink ${skill}`);
+    }
+  }
+
+  return linked;
+}
+
+function installPlatform(platform) {
+  const config = PLATFORMS[platform];
+  if (!config) {
+    console.error(
+      `Unknown platform: ${platform}\nAvailable: ${Object.keys(PLATFORMS).join(", ")}`
+    );
+    process.exit(1);
+  }
+
+  header(`Installing for ${config.name}`);
+
+  const skillsSrc = resolveSkillsSrc();
+  if (!skillsSrc) {
+    ensureSkillCache();
+  }
+  const finalSkillsSrc = skillsSrc || path.join(SKILL_DIR, "skills-src");
+
+  if (!fs.existsSync(finalSkillsSrc)) {
+    console.error("Error: skills-src/ not found.");
+    process.exit(1);
+  }
+
+  if (config.type === "project") {
+    // Project-level: copy integration files + symlink skills-src into cwd
+    const cwd = process.cwd();
+
+    // Copy integration files
+    if (config.files) {
+      for (const file of config.files) {
+        const src = path.join(PKG_ROOT, file);
+        const dst = path.join(cwd, file);
+        if (fs.existsSync(src)) {
+          copyFile(src, dst);
+          log(`Copied ${file}`);
+        }
+      }
+    }
+
+    // Symlink skills-src into project
+    const dst = path.join(cwd, "skills-src");
+    if (!fs.existsSync(dst)) {
+      try {
+        fs.symlinkSync(finalSkillsSrc, dst, "junction");
+        log(`Linked skills-src/ → ${finalSkillsSrc}`);
+      } catch {
+        log("Warning: Could not symlink skills-src/. Copy manually if needed.");
+      }
+    } else {
+      log("skills-src/ already exists in project.");
+    }
+  } else {
+    // Global: symlink individual skills into global dir
+    if (!skillsSrc) ensureSkillCache();
+    const linked = linkSkillsTo(config.dir, finalSkillsSrc);
+    log(`Linked ${linked} skills to ${config.dir}`);
+
+    // Copy project-level integration files if specified
+    if (config.files) {
+      const cwd = process.cwd();
+      for (const file of config.files) {
+        const src = path.join(PKG_ROOT, file);
+        const dst = path.join(cwd, file);
+        if (fs.existsSync(src)) {
+          copyFile(src, dst);
+          log(`Copied ${file} to project`);
+        }
+      }
+    }
+  }
+}
+
+function installAll() {
+  header("Frontend Design Skills — Installing for all detected platforms");
+
+  const skillsSrc = resolveSkillsSrc();
+  if (!skillsSrc) ensureSkillCache();
+
+  for (const [platform] of Object.entries(PLATFORMS)) {
+    installPlatform(platform);
+  }
+}
+
+function listSkills() {
+  header("Frontend Design Skills — 21 Skills");
+
+  const categories = {
+    Meta: ["webdesign-review"],
+    "Core Design": ["ui-design", "ux-design"],
+    Detail: ["web-typography", "color-theory", "accessibility"],
+    Implementation: [
+      "usability",
+      "responsive-design",
+      "navigation-design",
+      "images-media",
+      "branding-identity",
+    ],
+    Strategy: [
+      "customer-journey",
+      "design-process",
+      "ai-design-workflow",
+      "landing-pages",
+      "website-audit",
+    ],
+    "Trends & Patterns": [
+      "design-trends",
+      "ui-patterns",
+      "visual-direction",
+      "component-patterns",
+      "agent-ui-design",
+    ],
+  };
+
+  for (const [category, skills] of Object.entries(categories)) {
+    log(`\n  ${category}:`);
+    for (const skill of skills) {
+      log(`    - ${skill}`);
+    }
+  }
+
+  log(`\n  Total: 21 skills from 12 sources`);
+}
+
+function update() {
+  header("Updating Frontend Design Skills");
+  if (!fs.existsSync(SKILL_DIR)) {
+    log("Not installed yet. Run 'install' first.");
+    process.exit(1);
+  }
+  ensureSkillCache();
+  log("Done. Run 'install' again to re-link if needed.");
+}
+
+function showUsage() {
+  console.log(`
+  Frontend Design Skills — 21 web design skills for AI coding tools
+
+  Usage:
+    npx @flitzrrr/frontend-design-skills <command> [platform]
+
+  Commands:
+    install              Install for all detected platforms
+    install <platform>   Install for a specific platform
+    update               Pull latest skills
+    list                 List all available skills
+
+  Platforms:
+    ${Object.entries(PLATFORMS)
+      .map(([k, v]) => `${k.padEnd(16)} ${v.name}`)
+      .join("\n    ")}
+
+  Examples:
+    npx @flitzrrr/frontend-design-skills install
+    npx @flitzrrr/frontend-design-skills install codex
+    npx @flitzrrr/frontend-design-skills list
+`);
+}
+
+// Main
+const args = process.argv.slice(2);
+const command = args[0];
+
+switch (command) {
+  case "install":
+    if (args[1]) {
+      installPlatform(args[1]);
+    } else {
+      installAll();
+    }
+    break;
+  case "update":
+    update();
+    break;
+  case "list":
+    listSkills();
+    break;
+  default:
+    showUsage();
+    break;
+}

package/bin/test-cli.js

@@ -0,0 +1,119 @@
+#!/usr/bin/env node
+
+/**
+ * Basic tests for the frontend-design-skills CLI.
+ */
+
+const { execSync } = require("child_process");
+const path = require("path");
+const fs = require("fs");
+
+const CLI = path.join(__dirname, "cli.js");
+let passed = 0;
+let failed = 0;
+
+function test(name, fn) {
+  try {
+    fn();
+    console.log(`  PASS  ${name}`);
+    passed++;
+  } catch (err) {
+    console.log(`  FAIL  ${name}`);
+    console.log(`        ${err.message}`);
+    failed++;
+  }
+}
+
+function assert(condition, msg) {
+  if (!condition) throw new Error(msg || "Assertion failed");
+}
+
+function run(args = "") {
+  return execSync(`"${process.execPath}" "${CLI}" ${args}`, { encoding: "utf-8", timeout: 10000 });
+}
+
+console.log("\n> Frontend Design Skills — CLI Tests\n");
+
+// Test: no args shows usage
+test("no args shows usage", () => {
+  const out = run();
+  assert(out.includes("Usage:"), "Should show usage");
+  assert(out.includes("install"), "Should mention install command");
+  assert(out.includes("frontend-design-skills"), "Should mention package name");
+});
+
+// Test: list command
+test("list shows all 21 skills", () => {
+  const out = run("list");
+  assert(out.includes("21 Skills"), "Should show 21 skills");
+  assert(out.includes("webdesign-review"), "Should list webdesign-review");
+  assert(out.includes("ui-design"), "Should list ui-design");
+  assert(out.includes("agent-ui-design"), "Should list agent-ui-design");
+  assert(out.includes("Core Design"), "Should show Core Design category");
+  assert(out.includes("Trends & Patterns"), "Should show Trends category");
+});
+
+// Test: unknown platform errors
+test("unknown platform shows error", () => {
+  try {
+    run("install nonexistent-platform");
+    assert(false, "Should have thrown");
+  } catch (err) {
+    assert(err.stderr.includes("Unknown platform") || err.status !== 0, "Should error on unknown platform");
+  }
+});
+
+// Test: skills-src directory exists
+test("skills-src/ has 21 skills", () => {
+  const skillsDir = path.join(__dirname, "..", "skills-src");
+  const skills = fs
+    .readdirSync(skillsDir)
+    .filter(
+      (d) =>
+        !d.startsWith("_") &&
+        fs.statSync(path.join(skillsDir, d)).isDirectory() &&
+        fs.existsSync(path.join(skillsDir, d, "SKILL.md"))
+    );
+  assert(skills.length === 21, `Expected 21 skills, got ${skills.length}`);
+});
+
+// Test: all integration files exist
+test("integration files exist", () => {
+  const root = path.join(__dirname, "..");
+  const files = [
+    "CLAUDE.md",
+    "AGENTS.md",
+    ".cursorrules",
+    ".windsurfrules",
+    ".lovable",
+    ".github/copilot-instructions.md",
+  ];
+  for (const f of files) {
+    assert(fs.existsSync(path.join(root, f)), `Missing: ${f}`);
+  }
+});
+
+// Test: each SKILL.md has frontmatter
+test("all SKILL.md files have name and description", () => {
+  const skillsDir = path.join(__dirname, "..", "skills-src");
+  const skills = fs
+    .readdirSync(skillsDir)
+    .filter(
+      (d) =>
+        !d.startsWith("_") &&
+        fs.statSync(path.join(skillsDir, d)).isDirectory() &&
+        fs.existsSync(path.join(skillsDir, d, "SKILL.md"))
+    );
+  for (const skill of skills) {
+    const content = fs.readFileSync(
+      path.join(skillsDir, skill, "SKILL.md"),
+      "utf-8"
+    );
+    assert(content.startsWith("---"), `${skill}: Missing frontmatter`);
+    assert(content.includes("name:"), `${skill}: Missing name field`);
+    assert(content.includes("description:"), `${skill}: Missing description`);
+  }
+});
+
+console.log(`\n  ${passed} passed, ${failed} failed\n`);
+process.exit(failed > 0 ? 1 : 0);

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@flitzrrr/frontend-design-skills",
+  "version": "1.0.0",
+  "description": "21 opinionated web design skills from 12 curated sources — one install, every major AI coding tool.",
+  "scripts": {
+    "test": "node bin/test-cli.js",
+    "build": "python3 scripts/build-skills.py",
+    "validate": "python3 scripts/validate-skills.py",
+    "check-counts": "node scripts/update-counts.js --check",
+    "update-counts": "node scripts/update-counts.js"
+  },
+  "bin": {
+    "frontend-design-skills": "bin/cli.js"
+  },
+  "keywords": [
+    "ai",
+    "agent",
+    "skills",
+    "web-design",
+    "frontend",
+    "ui-design",
+    "ux-design",
+    "typography",
+    "accessibility",
+    "design-system",
+    "claude",
+    "cursor",
+    "windsurf",
+    "gemini",
+    "codex",
+    "aider",
+    "SKILL.md",
+    "AGENTS.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/flitzrrr/frontend-design-skills.git"
+  },
+  "author": "flitzrrr",
+  "license": "MIT",
+  "files": [
+    "bin/",
+    "skills-src/",
+    "spec/",
+    "AGENTS.md",
+    "CLAUDE.md",
+    ".cursorrules",
+    ".windsurfrules",
+    ".lovable",
+    ".github/copilot-instructions.md",
+    ".aider/conventions.md",
+    "README.md",
+    "LICENSE"
+  ]
+}

package/skills-src/_template/SKILL.md

@@ -0,0 +1,36 @@
+---
+name: SKILL-NAME-HERE
+description: DESCRIPTION-HERE
+---
+
+# DOMAIN-TITEL
+
+> KURZBESCHREIBUNG
+
+## Anwendungsbereich
+
+Verwende diesen Skill wenn: ANWENDUNGSFALL
+
+## Prinzipien
+
+<!-- Übernahme der wichtigsten Prinzipien aus der Domain-Spezifikation -->
+
+## Regeln
+
+<!-- DO/DON'T Regeln, priorisiert nach Wirkung -->
+
+## Patterns
+
+<!-- Empfohlene Muster mit Codebeispielen -->
+
+## Anti-Patterns
+
+<!-- Häufige Fehler mit Erklärung -->
+
+## Checkliste
+
+<!-- Prüfpunkte vor Abschluss einer Aufgabe -->
+
+## Querverweise
+
+<!-- Links zu verwandten Skills und Domain-Dateien -->