Skills showcase

Skill broomva/skills/skills-showcase

Broomva agent-skills monorepo — 48 Tier-2 skills compatible with Claude Code, Codex, Cursor, Gemini CLI, Goose, Copilot. Layout follows anthropics/skills (agentskills.io spec). Install: npx skills add broomva/skills --skill <name>.

Install

npx -y skills add broomva/skills --skill skills-showcase

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Generate a polished Remotion video and X thread showcasing the full agent skills inventory. Use when creating social media content about skills, rendering category-based skill visualizations, or producing animated showcases of agent capabilities. Triggers on "skills video", "showcase skills", "skills thread", "render skills", "social content for skills", or requests to visualize the skills inventory.

SKILL.md

3.2 KB, 739 tokens by cl100k_base, as published. Nobody here has run it

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:

Hook + video attachment
Why skills beat one-off prompts
Consciousness & memory cluster
Research & analysis cluster
Full-stack implementation coverage
Niche high-signal specialist skills
CTA and discussion prompt