@hasna/skills 0.1.62 → 0.1.64

package/skills/siteanalyze/src/index.ts

@@ -1,592 +0,0 @@
-#!/usr/bin/env bun
-/**
- * siteanalyze — Analyze any website's design system via Playwright + AI Vision
- * Supports multiple providers: anthropic, openai, xai, gemini
- */
-import { writeFileSync, existsSync, mkdirSync } from "fs";
-import { tmpdir } from "os";
-import { join } from "path";
-import {
-  analyzeImage,
-  detectProvider,
-  listAvailableProviders,
-  parseJsonResponse,
-  type VisionProvider,
-} from "../../_common/vision.js";
-
-// ============================================================================
-// Types
-// ============================================================================
-
-export interface DesignColors {
-  primary?: string;
-  secondary?: string;
-  accent?: string;
-  background?: string;
-  text?: string;
-  border?: string;
-  muted?: string;
-  [key: string]: string | undefined;
-}
-
-export interface TypographyScale {
-  fontFamilies: string[];
-  sizes: string[];
-  weights: string[];
-  lineHeights?: string[];
-}
-
-export interface ComponentPattern {
-  name: string;
-  description: string;
-}
-
-export interface SiteAnalyzeResult {
-  url: string;
-  framework: string | null;
-  hasShadcn: boolean;
-  hasTailwind: boolean;
-  colors: DesignColors;
-  typography: TypographyScale;
-  components: ComponentPattern[];
-  provider: VisionProvider | null;
-  model: string | null;
-  openStylesProfile: {
-    name: string;
-    displayName: string;
-    category: string;
-    description: string;
-    colors: Record<string, string>;
-    typography: TypographyScale;
-    framework: string | null;
-    tags: string[];
-  };
-  screenshotPath?: string;
-  rawAnalysis?: string;
-}
-
-// ============================================================================
-// HTML/CSS analysis (quick mode — no browser needed)
-// ============================================================================
-
-async function fetchPageSource(url: string): Promise<string> {
-  const response = await fetch(url, {
-    headers: {
-      "User-Agent":
-        "Mozilla/5.0 (compatible; siteanalyze/1.0; +https://github.com/hasna/skills)",
-    },
-  });
-  if (!response.ok) {
-    throw new Error(`Failed to fetch ${url}: ${response.status} ${response.statusText}`);
-  }
-  return response.text();
-}
-
-function detectFrameworkFromHtml(html: string): {
-  hasShadcn: boolean;
-  hasTailwind: boolean;
-  framework: string | null;
-} {
-  const lower = html.toLowerCase();
-  const hasShadcn =
-    lower.includes("shadcn") ||
-    lower.includes("@radix-ui") ||
-    lower.includes("radix-ui") ||
-    lower.includes("cmdk") ||
-    lower.includes("data-radix");
-  const hasTailwind =
-    lower.includes("tailwind") ||
-    lower.includes("tw-") ||
-    /class="[^"]*\b(flex|grid|p-\d|m-\d|text-\w+|bg-\w+|border-\w+)\b/.test(html);
-
-  let framework: string | null = null;
-  if (hasShadcn) {
-    framework = "shadcn/ui";
-  } else if (lower.includes("mui") || lower.includes("material-ui")) {
-    framework = "Material UI";
-  } else if (lower.includes("chakra")) {
-    framework = "Chakra UI";
-  } else if (lower.includes("mantine")) {
-    framework = "Mantine";
-  } else if (lower.includes("antd") || lower.includes("ant-design")) {
-    framework = "Ant Design";
-  } else if (lower.includes("bootstrap")) {
-    framework = "Bootstrap";
-  } else if (hasTailwind) {
-    framework = "Tailwind CSS";
-  }
-
-  return { hasShadcn, hasTailwind, framework };
-}
-
-function extractColorsFromCss(html: string): DesignColors {
-  const colors: DesignColors = {};
-  const hexPattern = /#([0-9A-Fa-f]{3,8})\b/g;
-  const cssVarPattern = /--[\w-]+:\s*(#[0-9A-Fa-f]{3,8}|rgba?\([^)]+\)|hsla?\([^)]+\))/g;
-
-  // Try to extract CSS custom properties (most reliable)
-  const varMatches = [...html.matchAll(cssVarPattern)].slice(0, 20);
-  if (varMatches.length > 0) {
-    for (const match of varMatches) {
-      const varName = match[0].split(":")[0].trim();
-      const value = match[1].trim();
-      if (varName.includes("primary")) colors.primary = value;
-      else if (varName.includes("secondary")) colors.secondary = value;
-      else if (varName.includes("accent")) colors.accent = value;
-      else if (varName.includes("background") || varName.includes("bg")) colors.background = value;
-      else if (varName.includes("foreground") || varName.includes("text")) colors.text = value;
-      else if (varName.includes("border")) colors.border = value;
-      else if (varName.includes("muted")) colors.muted = value;
-    }
-  }
-
-  // Fall back to raw hex extraction from inline styles
-  if (Object.keys(colors).length === 0) {
-    const hexMatches = [...html.matchAll(hexPattern)].map((m) => m[0]);
-    const unique = [...new Set(hexMatches)].slice(0, 5);
-    if (unique[0]) colors.primary = unique[0];
-    if (unique[1]) colors.secondary = unique[1];
-    if (unique[2]) colors.accent = unique[2];
-  }
-
-  return colors;
-}
-
-// ============================================================================
-// Vision-based analysis
-// ============================================================================
-
-async function captureScreenshot(url: string): Promise<string | null> {
-  // Try to use playwright if available
-  try {
-    // Dynamic import so the skill works without playwright installed
-    const { chromium } = await import("playwright" as never) as {
-      chromium: {
-        launch: (opts?: Record<string, unknown>) => Promise<{
-          newPage: () => Promise<{
-            goto: (url: string, opts?: Record<string, unknown>) => Promise<unknown>;
-            screenshot: (opts?: Record<string, unknown>) => Promise<Buffer>;
-            close: () => Promise<void>;
-          }>;
-          close: () => Promise<void>;
-        }>;
-      };
-    };
-
-    const tmpDir = join(tmpdir(), "siteanalyze");
-    if (!existsSync(tmpDir)) {
-      mkdirSync(tmpDir, { recursive: true });
-    }
-    const screenshotPath = join(tmpDir, `screenshot-${Date.now()}.png`);
-
-    const browser = await chromium.launch({ headless: true });
-    const page = await browser.newPage();
-    await page.goto(url, { waitUntil: "networkidle", timeout: 30000 });
-    const buffer = await page.screenshot({ path: screenshotPath, fullPage: false });
-    await page.close();
-    await browser.close();
-
-    return screenshotPath;
-  } catch {
-    return null;
-  }
-}
-
-async function analyzeScreenshot(
-  screenshotPath: string,
-  url: string,
-  options: { provider?: VisionProvider; model?: string }
-): Promise<{
-  colors: DesignColors;
-  typography: TypographyScale;
-  components: ComponentPattern[];
-  styleCategory: string;
-  description: string;
-  rawAnalysis: string;
-  provider: VisionProvider;
-  model: string;
-}> {
-  const { readFileSync } = await import("fs");
-  const imageBase64 = readFileSync(screenshotPath).toString("base64");
-
-  const prompt = `Analyze this website screenshot from ${url}.
-
-Extract:
-1. Color palette — primary, secondary, accent, background, text, border, muted colors (hex values)
-2. Typography — font families used, size scale, font weights
-3. UI components — list the main component patterns you see (buttons, cards, nav, etc.)
-4. Design style category (minimalist/corporate/startup/editorial/material/glassmorphism/brutalist/neubrutalism)
-5. Brief description of the overall design system
-
-Respond ONLY with valid JSON:
-{
-  "colors": {
-    "primary": "#...",
-    "secondary": "#...",
-    "accent": "#...",
-    "background": "#...",
-    "text": "#...",
-    "border": "#...",
-    "muted": "#..."
-  },
-  "typography": {
-    "fontFamilies": ["..."],
-    "sizes": ["xs", "sm", "base", "lg", "xl", "2xl"],
-    "weights": ["400", "500", "600", "700"]
-  },
-  "components": [
-    { "name": "Button", "description": "Rounded pill buttons with primary color fill" }
-  ],
-  "styleCategory": "minimalist",
-  "description": "..."
-}`;
-
-  const result = await analyzeImage(imageBase64, "image/png", prompt, {
-    provider: options.provider,
-    model: options.model,
-    jsonMode: true,
-    maxTokens: 2048,
-  });
-
-  const parsed = parseJsonResponse(result.text) as {
-    colors: DesignColors;
-    typography: TypographyScale;
-    components: ComponentPattern[];
-    styleCategory: string;
-    description: string;
-  };
-
-  return {
-    colors: parsed.colors ?? {},
-    typography: parsed.typography ?? { fontFamilies: [], sizes: [], weights: [] },
-    components: parsed.components ?? [],
-    styleCategory: parsed.styleCategory ?? "unknown",
-    description: parsed.description ?? "",
-    rawAnalysis: result.text,
-    provider: result.provider,
-    model: result.model,
-  };
-}
-
-// ============================================================================
-// Core analysis function
-// ============================================================================
-
-export async function analyzeSite(
-  url: string,
-  options?: {
-    provider?: VisionProvider;
-    model?: string;
-    quickMode?: boolean; // skip screenshot/vision — HTML analysis only
-  }
-): Promise<SiteAnalyzeResult> {
-  // Fetch HTML for framework/color detection
-  const html = await fetchPageSource(url);
-  const { hasShadcn, hasTailwind, framework } = detectFrameworkFromHtml(html);
-  const quickColors = extractColorsFromCss(html);
-
-  const availableProviders = listAvailableProviders();
-  const useVision = !options?.quickMode && availableProviders.length > 0;
-
-  if (!useVision) {
-    // Quick mode or no provider available — return HTML analysis only
-    return {
-      url,
-      framework,
-      hasShadcn,
-      hasTailwind,
-      colors: quickColors,
-      typography: { fontFamilies: [], sizes: [], weights: [] },
-      components: [],
-      provider: null,
-      model: null,
-      openStylesProfile: {
-        name: `site-${Date.now()}`,
-        displayName: url,
-        category: framework ?? "Unknown",
-        description: `Design system extracted from ${url} (HTML analysis only)`,
-        colors: quickColors as Record<string, string>,
-        typography: { fontFamilies: [], sizes: [], weights: [] },
-        framework,
-        tags: [
-          "extracted",
-          "auto-generated",
-          ...(hasShadcn ? ["shadcn"] : []),
-          ...(hasTailwind ? ["tailwind"] : []),
-        ],
-      },
-    };
-  }
-
-  // Vision-based analysis
-  const screenshotPath = await captureScreenshot(url);
-  let visionResult: Awaited<ReturnType<typeof analyzeScreenshot>> | null = null;
-
-  if (screenshotPath) {
-    visionResult = await analyzeScreenshot(screenshotPath, url, {
-      provider: options?.provider,
-      model: options?.model,
-    });
-  }
-
-  const colors = visionResult?.colors ?? quickColors;
-  const typography = visionResult?.typography ?? { fontFamilies: [], sizes: [], weights: [] };
-  const components = visionResult?.components ?? [];
-  const styleCategory = visionResult?.styleCategory ?? framework ?? "Unknown";
-  const description =
-    visionResult?.description ??
-    `Design system extracted from ${url}`;
-
-  return {
-    url,
-    framework,
-    hasShadcn,
-    hasTailwind,
-    colors,
-    typography,
-    components,
-    provider: visionResult?.provider ?? null,
-    model: visionResult?.model ?? null,
-    screenshotPath: screenshotPath ?? undefined,
-    rawAnalysis: visionResult?.rawAnalysis,
-    openStylesProfile: {
-      name: `site-${Date.now()}`,
-      displayName: url,
-      category: styleCategory,
-      description,
-      colors: colors as Record<string, string>,
-      typography,
-      framework,
-      tags: [
-        "extracted",
-        "auto-generated",
-        ...(hasShadcn ? ["shadcn"] : []),
-        ...(hasTailwind ? ["tailwind"] : []),
-      ],
-    },
-  };
-}
-
-// ============================================================================
-// CLI
-// ============================================================================
-
-type OutputFormat = "profile" | "colors" | "full";
-
-interface CliOptions {
-  url: string | null;
-  format: OutputFormat;
-  output: string | null;
-  provider: VisionProvider | null;
-  model: string | null;
-  quickMode: boolean;
-}
-
-function parseArgs(argv: string[]): { command: string; options: CliOptions } {
-  const args = argv.slice(2);
-
-  let command = "help";
-  const options: CliOptions = {
-    url: null,
-    format: "full",
-    output: null,
-    provider: null,
-    model: null,
-    quickMode: false,
-  };
-
-  if (args.length === 0) {
-    return { command: "help", options };
-  }
-
-  const firstArg = args[0];
-  if (firstArg === "analyze") {
-    command = "analyze";
-  } else if (
-    firstArg === "help" ||
-    firstArg === "--help" ||
-    firstArg === "-h"
-  ) {
-    command = "help";
-  } else if (firstArg.startsWith("http://") || firstArg.startsWith("https://")) {
-    // Allow `siteanalyze <url>` shorthand
-    command = "analyze";
-    options.url = firstArg;
-    args.splice(0, 1);
-    // Re-parse remaining flags below (shift args[0] already used)
-    for (let i = 0; i < args.length; i++) {
-      const arg = args[i];
-      if ((arg === "--format" || arg === "-f") && args[i + 1]) {
-        const fmt = args[++i];
-        if (fmt === "profile" || fmt === "colors" || fmt === "full") {
-          options.format = fmt;
-        }
-      } else if ((arg === "--output" || arg === "-o") && args[i + 1]) {
-        options.output = args[++i];
-      } else if (arg === "--provider" && args[i + 1]) {
-        const p = args[++i] as VisionProvider;
-        if (["anthropic", "openai", "xai", "gemini"].includes(p)) options.provider = p;
-      } else if (arg === "--model" && args[i + 1]) {
-        options.model = args[++i];
-      } else if (arg === "--quick") {
-        options.quickMode = true;
-      }
-    }
-    return { command, options };
-  } else {
-    command = "help";
-  }
-
-  for (let i = 1; i < args.length; i++) {
-    const arg = args[i];
-    if ((arg === "--url" || arg === "-u") && args[i + 1]) {
-      options.url = args[++i];
-    } else if ((arg === "--format" || arg === "-f") && args[i + 1]) {
-      const fmt = args[++i];
-      if (fmt === "profile" || fmt === "colors" || fmt === "full") {
-        options.format = fmt;
-      } else {
-        console.error(`Invalid format: ${fmt}. Use: profile, colors, full`);
-        process.exit(1);
-      }
-    } else if ((arg === "--output" || arg === "-o") && args[i + 1]) {
-      options.output = args[++i];
-    } else if (arg === "--provider" && args[i + 1]) {
-      const p = args[++i] as VisionProvider;
-      if (["anthropic", "openai", "xai", "gemini"].includes(p)) {
-        options.provider = p;
-      } else {
-        console.error(`Invalid provider: ${p}. Use: anthropic, openai, xai, gemini`);
-        process.exit(1);
-      }
-    } else if (arg === "--model" && args[i + 1]) {
-      options.model = args[++i];
-    } else if (arg === "--quick") {
-      options.quickMode = true;
-    }
-  }
-
-  return { command, options };
-}
-
-function printHelp(): void {
-  const available = listAvailableProviders();
-  console.log(`
-siteanalyze — Analyze any website's design system via Playwright + AI Vision
-
-USAGE
-  siteanalyze <url> [options]
-  siteanalyze analyze --url <url> [options]
-  siteanalyze help
-
-COMMANDS
-  analyze   Analyze a website's design system (default when URL is given)
-  help      Show this help message
-
-OPTIONS
-  --url, -u <url>          Website URL to analyze (required)
-  --format, -f <format>    Output format: profile | colors | full (default: full)
-  --output, -o <file>      Write JSON result to file instead of stdout
-  --provider <name>        AI provider: anthropic | openai | xai | gemini (auto-detected)
-  --model <name>           Model override (uses provider default if not set)
-  --quick                  Skip AI vision analysis — HTML/CSS analysis only
-
-FORMATS
-  profile   Print only the open-styles compatible profile object
-  colors    Print only the extracted colors
-  full      Print the complete analysis result (default)
-
-EXAMPLES
-  siteanalyze https://vercel.com
-  siteanalyze https://stripe.com --format profile
-  siteanalyze https://tailwindcss.com --provider openai
-  siteanalyze https://shadcn.com --quick
-  siteanalyze analyze --url https://example.com --output ./profile.json
-
-ENVIRONMENT
-  ANTHROPIC_API_KEY   Claude API key (anthropic provider)
-  OPENAI_API_KEY      OpenAI API key (openai provider)
-  XAI_API_KEY         xAI API key (xai provider)
-  GEMINI_API_KEY      Google Gemini API key (gemini provider)
-
-AVAILABLE PROVIDERS
-  ${available.length > 0 ? available.join(", ") : "(none — set an API key for vision analysis, or use --quick)"}
-`);
-}
-
-async function main(): Promise<void> {
-  const { command, options } = parseArgs(process.argv);
-
-  if (command === "help") {
-    printHelp();
-    process.exit(0);
-  }
-
-  if (command === "analyze") {
-    if (!options.url) {
-      console.error("Error: URL is required.");
-      console.error(
-        "Run `siteanalyze help` for usage."
-      );
-      process.exit(1);
-    }
-
-    const available = listAvailableProviders();
-    if (!options.quickMode && available.length === 0) {
-      console.warn(
-        "Warning: No AI provider API key found — running in quick mode (HTML analysis only)."
-      );
-      console.warn(
-        "Set ANTHROPIC_API_KEY, OPENAI_API_KEY, XAI_API_KEY, or GEMINI_API_KEY for visual analysis."
-      );
-      options.quickMode = true;
-    }
-
-    try {
-      console.error(`Analyzing ${options.url}...`);
-
-      const result = await analyzeSite(options.url, {
-        provider: options.provider ?? undefined,
-        model: options.model ?? undefined,
-        quickMode: options.quickMode,
-      });
-
-      let output: unknown;
-      if (options.format === "colors") {
-        output = result.colors;
-      } else if (options.format === "profile") {
-        output = result.openStylesProfile;
-      } else {
-        output = {
-          url: result.url,
-          framework: result.framework,
-          hasShadcn: result.hasShadcn,
-          hasTailwind: result.hasTailwind,
-          colors: result.colors,
-          typography: result.typography,
-          components: result.components,
-          provider: result.provider,
-          model: result.model,
-          openStylesProfile: result.openStylesProfile,
-        };
-      }
-
-      const json = JSON.stringify(output, null, 2);
-
-      if (options.output) {
-        writeFileSync(options.output, json, "utf-8");
-        console.error(`Result written to: ${options.output}`);
-      } else {
-        console.log(json);
-      }
-    } catch (error) {
-      console.error(
-        "Error:",
-        error instanceof Error ? error.message : String(error)
-      );
-      process.exit(1);
-    }
-  }
-}
-
-main();

package/skills/slide-deck-generator/SKILL.md

@@ -1,93 +0,0 @@
----
-name: slide-deck-generator
-description: Turn a brief or Markdown outline into a real slide deck locally - structured slides.json, deck.md, speaker notes, theme guide, a self-contained keyboard-navigable HTML deck, and a PPTX file.
----
-
-# Slide Deck Generator
-
-Parse a brief, outline, report, or product narrative into a slide model, then render it to several
-formats at once. This is the local binary renderer: it does the deterministic parsing, layout, and
-file writing so no model call is needed to produce the artifacts.
-
-`pitch-deck` is an instruction skill that decides the narrative and then delegates the actual
-rendering to this skill. Anything that needs a real `.pptx` or a shareable HTML deck should call
-`slide-deck-generator`.
-
-Everything runs locally. No API keys, no network calls, no accounts.
-
-## Requirements
-
-- [Bun](https://bun.sh) 1.1+.
-- `bun install` inside this skill directory. Runtime dependencies:
-  - `marked` — Markdown tokenizing for `--source` outlines.
-  - `pptxgenjs` — writes the real `deck.pptx` (Open XML zip package).
-- No API keys and no network access. `deck.html` embeds all CSS and JS inline and makes zero
-  external requests.
-
-## Usage
-
-```bash
-# From a Markdown outline
-bun run src/index.ts --source ./outline.md --slides 10 --theme aurora \
-  --audience executives --format report --output ./out
-
-# From a one-paragraph brief
-bun run src/index.ts --brief "Q2 launch review for AI billing" --slides 8 --theme midnight
-
-# Skip PPTX rendering, emit machine-readable manifest
-bun run src/index.ts --source ./outline.md --no-pptx --json
-```
-
-Open `out/deck.html` in any browser: `←`/`→` (or space) to navigate, `Home`/`End` to jump, `N` to
-toggle speaker notes, `Ctrl/Cmd-P` to print one slide per page.
-
-### Markdown parsing rules
-
-- The first `#` heading becomes the deck title (unless `--title` is given).
-- Each `#`/`##` heading starts a new slide; `###` headings become bullets.
-- List items become bullets; paragraphs become speaker notes (and become bullets when a slide would
-  otherwise be empty); blockquotes become full-bleed quote slides; the first lines of a code block
-  become bullets.
-- Plain prose with no Markdown structure is split into sentences and grouped into slides.
-- The deck is then fitted to `--slides`: dense slides split into `(cont.)` slides, short adjacent
-  slides merge, and any remaining gap is filled with format-appropriate scaffold slides.
-
-## Options
-
-| Option | Description | Default |
-|--------|-------------|---------|
-| `-b, --brief <text>` | Brief, outline, or narrative text. Also accepted as a bare positional argument. | — |
-| `-s, --source <path>` | Read the brief/outline from a Markdown or text file. | — |
-| `-t, --title <text>` | Deck title. | first `#` heading, else first line of the brief |
-| `-n, --slides <n>` | Target slide count (1–60). | `8` |
-| `--theme <name>` | `midnight`, `aurora`, `sandstone`, `ocean`, or `mono`. | `midnight` |
-| `--audience <type>` | `team`, `customers`, `executives`, or `students`. Shapes the speaker notes. | `team` |
-| `--format <type>` | `general`, `training`, `sales`, `report`, or `proposal`. Shapes the closing slides. | `general` |
-| `-o, --output <dir>` | Output directory. | `./slide-deck` |
-| `--no-pptx` | Skip `deck.pptx`; still write every other file. | off |
-| `--json` | Print `manifest.json` to stdout instead of the text summary. | off |
-| `-h, --help` | Show help. | — |
-| `-v, --version` | Show version. | — |
-
-Either `--brief` or `--source` is required.
-
-## Outputs
-
-Written under `--output`:
-
-| File | Contents |
-|------|----------|
-| `slides.json` | The slide model: index, layout (`title`/`agenda`/`bullets`/`section`/`quote`/`closing`), title, subtitle, bullets, and notes per slide. |
-| `deck.md` | Readable Markdown deck, one `---` separated section per slide with inline notes. |
-| `speaker-notes.md` | Per-slide talk track, on-screen recap, runtime estimate, and a delivery checklist. |
-| `theme-guide.md` | Palette hex values, typography scale, layout rules, and how to swap themes. |
-| `deck.html` | Self-contained reveal-style deck: inline CSS/JS, keyboard + click navigation, progress bar, notes toggle, and a print stylesheet that paginates one slide per page. No external requests. |
-| `deck.pptx` | Real PowerPoint file written by `pptxgenjs` (16:9), including per-slide speaker notes. Opens in PowerPoint, Keynote, LibreOffice, and Google Slides. |
-| `manifest.json` | Run metadata: title, source, theme, audience, format, slide count, layouts, and file list. |
-
-## Notes
-
-- PPTX rendering failures are non-fatal: the other files are still written, a warning goes to
-  stderr, and `manifest.json` records `pptx: "failed: …"`.
-- Scaffold slides added to reach `--slides` are labelled in their notes so they are easy to find and
-  replace before presenting.