Skills Showcase

Name: Skills Showcase
Author: broomva

broomva/skills

6 installs
3 repo stars
Updated August 5, 2026
broomva/skills

skills-showcase is a Claude Code skill that renders a Remotion video and a 7-post X thread showcasing the agent skills inventory.

About

skills-showcase is a Claude Code skill that generates a Remotion video and X thread showcasing the agent skills inventory. It renders a category-by-category animated video (1080x1080, 30fps, ~48s) and produces a 7-post X thread that maps skill clusters to concrete value. Developers use it to create social-media content about skills. The video re-renders deterministically from a typed dataset in src/data/skills.ts, using frame-driven Remotion patterns only.

Renders a Remotion video (1080x1080, 30fps, ~48s) showcasing the skills inventory
Produces a 7-post X thread mapping skill clusters to concrete value
Frame-driven animation with a typed, deterministic dataset

Skills Showcase by the numbers

6 all-time installs (skills.sh)
Ranked #1,096 of 1,335 Generative Media skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

At a glance

skills-showcase capabilities & compatibility

Capabilities: video generation
Use cases: video generation · marketing · copywriting
Pricing: Free

From the docs

What skills-showcase says it does

Generate a polished Remotion video and X thread showcasing the full agent skills inventory.

SKILL.md

Render a category-by-category animated skills showcase video (1080x1080, 30fps, ~48s) and produce a 7-post X thread that maps skill clusters to concrete value.

SKILL.md

All animations use Remotion frame-driven patterns only:

SKILL.md

npx skills add https://github.com/broomva/skills --skill skills-showcase

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/broomva/skills/skills-showcase.svg)](https://skillselion.com/skills/broomva/skills/skills-showcase)

Installs	6
repo stars	★ 3
Last updated	August 5, 2026
Repository	broomva/skills ↗

What it does

Render a Remotion showcase video and a 7-post X thread that present the agent skills inventory as social content.

Who is it for?

Creating social-media content about skills by rendering a category-based showcase video and X thread

Skip if: Browsing or authoring the underlying skills inventory itself (use the skills or skillify skill)

When should I use this skill?

Creating social content about skills, rendering skill visualizations, or producing an animated showcase of agent capabilities

What you get

skills-showcase.mp4
skills-showcase.gif
7-post X thread copy

By the numbers

video 1080x1080, 30fps, ~48s (1440 frames)
15 category sections at 80 frames each
7-post X thread

Files

SKILL.mdMarkdownGitHub ↗

Skills Showcase

Render a category-by-category animated skills showcase video (1080x1080, 30fps, ~48s) and produce a 7-post X thread that maps skill clusters to concrete value.

Quick Start

cd skills-showcase
npm install
npx remotion studio          # Preview in browser
npx remotion render SkillsShowcase out/skills-showcase.mp4
npx remotion render SkillsShowcase out/skills-showcase.gif --every-nth-frame=3

Output Artifacts

out/skills-showcase.mp4 — Primary X upload (H.264, ~4.7 MB)
out/skills-showcase.gif — Fallback/preview (~7 MB)
thread.md — 7-post X thread copy

Architecture

src/
├── index.ts                  # registerRoot entry point
├── Root.tsx                  # Composition registry (1080x1080, 30fps, 1440 frames)
├── SkillsShowcase.tsx        # Master timeline using <Series>
├── data/skills.ts            # Typed dataset: categories, skills, derived aggregates
├── scenes/
│   ├── Intro.tsx             # Title + subtitle + stats pills (4s)
│   ├── CategorySection.tsx   # Category label + staggered skill chips (2.67s each)
│   └── Outro.tsx             # Summary metric + tagline + CTA (4s)
└── components/
    └── SkillChip.tsx         # Reusable animated badge with spring entrance

Data Model

Edit src/data/skills.ts to add or remove skills. The video re-renders deterministically from this dataset.

Category: { id, label, color, order }
Skill: { slug, categoryId, shortDescription }
Derived: totalSkills, totalCategories, skillsByCategory

Animation Conventions

All animations use Remotion frame-driven patterns only:

useCurrentFrame() + useVideoConfig() for frame/fps
spring() for entrances (damping: 200 for smooth, damping: 20 + stiffness: 200 for snappy)
interpolate() with clamp for opacity and translation
Zero CSS transitions or Tailwind animation utilities

Timeline Pacing

Scene	Frames	Duration
Intro	120	4.0s
15 categories × 80	1200	40.0s
Outro	120	4.0s
Total	1440	48.0s

Customization

Add a category: Add to categories array in src/data/skills.ts, update Root.tsx duration
Change colors: Each category has a color hex in the dataset
Adjust pacing: Modify CATEGORY_DURATION in SkillsShowcase.tsx
Thread copy: Edit thread.md directly

Thread Strategy

See thread.md for the full 7-post thread. Structure:

1. Hook + video attachment 2. Why skills beat one-off prompts 3. Consciousness & memory cluster 4. Research & analysis cluster 5. Full-stack implementation coverage 6. Niche high-signal specialist skills 7. CTA and discussion prompt

{
  "name": "skills-showcase",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "@remotion/cli": "4.0.436",
    "@remotion/transitions": "4.0.436",
    "@types/react": "19.2.14",
    "react": "19.2.4",
    "react-dom": "19.2.4",
    "remotion": "4.0.436"
  }
}

import {
  interpolate,
  spring,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";

type SkillChipProps = {
  label: string;
  color: string;
  delay: number;
};

export const SkillChip: React.FC<SkillChipProps> = ({
  label,
  color,
  delay,
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const entrance = spring({
    frame,
    fps,
    config: { damping: 20, stiffness: 200 },
    delay,
  });

  const scale = interpolate(entrance, [0, 1], [0.7, 1]);
  const opacity = interpolate(entrance, [0, 1], [0, 1]);

  return (
    <div
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 8,
        padding: "8px 16px",
        borderRadius: 8,
        backgroundColor: `${color}18`,
        border: `1px solid ${color}40`,
        transform: `scale(${scale})`,
        opacity,
      }}
    >
      <div
        style={{
          width: 6,
          height: 6,
          borderRadius: "50%",
          backgroundColor: color,
        }}
      />
      <span
        style={{
          fontSize: 16,
          fontWeight: 500,
          color: "#E4E4E7",
          fontFamily: "system-ui, -apple-system, sans-serif",
          whiteSpace: "nowrap",
        }}
      >
        {label}
      </span>
    </div>
  );
};

export type Category = {
  id: string;
  label: string;
  color: string;
  order: number;
};

export type Skill = {
  slug: string;
  categoryId: string;
  shortDescription: string;
};

export const categories: Category[] = [
  { id: "ai-agents", label: "AI & Agent Systems", color: "#8B5CF6", order: 0 },
  { id: "memory-knowledge", label: "Memory & Knowledge", color: "#06B6D4", order: 1 },
  { id: "research-intel", label: "Research & Intelligence", color: "#F59E0B", order: 2 },
  { id: "observability", label: "Observability & Debugging", color: "#EF4444", order: 3 },
  { id: "deployment", label: "Deployment & Infrastructure", color: "#10B981", order: 4 },
  { id: "nextjs-react", label: "Next.js & React", color: "#3B82F6", order: 5 },
  { id: "mobile-expo", label: "Mobile & Expo", color: "#EC4899", order: 6 },
  { id: "design-ui", label: "Design & UI Systems", color: "#F97316", order: 7 },
  { id: "json-render", label: "JSON-Render Ecosystem", color: "#84CC16", order: 8 },
  { id: "mcp-protocol", label: "MCP & Protocol Integration", color: "#A855F7", order: 9 },
  { id: "db-api", label: "Database & API", color: "#14B8A6", order: 10 },
  { id: "qa-browser", label: "QA & Browser Testing", color: "#F43F5E", order: 11 },
  { id: "cli-workflow", label: "CLI & Workflow Tooling", color: "#6366F1", order: 12 },
  { id: "design-tooling", label: "Design Tooling", color: "#D946EF", order: 13 },
  { id: "platform", label: "Platform Specialties", color: "#78716C", order: 14 },
  { id: "simulation", label: "Simulation & Optimization", color: "#0EA5E9", order: 15 },
];

export const skills: Skill[] = [
  // AI & Agent Systems
  { slug: "ai-sdk", categoryId: "ai-agents", shortDescription: "Vercel AI SDK integration" },
  { slug: "claude-api", categoryId: "ai-agents", shortDescription: "Anthropic Claude API" },
  { slug: "agentic-control-kernel", categoryId: "ai-agents", shortDescription: "LLM-as-controller architecture" },
  { slug: "autoany", categoryId: "ai-agents", shortDescription: "EGRI recursive improvement" },
  { slug: "control-metalayer-loop", categoryId: "ai-agents", shortDescription: "Control-system metalayer" },
  { slug: "harness-engineering-playbook", categoryId: "ai-agents", shortDescription: "Agent-first harness engineering" },
  { slug: "p9", categoryId: "ai-agents", shortDescription: "CI watcher + productive-wait + classifier/evaluator self-heal + governance-gated auto-merge" },

  // Memory & Knowledge
  { slug: "agent-consciousness", categoryId: "memory-knowledge", shortDescription: "Persistent consciousness architecture" },
  { slug: "knowledge-graph-memory", categoryId: "memory-knowledge", shortDescription: "Obsidian knowledge graph bridge" },
  { slug: "obsidian-markdown", categoryId: "memory-knowledge", shortDescription: "Obsidian-flavored Markdown" },
  { slug: "obsidian-bases", categoryId: "memory-knowledge", shortDescription: "Obsidian Bases database views" },
  { slug: "obsidian-cli", categoryId: "memory-knowledge", shortDescription: "Obsidian vault CLI operations" },

  // Research & Intelligence
  { slug: "deep-research", categoryId: "research-intel", shortDescription: "Multi-source research synthesis" },
  { slug: "deep-dive-research-orchestrator", categoryId: "research-intel", shortDescription: "Coordinated research specialists" },
  { slug: "financial-deep-research", categoryId: "research-intel", shortDescription: "Financial market analysis" },
  { slug: "competitor-intel", categoryId: "research-intel", shortDescription: "Competitive intelligence" },
  { slug: "technical-research", categoryId: "research-intel", shortDescription: "Technical spike investigations" },

  // Observability & Debugging
  { slug: "sentry-fix-issues", categoryId: "observability", shortDescription: "Sentry issue resolution" },
  { slug: "sentry-react-setup", categoryId: "observability", shortDescription: "Sentry React integration" },
  { slug: "sentry-setup-logging", categoryId: "observability", shortDescription: "Sentry structured logging" },
  { slug: "langsmith-trace", categoryId: "observability", shortDescription: "LangSmith trace observability" },
  { slug: "langsmith-fetch", categoryId: "observability", shortDescription: "LangSmith execution debugging" },

  // Deployment & Infrastructure
  { slug: "use-railway", categoryId: "deployment", shortDescription: "Railway infrastructure ops" },
  { slug: "railway-deployment", categoryId: "deployment", shortDescription: "Railway deployment lifecycle" },
  { slug: "vercel-cli", categoryId: "deployment", shortDescription: "Vercel CLI management" },
  { slug: "deployment", categoryId: "deployment", shortDescription: "App Store & Play Store deploy" },
  { slug: "cicd-workflows", categoryId: "deployment", shortDescription: "EAS CI/CD workflow YAML" },
  { slug: "symphony", categoryId: "deployment", shortDescription: "Symphony orchestration engine" },

  // Next.js & React
  { slug: "next-best-practices", categoryId: "nextjs-react", shortDescription: "Next.js conventions & patterns" },
  { slug: "next-cache-components", categoryId: "nextjs-react", shortDescription: "PPR & cache directives" },
  { slug: "next-upgrade", categoryId: "nextjs-react", shortDescription: "Next.js version migration" },
  { slug: "next-forge", categoryId: "nextjs-react", shortDescription: "next-forge SaaS template" },
  { slug: "vercel-react-best-practices", categoryId: "nextjs-react", shortDescription: "React performance optimization" },
  { slug: "vercel-composition-patterns", categoryId: "nextjs-react", shortDescription: "Scalable React composition" },
  { slug: "cra-to-next-migration", categoryId: "nextjs-react", shortDescription: "CRA to Next.js migration" },
  { slug: "data-fetching", categoryId: "nextjs-react", shortDescription: "Network & data fetching patterns" },

  // Mobile & Expo
  { slug: "building-ui", categoryId: "mobile-expo", shortDescription: "Expo Router app building" },
  { slug: "vercel-react-native-skills", categoryId: "mobile-expo", shortDescription: "React Native best practices" },
  { slug: "tailwind-setup", categoryId: "mobile-expo", shortDescription: "Tailwind CSS in Expo" },
  { slug: "use-dom", categoryId: "mobile-expo", shortDescription: "Expo DOM components" },
  { slug: "dev-client", categoryId: "mobile-expo", shortDescription: "Expo dev client builds" },
  { slug: "upgrading-expo", categoryId: "mobile-expo", shortDescription: "Expo SDK upgrades" },
  { slug: "api-routes", categoryId: "mobile-expo", shortDescription: "Expo Router API routes" },

  // Design & UI Systems
  { slug: "building-components", categoryId: "design-ui", shortDescription: "Composable UI components" },
  { slug: "frontend-design", categoryId: "design-ui", shortDescription: "Production-grade interfaces" },
  { slug: "web-design-guidelines", categoryId: "design-ui", shortDescription: "Web Interface Guidelines audit" },
  { slug: "liquid-glass-design", categoryId: "design-ui", shortDescription: "iOS 26 Liquid Glass" },
  { slug: "axiom-liquid-glass", categoryId: "design-ui", shortDescription: "Liquid Glass implementation" },
  { slug: "streamdown", categoryId: "design-ui", shortDescription: "Streaming Markdown renderer" },

  // JSON-Render Ecosystem
  { slug: "json-render-core", categoryId: "json-render", shortDescription: "Core schemas & catalogs" },
  { slug: "json-render-react", categoryId: "json-render", shortDescription: "React JSON renderer" },
  { slug: "json-render-react-native", categoryId: "json-render", shortDescription: "React Native renderer" },
  { slug: "json-render-shadcn", categoryId: "json-render", shortDescription: "shadcn/ui components" },
  { slug: "json-render-remotion", categoryId: "json-render", shortDescription: "Remotion video renderer" },

  // MCP & Protocol Integration
  { slug: "building-mcp-servers", categoryId: "mcp-protocol", shortDescription: "MCP server development" },
  { slug: "mcp-builder", categoryId: "mcp-protocol", shortDescription: "MCP tool & resource design" },
  { slug: "mcp-integration-expert", categoryId: "mcp-protocol", shortDescription: "MCP integration workflows" },
  { slug: "ucp", categoryId: "mcp-protocol", shortDescription: "Universal Commerce Protocol" },

  // Database & API
  { slug: "using-neon", categoryId: "db-api", shortDescription: "Neon Serverless Postgres" },
  { slug: "api-documentation", categoryId: "db-api", shortDescription: "API documentation practices" },
  { slug: "workflow", categoryId: "db-api", shortDescription: "Durable resumable workflows" },
  { slug: "workflow-init", categoryId: "db-api", shortDescription: "Workflow DevKit setup" },

  // QA & Browser Testing
  { slug: "dogfood", categoryId: "qa-browser", shortDescription: "Exploratory QA & bug hunting" },
  { slug: "gstack", categoryId: "qa-browser", shortDescription: "Headless browser QA" },
  { slug: "agent-browser", categoryId: "qa-browser", shortDescription: "Browser automation CLI" },
  { slug: "before-and-after", categoryId: "qa-browser", shortDescription: "Visual diff screenshots" },
  { slug: "rams", categoryId: "qa-browser", shortDescription: "Accessibility & design review" },

  // CLI & Workflow Tooling
  { slug: "domain-cli", categoryId: "cli-workflow", shortDescription: "CLI tool development" },
  { slug: "turborepo", categoryId: "cli-workflow", shortDescription: "Turborepo monorepo management" },
  { slug: "autoship", categoryId: "cli-workflow", shortDescription: "Automated changeset releases" },
  { slug: "linear-cli", categoryId: "cli-workflow", shortDescription: "Linear issue management" },
  { slug: "gsd", categoryId: "cli-workflow", shortDescription: "Solo dev project management" },
  { slug: "spec-driven-development", categoryId: "cli-workflow", shortDescription: "Spec-driven dev workflow" },

  // Design Tooling
  { slug: "remotion-best-practices", categoryId: "design-tooling", shortDescription: "Remotion video creation" },
  { slug: "ai-elements", categoryId: "design-tooling", shortDescription: "AI chat UI components" },
  { slug: "app-store-optimization", categoryId: "design-tooling", shortDescription: "ASO for mobile apps" },

  // Platform Specialties
  { slug: "rust-best-practices", categoryId: "platform", shortDescription: "Idiomatic Rust patterns" },
  { slug: "local-llm-ops", categoryId: "platform", shortDescription: "Ollama on Apple Silicon" },
  { slug: "garmin-connect", categoryId: "platform", shortDescription: "Garmin health data" },
  { slug: "find-skills", categoryId: "platform", shortDescription: "Skill discovery & install" },
  { slug: "skill-creator", categoryId: "platform", shortDescription: "Custom skill creation" },
  { slug: "alkosto-wait-optimizer", categoryId: "platform", shortDescription: "Promotion wait optimization" },
  { slug: "ralph-loop", categoryId: "platform", shortDescription: "Ralph Loop plugin" },
  { slug: "loop", categoryId: "platform", shortDescription: "Recurring task runner" },

  // Simulation & Optimization
  { slug: "openrocket-sim", categoryId: "simulation", shortDescription: "Headless rocket simulation & EGRI" },
];

// Derived aggregates
export const totalSkills = skills.length;
export const totalCategories = categories.length;
export const skillsByCategory = categories.map((cat) => ({
  ...cat,
  skills: skills.filter((s) => s.categoryId === cat.id),
  count: skills.filter((s) => s.categoryId === cat.id).length,
}));

import { Composition } from "remotion";
import { SkillsShowcase } from "./SkillsShowcase";

// 30fps * 48s = 1440 frames (~48 seconds)
export const RemotionRoot = () => {
  return (
    <Composition
      id="SkillsShowcase"
      component={SkillsShowcase}
      durationInFrames={1520}
      fps={30}
      width={1080}
      height={1080}
    />
  );
};

import {
  AbsoluteFill,
  interpolate,
  spring,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";
import { SkillChip } from "../components/SkillChip";
import type { Skill } from "../data/skills";

type CategorySectionProps = {
  label: string;
  color: string;
  skills: Skill[];
  count: number;
};

export const CategorySection: React.FC<CategorySectionProps> = ({
  label,
  color,
  skills: categorySkills,
  count,
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Category label entrance
  const labelSpring = spring({ frame, fps, config: { damping: 200 } });
  const labelX = interpolate(labelSpring, [0, 1], [-80, 0]);
  const labelOpacity = interpolate(labelSpring, [0, 1], [0, 1]);

  // Count badge
  const countSpring = spring({
    frame,
    fps,
    config: { damping: 15, stiffness: 200 },
    delay: 6,
  });
  const countScale = interpolate(countSpring, [0, 1], [0, 1]);

  // Accent bar width
  const barWidth = interpolate(frame, [0, 20], [0, 120], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill
      style={{
        backgroundColor: "#0A0A0F",
        padding: 72,
        justifyContent: "center",
      }}
    >
      {/* Subtle background glow */}
      <div
        style={{
          position: "absolute",
          width: 500,
          height: 500,
          borderRadius: "50%",
          background: `radial-gradient(circle, ${color}12 0%, transparent 70%)`,
          top: 100,
          right: -100,
        }}
      />

      {/* Accent bar */}
      <div
        style={{
          width: barWidth,
          height: 4,
          backgroundColor: color,
          borderRadius: 2,
          marginBottom: 24,
        }}
      />

      {/* Category label + count */}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 16,
          marginBottom: 40,
          opacity: labelOpacity,
          transform: `translateX(${labelX}px)`,
        }}
      >
        <div
          style={{
            fontSize: 44,
            fontWeight: 700,
            color: "#FFFFFF",
            fontFamily: "system-ui, -apple-system, sans-serif",
            letterSpacing: -1,
          }}
        >
          {label}
        </div>
        <div
          style={{
            transform: `scale(${countScale})`,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            width: 40,
            height: 40,
            borderRadius: "50%",
            backgroundColor: `${color}25`,
            border: `2px solid ${color}`,
          }}
        >
          <span
            style={{
              fontSize: 18,
              fontWeight: 700,
              color,
              fontFamily: "system-ui, -apple-system, sans-serif",
            }}
          >
            {count}
          </span>
        </div>
      </div>

      {/* Skill chips - staggered grid */}
      <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          gap: 12,
          maxWidth: 900,
        }}
      >
        {categorySkills.map((skill, i) => (
          <SkillChip
            key={skill.slug}
            label={skill.shortDescription}
            color={color}
            delay={10 + i * 3}
          />
        ))}
      </div>
    </AbsoluteFill>
  );
};

import {
  AbsoluteFill,
  interpolate,
  spring,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";
import { totalSkills, totalCategories } from "../data/skills";

export const Intro: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Title entrance
  const titleSpring = spring({ frame, fps, config: { damping: 200 } });
  const titleY = interpolate(titleSpring, [0, 1], [60, 0]);
  const titleOpacity = interpolate(titleSpring, [0, 1], [0, 1]);

  // Subtitle entrance (delayed)
  const subtitleSpring = spring({
    frame,
    fps,
    config: { damping: 200 },
    delay: 12,
  });
  const subtitleOpacity = interpolate(subtitleSpring, [0, 1], [0, 1]);
  const subtitleY = interpolate(subtitleSpring, [0, 1], [40, 0]);

  // Stats line entrance
  const statsSpring = spring({
    frame,
    fps,
    config: { damping: 200 },
    delay: 24,
  });
  const statsOpacity = interpolate(statsSpring, [0, 1], [0, 1]);

  // Decorative line width
  const lineWidth = interpolate(frame, [8, 30], [0, 200], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill
      style={{
        backgroundColor: "#0A0A0F",
        justifyContent: "center",
        alignItems: "center",
        padding: 80,
      }}
    >
      {/* Accent gradient orb */}
      <div
        style={{
          position: "absolute",
          width: 600,
          height: 600,
          borderRadius: "50%",
          background:
            "radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%)",
          top: 140,
          left: 240,
        }}
      />

      {/* Title */}
      <div
        style={{
          opacity: titleOpacity,
          transform: `translateY(${titleY}px)`,
          textAlign: "center",
        }}
      >
        <div
          style={{
            fontSize: 72,
            fontWeight: 800,
            color: "#FFFFFF",
            fontFamily: "system-ui, -apple-system, sans-serif",
            letterSpacing: -2,
            lineHeight: 1.1,
          }}
        >
          Composable
        </div>
        <div
          style={{
            fontSize: 72,
            fontWeight: 800,
            background: "linear-gradient(135deg, #8B5CF6, #06B6D4)",
            WebkitBackgroundClip: "text",
            WebkitTextFillColor: "transparent",
            fontFamily: "system-ui, -apple-system, sans-serif",
            letterSpacing: -2,
            lineHeight: 1.1,
          }}
        >
          Capabilities
        </div>
      </div>

      {/* Decorative line */}
      <div
        style={{
          width: lineWidth,
          height: 3,
          background: "linear-gradient(90deg, #8B5CF6, #06B6D4)",
          borderRadius: 2,
          marginTop: 32,
          marginBottom: 32,
        }}
      />

      {/* Subtitle */}
      <div
        style={{
          opacity: subtitleOpacity,
          transform: `translateY(${subtitleY}px)`,
          fontSize: 32,
          fontWeight: 400,
          color: "#A1A1AA",
          fontFamily: "system-ui, -apple-system, sans-serif",
          textAlign: "center",
          maxWidth: 700,
          lineHeight: 1.4,
        }}
      >
        One agent. {totalSkills} specialized skills.
        <br />
        Every layer of the stack.
      </div>

      {/* Stats pill */}
      <div
        style={{
          opacity: statsOpacity,
          marginTop: 48,
          display: "flex",
          gap: 24,
        }}
      >
        <StatPill value={String(totalSkills)} label="Skills" />
        <StatPill value={String(totalCategories)} label="Categories" />
      </div>
    </AbsoluteFill>
  );
};

const StatPill: React.FC<{ value: string; label: string }> = ({
  value,
  label,
}) => (
  <div
    style={{
      display: "flex",
      alignItems: "center",
      gap: 10,
      padding: "12px 24px",
      borderRadius: 100,
      border: "1px solid rgba(255,255,255,0.1)",
      backgroundColor: "rgba(255,255,255,0.05)",
    }}
  >
    <span
      style={{
        fontSize: 28,
        fontWeight: 700,
        color: "#8B5CF6",
        fontFamily: "system-ui, -apple-system, sans-serif",
      }}
    >
      {value}
    </span>
    <span
      style={{
        fontSize: 18,
        color: "#71717A",
        fontFamily: "system-ui, -apple-system, sans-serif",
      }}
    >
      {label}
    </span>
  </div>
);

import {
  AbsoluteFill,
  interpolate,
  spring,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";
import { totalSkills, totalCategories } from "../data/skills";

export const Outro: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Metric line entrance
  const metricSpring = spring({ frame, fps, config: { damping: 200 } });
  const metricOpacity = interpolate(metricSpring, [0, 1], [0, 1]);
  const metricY = interpolate(metricSpring, [0, 1], [50, 0]);

  // Tagline entrance
  const tagSpring = spring({
    frame,
    fps,
    config: { damping: 200 },
    delay: 15,
  });
  const tagOpacity = interpolate(tagSpring, [0, 1], [0, 1]);
  const tagY = interpolate(tagSpring, [0, 1], [40, 0]);

  // CTA entrance
  const ctaSpring = spring({
    frame,
    fps,
    config: { damping: 15, stiffness: 200 },
    delay: 30,
  });
  const ctaScale = interpolate(ctaSpring, [0, 1], [0.8, 1]);
  const ctaOpacity = interpolate(ctaSpring, [0, 1], [0, 1]);

  // Decorative line
  const lineWidth = interpolate(frame, [5, 25], [0, 300], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill
      style={{
        backgroundColor: "#0A0A0F",
        justifyContent: "center",
        alignItems: "center",
        padding: 80,
      }}
    >
      {/* Background gradient orbs */}
      <div
        style={{
          position: "absolute",
          width: 500,
          height: 500,
          borderRadius: "50%",
          background:
            "radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 70%)",
          bottom: 100,
          left: 100,
        }}
      />
      <div
        style={{
          position: "absolute",
          width: 400,
          height: 400,
          borderRadius: "50%",
          background:
            "radial-gradient(circle, rgba(6,182,212,0.1) 0%, transparent 70%)",
          top: 150,
          right: 150,
        }}
      />

      {/* Summary metric */}
      <div
        style={{
          opacity: metricOpacity,
          transform: `translateY(${metricY}px)`,
          textAlign: "center",
        }}
      >
        <span
          style={{
            fontSize: 96,
            fontWeight: 800,
            background: "linear-gradient(135deg, #8B5CF6, #06B6D4, #10B981)",
            WebkitBackgroundClip: "text",
            WebkitTextFillColor: "transparent",
            fontFamily: "system-ui, -apple-system, sans-serif",
            letterSpacing: -3,
          }}
        >
          {totalSkills}
        </span>
        <div
          style={{
            fontSize: 28,
            fontWeight: 500,
            color: "#71717A",
            fontFamily: "system-ui, -apple-system, sans-serif",
            marginTop: 4,
          }}
        >
          skills across {totalCategories} domains
        </div>
      </div>

      {/* Decorative line */}
      <div
        style={{
          width: lineWidth,
          height: 2,
          background:
            "linear-gradient(90deg, transparent, rgba(139,92,246,0.5), transparent)",
          marginTop: 40,
          marginBottom: 40,
        }}
      />

      {/* Tagline */}
      <div
        style={{
          opacity: tagOpacity,
          transform: `translateY(${tagY}px)`,
          fontSize: 38,
          fontWeight: 600,
          color: "#FFFFFF",
          fontFamily: "system-ui, -apple-system, sans-serif",
          textAlign: "center",
          letterSpacing: -1,
          lineHeight: 1.3,
          maxWidth: 700,
        }}
      >
        Not just an assistant.
        <br />
        <span style={{ color: "#8B5CF6" }}>A full engineering team.</span>
      </div>

      {/* CTA */}
      <div
        style={{
          opacity: ctaOpacity,
          transform: `scale(${ctaScale})`,
          marginTop: 48,
          padding: "16px 40px",
          borderRadius: 100,
          background: "linear-gradient(135deg, #8B5CF6, #6D28D9)",
          fontSize: 22,
          fontWeight: 600,
          color: "#FFFFFF",
          fontFamily: "system-ui, -apple-system, sans-serif",
        }}
      >
        Try Claude Code →
      </div>
    </AbsoluteFill>
  );
};

import { Series } from "remotion";
import { Intro } from "./scenes/Intro";
import { CategorySection } from "./scenes/CategorySection";
import { Outro } from "./scenes/Outro";
import { skillsByCategory } from "./data/skills";

// Timeline pacing (frames at 30fps):
// Intro: 120 frames (4s)
// 15 categories × 80 frames each = 1200 frames (40s)
// Outro: 120 frames (4s)
// Total: 1440 frames (48s)

const INTRO_DURATION = 120;
const CATEGORY_DURATION = 80;
const OUTRO_DURATION = 120;

export const SkillsShowcase: React.FC = () => {
  return (
    <Series>
      <Series.Sequence durationInFrames={INTRO_DURATION}>
        <Intro />
      </Series.Sequence>

      {skillsByCategory.map((cat) => (
        <Series.Sequence key={cat.id} durationInFrames={CATEGORY_DURATION}>
          <CategorySection
            label={cat.label}
            color={cat.color}
            skills={cat.skills}
            count={cat.count}
          />
        </Series.Sequence>
      ))}

      <Series.Sequence durationInFrames={OUTRO_DURATION}>
        <Outro />
      </Series.Sequence>
    </Series>
  );
};

X Thread — Rocket Simulation + EGRI + Skills Showcase

1/7 — Hook (attach video: skills-showcase.mp4)

We turned an open-source rocket simulator into a headless optimization engine.

144 EGRI trials in 5 minutes. Zero GUI. Pure physics as evaluator.

Here's what we learned about mutation surfaces and why trial count doesn't matter.

🧵

2/7 — The Setup

OpenRocket is a model rocket simulator with 6DOF physics.

We stripped out the Swing GUI, kept the core engine, and built:

→ rocket-sim CLI (info, run, sweep, events — all JSON) → EGRI optimization harness (problem-spec, evaluator, ledger) → Published agent skill (npx skills add broomva/openrocket-sim)

From clone to first simulation: 10 minutes.

3/7 — Why Physics Sims Are Perfect EGRI Evaluators

EGRI's core law: never grant more mutation freedom than your evaluator can reliably judge.

Physics simulation satisfies this completely: • Deterministic — same inputs, same outputs, always • Fast — ~2s per trial, 144 trials in 5 min • Trusted — it's physics, not a heuristic • Structured — typed scalars (altitude, velocity, Mach)

This unlocks auto-promote mode. No human gate needed.

4/7 — The Surprising Result

We swept 4 launch parameters × 144 combinations:

Rod length: 0.5–2.0m
Rod angle: 0–10°
Launch altitude: 0–2000m ASL
Wind speed: 0–5 m/s

Result: ZERO promotions. Every candidate hit ~50.5m ± 0.6m.

The evaluator wasn't wrong. The mutation surface was.

5/7 — Mutation Surface > Trial Count

For a model rocket with an A8-3 motor: • Motor selection → ~95% of max altitude • Aerodynamic design → ~4% • Launch parameters → ~1%

We were optimizing the 1% variable. 144 trials confirmed what one physics insight predicts: you can't out-iterate a bad mutation surface.

This is a general principle. Before asking "how many trials?" ask "what am I allowed to change?"

6/7 — The Agent Skill

Anyone can now install this:

npx skills add broomva/openrocket-sim

It gives Claude Code: • Headless simulation API docs • CLI tool usage patterns • EGRI integration (problem-spec, evaluator, harness) • 8 compounding strategies

Full blog post: broomva.tech/writing/rocket-sim-egri-optimization

7/7 — What's Next

Expanding the mutation surface: 1. Motor selection sweep (A8 → C6 → D12) 2. Component geometry (fin span, nose cone, body tube) 3. Multi-objective Pareto (altitude vs. recovery safety) 4. LLM-guided design exploration

The evaluator is ready. The mutation surface is the bottleneck.

What domain would you wire into an EGRI loop?

Skills Showcase — X Thread

Post 1 (Hook + Video)

[Attach: skills-showcase.mp4]

I catalogued every skill loaded into my Claude Code agent.

84 specialized capabilities across 15 domains — from recursive self-improvement loops to Liquid Glass implementation guides.

Here's the full map and why it matters 🧵

---

Post 2 (Why skills > prompts)

Skills aren't just longer prompts. They're compressed domain expertise with tool awareness.

A "deep-research" skill knows to spawn parallel search agents, cross-reference sources, and format citations. A prompt only knows what you told it in that message.

The difference: repeatable quality vs. one-shot luck.

---

Post 3 (Consciousness & Memory cluster)

The consciousness stack is the most underrated cluster:

• agent-consciousness — persistent memory across sessions • knowledge-graph-memory — Obsidian vault as episodic memory • control-metalayer-loop — behavioral governance for autonomous agents

This is what turns a chatbot into an agent that learns from its own history.

---

Post 4 (Research & Analysis cluster)

Five research skills that replace entire analyst workflows:

• deep-research — 10+ source synthesis with citation tracking • financial-deep-research — market analysis with regulatory compliance • competitor-intel — verified metrics + predicted next moves • technical-research — timeboxed spike investigations

Each one structures ambiguity into verified, actionable output.

---

Post 5 (Full-stack implementation)

The implementation surface is complete:

Next.js 8 skills (best practices → cache components → migration paths) Expo/React Native 7 skills (routing → native modules → TestFlight) Infrastructure 6 skills (Railway → Vercel → EAS CI/CD → Symphony) MCP 3 skills (build servers → design tools → integrate protocols)

No gaps between "plan it" and "ship it."

---

Post 6 (Niche high-signal skills)

The specialist skills are where it gets interesting:

• alkosto-wait-optimizer — probability model for store promotions • garmin-connect — health data queries from your watch • json-render-remotion — JSON specs → rendered video (meta: this showcase was built with Remotion skills) • liquid-glass-design — iOS 26 design system from WWDC 2025

Niche skills compound. They turn "I can't help with that" into instant expertise.

---

Post 7 (CTA)

The real unlock isn't any single skill — it's composition.

A research skill feeds a spec-driven-development workflow that outputs code reviewed by web-design-guidelines and tested by dogfood.

That's not prompting. That's an engineering pipeline.

What skill cluster would change your workflow? Building custom skills is a skill itself (skill-creator).

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ES2022",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "declaration": true
  },
  "include": ["src"]
}