@rune-kit/rune 2.1.1 → 2.2.1

package/extensions/content/skills/content-scoring.md

@@ -0,0 +1,107 @@
+---
+name: "content-scoring"
+pack: "@rune/content"
+description: "Engagement and virality scoring for content pieces. Analyze hooks, readability, shareability, and platform fit."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# content-scoring
+
+Engagement and virality scoring for content pieces. Analyze hooks, readability, shareability, and platform fit. Works for both video clips and written articles.
+
+#### Workflow
+
+**Step 1 — Detect content type**
+Determine if scoring target is:
+- **Video clip** (from video-repurpose pipeline or standalone)
+- **Blog post / article** (markdown, MDX, or CMS content)
+- **Social post** (short-form text, tweet, thread)
+
+**Step 2 — Score across 4 dimensions**
+```typescript
+interface ContentScore {
+  hook: {
+    score: number;        // 0-25
+    type: 'question' | 'statistic' | 'story' | 'contrast' | 'bold-claim' | 'how-to';
+    assessment: string;   // Why this hook works or doesn't
+  };
+  engagement: {
+    score: number;        // 0-25
+    readability: number;  // Flesch-Kincaid grade level
+    pacing: string;       // 'too-slow' | 'good' | 'too-fast'
+    callToAction: boolean;
+  };
+  value: {
+    score: number;        // 0-25
+    teaches: boolean;
+    entertains: boolean;
+    uniqueInsight: boolean;
+  };
+  shareability: {
+    score: number;        // 0-25
+    emotionalTrigger: string | null;  // 'surprise' | 'anger' | 'joy' | 'fear'
+    quotable: string[];   // Extract quotable one-liners
+    platformFit: Record<Platform, number>;  // 0-10 per platform
+  };
+  total: number;          // 0-100
+  tier: 'viral' | 'strong' | 'average' | 'weak';  // >80 viral, >60 strong, >40 average
+}
+```
+
+**Step 3 — Platform-specific optimization hints**
+Each platform has different engagement patterns:
+| Platform | Hook Window | Optimal Length | Key Factor |
+|----------|-------------|---------------|------------|
+| TikTok | 0-1s | 15-30s | Pattern interrupt, trend audio |
+| YouTube | 0-3s | 8-12 min (long), 30-60s (Shorts) | Curiosity gap, retention graph |
+| Twitter/X | First line | 280 chars or 4-tweet thread | Hot take, data point |
+| LinkedIn | First 2 lines | 150-300 words | Professional insight, personal story |
+| Blog | Title + first paragraph | 1500-2500 words | SEO keyword + value promise |
+
+**Step 4 — Emit improvement suggestions**
+For each dimension scoring < 20/25, emit specific actionable improvement:
+- Hook weak → suggest rewrite with stronger opening pattern
+- Engagement low → identify pacing issues, suggest cuts or restructures
+- Value low → identify where content is generic, suggest unique angle
+- Shareability low → suggest quotable reformulations, emotional triggers
+
+#### Example
+
+```typescript
+// Scoring a blog post
+const score = await scoreContent({
+  type: 'article',
+  title: 'How We Cut Our AWS Bill by 60%',
+  content: articleMarkdown,
+  targetPlatforms: ['blog', 'twitter', 'linkedin'],
+});
+
+// Result:
+// {
+//   hook: { score: 22, type: 'statistic', assessment: 'Strong — specific number creates curiosity' },
+//   engagement: { score: 18, readability: 8.2, pacing: 'good', callToAction: true },
+//   value: { score: 20, teaches: true, entertains: false, uniqueInsight: true },
+//   shareability: {
+//     score: 19, emotionalTrigger: 'surprise',
+//     quotable: ['We were paying $12K/mo for a service we used 3% of'],
+//     platformFit: { blog: 9, twitter: 8, linkedin: 9 }
+//   },
+//   total: 79, tier: 'strong'
+// }
+
+// Improvement suggestions:
+// - Shareability: Add a contrarian angle ("Everyone says X, but we found Y")
+// - Engagement: Add a visual comparison (before/after cost graph)
+```
+
+```typescript
+// Scoring a video clip
+const clipScore = await scoreContent({
+  type: 'video-clip',
+  transcript: clipTranscript,
+  duration: 28_000,  // 28 seconds
+  hookType: 'question',
+  targetPlatforms: ['tiktok', 'youtube-shorts', 'instagram-reels'],
+});
+```

package/extensions/content/skills/i18n.md

@@ -0,0 +1,83 @@
+---
+name: "i18n"
+pack: "@rune/content"
+description: "Locale routing, translations, hreflang, RTL support, date/number formatting, content translation workflows, language detection."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# i18n
+
+Internationalization — locale routing, translation management, RTL support, date/number formatting, content translation workflows, language detection.
+
+#### Workflow
+
+**Step 1 — Detect i18n setup**
+Use Grep to find i18n libraries: `next-intl`, `i18next`, `react-intl`, `@formatjs`, `lingui`, `paraglide`. Use Glob to find translation files: `locales/`, `messages/`, `translations/`, `*.json` in locale directories. Read the i18n configuration to understand: supported locales, default locale, routing strategy, and translation loading method.
+
+**Step 2 — Audit i18n correctness**
+Check for: missing translations (keys present in default locale but not in others), no fallback chain (missing key shows raw key to user), locale not in URL (breaks SEO — Google can't index per-locale pages), no `hreflang` tags (search engines don't know about locale variants), hardcoded strings in components (bypassing translation system), date/number formatting without locale context (`toLocaleDateString()` without explicit locale), and no RTL support for Arabic/Hebrew locales.
+
+**Step 3 — Emit i18n patterns**
+Emit: type-safe translation keys with IDE autocomplete, locale routing middleware, `hreflang` tag generator, date/number formatting utilities, missing translation detection script, and RTL-aware layout component.
+
+#### Example
+
+```typescript
+// next-intl — type-safe translations with locale routing (Next.js App Router)
+// messages/en.json: { "home": { "title": "Welcome", "posts": "Latest {count, plural, one {post} other {posts}}" } }
+// messages/vi.json: { "home": { "title": "Chao mung", "posts": "{count} bai viet moi nhat" } }
+
+// middleware.ts — locale routing
+import createMiddleware from 'next-intl/middleware';
+
+export default createMiddleware({
+  locales: ['en', 'vi', 'ja'],
+  defaultLocale: 'en',
+  localePrefix: 'as-needed', // /en/about → /about (default), /vi/about stays
+});
+
+export const config = { matcher: ['/((?!api|_next|.*\\..*).*)'] };
+
+// Hreflang tags — app/[locale]/layout.tsx
+function HreflangTags({ locale, path }: { locale: string; path: string }) {
+  const locales = ['en', 'vi', 'ja'];
+  return (
+    <>
+      {locales.map(l => (
+        <link key={l} rel="alternate" hrefLang={l} href={`${process.env.SITE_URL}/${l}${path}`} />
+      ))}
+      <link rel="alternate" hrefLang="x-default" href={`${process.env.SITE_URL}${path}`} />
+    </>
+  );
+}
+
+// Type-safe translations in components
+import { useTranslations } from 'next-intl';
+
+function HomePage() {
+  const t = useTranslations('home');
+  return <h1>{t('title')}</h1>; // IDE autocomplete for keys
+}
+
+// CI script — detect missing translation keys
+// scripts/check-translations.ts
+import en from '../messages/en.json';
+import vi from '../messages/vi.json';
+
+function flattenKeys(obj: Record<string, unknown>, prefix = ''): string[] {
+  return Object.entries(obj).flatMap(([k, v]) =>
+    typeof v === 'object' && v !== null
+      ? flattenKeys(v as Record<string, unknown>, `${prefix}${k}.`)
+      : [`${prefix}${k}`]
+  );
+}
+
+const enKeys = new Set(flattenKeys(en));
+const viKeys = new Set(flattenKeys(vi));
+const missing = [...enKeys].filter(k => !viKeys.has(k));
+if (missing.length) {
+  console.error('Missing vi translations:', missing);
+  process.exit(1);
+}
+```

package/extensions/content/skills/mdx-authoring.md

@@ -0,0 +1,137 @@
+---
+name: "mdx-authoring"
+pack: "@rune/content"
+description: "Custom components in markdown, code blocks with syntax highlighting, interactive examples, table of contents generation."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# mdx-authoring
+
+MDX authoring patterns — custom components in markdown, code blocks with syntax highlighting, interactive examples, table of contents generation.
+
+#### Workflow
+
+**Step 1 — Detect MDX setup**
+Use Grep to find MDX configuration: `@next/mdx`, `mdx-bundler`, `next-mdx-remote`, `contentlayer`, `rehype`, `remark`. Read the MDX pipeline config to understand: compilation method, custom components registered, and remark/rehype plugin chain.
+
+**Step 2 — Audit MDX pipeline**
+Check for: no custom component fallback (missing component crashes build), code blocks without syntax highlighting (plain text), no table of contents generation (long articles hard to navigate), missing image optimization in MDX (raw `<img>` tags), no frontmatter validation (typos in dates or categories silently pass), and no interactive component sandboxing.
+
+**Step 3 — Emit MDX patterns**
+Emit: MDX component registry with fallback for missing components, code block with syntax highlighting (Shiki or Prism), auto-generated TOC from headings, frontmatter schema validation, and callout/admonition components.
+
+#### Example — Component Registry
+
+```tsx
+// MDX component registry with safe fallback
+import { type MDXComponents } from 'mdx/types';
+import { Callout } from '@/components/callout';
+import { CodeBlock } from '@/components/code-block';
+import Image from 'next/image';
+
+export function useMDXComponents(): MDXComponents {
+  return {
+    img: ({ src, alt, ...props }) => (
+      <Image src={src!} alt={alt || ''} width={800} height={400} className="rounded-lg" {...props} />
+    ),
+    pre: ({ children, ...props }) => <CodeBlock {...props}>{children}</CodeBlock>,
+    Callout,
+  };
+}
+
+// Auto-generated TOC from MDX content
+interface TocItem { id: string; text: string; level: number }
+
+function extractToc(raw: string): TocItem[] {
+  const headingRegex = /^(#{2,4})\s+(.+)$/gm;
+  const items: TocItem[] = [];
+  let match;
+  while ((match = headingRegex.exec(raw))) {
+    const text = match[2].replace(/[`*_~]/g, '');
+    items.push({ id: text.toLowerCase().replace(/\s+/g, '-'), text, level: match[1].length });
+  }
+  return items;
+}
+
+// Callout component for MDX
+function Callout({ type = 'info', children }: { type?: 'info' | 'warning' | 'error'; children: React.ReactNode }) {
+  const styles = { info: 'bg-blue-50 border-blue-400', warning: 'bg-amber-50 border-amber-400', error: 'bg-red-50 border-red-400' };
+  return <div className={`border-l-4 p-4 my-4 rounded-r ${styles[type]}`}>{children}</div>;
+}
+```
+
+#### Example — Shiki Syntax Highlighting
+
+```typescript
+// rehype-shiki integration in contentlayer or next.config.mjs
+import { rehypeShiki } from '@shikijs/rehype';
+import { defineDocumentType, makeSource } from 'contentlayer/source-files';
+
+export default makeSource({
+  mdxOptions: {
+    rehypePlugins: [
+      [rehypeShiki, {
+        themes: { light: 'github-light', dark: 'github-dark' },
+        addLanguageClass: true,
+      }],
+    ],
+  },
+});
+
+// CodeBlock component with copy-to-clipboard
+'use client';
+import { useState } from 'react';
+
+export function CodeBlock({ children, className }: { children: React.ReactNode; className?: string }) {
+  const [copied, setCopied] = useState(false);
+  const code = typeof children === 'string' ? children : '';
+
+  async function copy() {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  return (
+    <div className="relative group">
+      <pre className={className}>{children}</pre>
+      <button
+        onClick={copy}
+        aria-label="Copy code"
+        className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity px-2 py-1 text-xs bg-gray-700 text-white rounded"
+      >
+        {copied ? 'Copied!' : 'Copy'}
+      </button>
+    </div>
+  );
+}
+```
+
+#### Example — Frontmatter Validation
+
+```typescript
+// contentlayer.config.ts — Zod-like validation via defineDocumentType
+import { defineDocumentType } from 'contentlayer/source-files';
+
+export const Post = defineDocumentType(() => ({
+  name: 'Post',
+  filePathPattern: 'posts/**/*.mdx',
+  contentType: 'mdx',
+  fields: {
+    title:  { type: 'string',  required: true },
+    date:   { type: 'date',    required: true },
+    status: { type: 'enum',    options: ['draft', 'published'], required: true },
+    tags:   { type: 'list',    of: { type: 'string' }, default: [] },
+    excerpt:{ type: 'string',  required: false },
+    ogImage:{ type: 'string',  required: false },
+  },
+  computedFields: {
+    url:         { type: 'string', resolve: d => `/blog/${d._raw.flattenedPath.replace('posts/', '')}` },
+    readingTime: { type: 'string', resolve: d => {
+      const words = d.body.raw.split(/\s+/).length;
+      return `${Math.ceil(words / 238)} min read`;
+    }},
+  },
+}));
+```