Communitygithub.com

broomva/skills

Erstellt ein poliertes Remotion-Video und einen X-Thread, der das gesamte Agenten-Fähigkeiteninventar präsentiert.

Was ist skills?

Dieses Skill-Paket generiert ein animiertes Video (1080x1080, 30fps, ~48s) und einen 7-teiligen X-Thread, der Agentenfähigkeiten kategorieweise hervorhebt. Entwickler können damit sozialmediale Inhalte erstellen, die das komplette Fähigkeitenportfolio eines KI-Agenten visuell ansprechend präsentieren. Das Skill nutzt Remotion für die Videoproduktion und eine datengesteuerte Architektur: Fähigkeiten werden in `src/data/skills.ts` definiert, woraus das Video automatisch rendert. Es ist nützlich für Demos, Marketing oder Dokumentation von Agenten-Fähigkeitenkatalogen und funktioniert auf allen Plattformen, die Remotion-basierte Workflows unterstützen (z.B. Claude Code, Cursor). Dank vollständiger Frame-Interpolation und spring()-Animationen bleibt das Ergebnis flüssig und konsistent. Das Paket enthält einen anpassbaren X-Thread, der die Fähigkeiten in Cluster wie 'Bewusstsein & Gedächtnis' oder 'Forschung & Analyse' gliedert und direkt als Kopiervorlage dient.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/broomva/skills/tree/HEAD/skills-showcase

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Fähigkeiten-Showcase

Erstelle ein animiertes Fähigkeiten-Showcase-Video (1080x1080, 30fps, ~48s) sowie einen 7-teiligen X-Thread, der Fähigkeitencluster konkreten Nutzenwerten zuordnet.

Schnellstart

cd skills-showcase
npm install
npx remotion studio          # Vorschau im Browser
npx remotion render SkillsShowcase out/skills-showcase.mp4
npx remotion render SkillsShowcase out/skills-showcase.gif --every-nth-frame=3

Ausgabeartefakte

  • out/skills-showcase.mp4 — Primärer X-Upload (H.264, ~4,7 MB)
  • out/skills-showcase.gif — Fallback/Vorschau (~7 MB)
  • thread.md — 7-teiliger X-Thread als Textvorlage

Architektur

src/
├── index.ts                  # registerRoot-Einstiegspunkt
├── Root.tsx                  # Kompositionsregistrierung (1080×1080, 30fps, 1440 Frames)
├── SkillsShowcase.tsx        # Master-Zeitachse mit <Series>
├── data/skills.ts            # Typisierter Datensatz: Kategorien, Fähigkeiten, abgeleitete Aggregate
├── scenes/
│   ├── Intro.tsx             # Titel + Untertitel + Statistik-Pillen (4s)
│   ├── CategorySection.tsx   # Kategoriebezeichnung + versetzte Fähigkeits-Chips (je 2,67s)
│   └── Outro.tsx             # Zusammenfassungskennzahl + Slogan + Handlungsaufforderung (4s)
└── components/
    └── SkillChip.tsx         # Wiederverwendbarer animierter Badge mit Federeingang

Datenmodell

Bearbeite src/data/skills.ts, um Fähigkeiten hinzuzufügen oder zu entfernen. Das Video rendert deterministisch aus diesem Datensatz.

  • Kategorie: { id, label, color, order }
  • Fähigkeit: { slug, categoryId, shortDescription }
  • Abgeleitet: totalSkills, totalCategories, skillsByCategory

Animationskonventionen

Alle Animationen verwenden ausschließlich Remotion-Frame-basierte Muster:

  • useCurrentFrame() + useVideoConfig() für Frame/FPS
  • spring() für Eingänge (damping: 200 für weich, damping: 20 + stiffness: 200 für knackig)
  • interpolate() mit Clamp für Deckkraft und Translation
  • Keine CSS-Übergänge oder Tailwind-Animation-Hilfsmittel

Zeitachsen-Taktung

SzeneFramesDauer
Intro1204,0 s
15 Kategorien × 80120040,0 s
Outro1204,0 s
Gesamt144048,0 s

Anpassung

  • Kategorie hinzufügen: Zum categories-Array in src/data/skills.ts hinzufügen, Root.tsx-Dauer aktualisieren
  • Farben ändern: Jede Kategorie hat einen color-Hexwert im Datensatz
  • Taktung anpassen: CATEGORY_DURATION in SkillsShowcase.tsx ändern
  • Thread-Text: thread.md direkt bearbeiten

Thread-Strategie

Siehe thread.md für den vollständigen 7-teiligen Thread. Aufbau:

  1. Haken + Video-Anhang
  2. Warum Fähigkeiten Einmal-Prompts schlagen
  3. Cluster „Bewusstsein & Gedächtnis“
  4. Cluster „Forschung & Analyse“
  5. Full-Stack-Implementierungsabdeckung
  6. Nischen-Spezialfähigkeiten mit hohem Signal
  7. Handlungsaufforderung und Diskussionsanregung

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

broomva/skills

Local TTS, voice cloning, voice design, and video dubbing via the OmniVoice Studio MCP server (open-source ElevenLabs alternative; nothing leaves the machine, runs on MPS/CUDA/CPU). Use when: (1) generating speech from text in any of 646 languages, (2) cloning a voice from a 3-second reference clip, (3) designing a voice by gender/age/accent/pitch/style, (4) dubbing a video into another language, (5) listing voice profiles or personality presets, (6) producing narration where privacy, cost, or absent API keys matter, (7) non-English narration where Edge TTS/kokoro fall short, (8) batch audio for blog posts or content pipelines. Triggers: 'omnivoice', 'voice clone', 'clone this voice', 'tts', 'narrate', 'generate speech', 'voice synthesis', 'dub video', 'voice design', 'local tts', 'multilingual voice', 'narrate this post', 'elevenlabs alternative'.

broomva/skills

>- Speak an explanation out loud while working in any project — tiered text-to-speech with a pluggable backend (ElevenLabs by default and quota-guarded, macOS `say` via `--fast` for free instant local speech, local OmniVoice as an unlimited private tier). Markdown-aware, so code fences, URLs and deep paths collapse to short spoken placeholders instead of being dictated character by character, while snake_case identifiers survive intact so the listener can still search for them. Every utterance is saved to disk for later replay. Also carries a **talk mode** toggle: turn it on and the agent speaks a full readback of every turn, for as long as that session lasts — the whole response, not a summary of it, with `brief` and `marker` levels for when you want less. Talk mode is off by default and scoped to the single session that enabled it, so parallel agents in other worktrees stay silent. Use when the user asks to hear something rather than read it — an explanation of a change, a walkthrough of what just happen...

broomva/skills

Shop Tiendas D1 (Colombia, d1.com.co) from the command line — search the catalogue, resolve your nearest physical store, price a basket against that store's real stock, and quote delivery. D1 runs VTEX IO (account `d1tiendas`), so this drives its public storefront API with no admin key at all — catalogue and cart work fully anonymously, and a one-time emailed code unlocks order history. Handles the two traps that make naive D1 automation wrong — availability is regionalized (an unregioned query reports a national catalogue nobody can actually buy from) and prices arrive in two different units (search reports whole pesos, checkout reports hundredths, a silent 100x). Builds and prices baskets; it deliberately cannot pay, handing a checkout URL to a human instead. USE WHEN the user wants to find D1 products or prices, check whether D1 delivers somewhere, build or cost a D1 grocery basket, compare D1 items, or review their D1 orders. NOT FOR other Colombian retailers (Éxito, Jumbo, Ara, Alkosto), and not for c...

broomva/skills

Stateful, local-first household toxics inventory + swap engine. Identify the items in a home that carry endocrine disruptors and persistent chemicals (BPA/BPS, phthalates, PFAS/PTFE, parabens, flame retardants, VOCs, microplastics), score each by *real* exposure (severity x presence x how it's used x condition), and track the swap to a safer alternative from "flagged" -> "sourced" -> "swapped". Ships a grounded, cited knowledge graph of ~20 hazards, ~40 item-classes, and ~40 alternatives. Hands sourcing off to the `procurer` skill. The skill's state is the source of truth — the agent is the app.

broomva/skills

Tekton — the shared architecture-intent substrate for co-designing systems with the agent. One typed graph across six tiers (system / journey / data / infra / decisions / qualities); views are queries, not separate diagrams. The canonical artifact is a diff-friendly YAML model both human and agent read and write; it renders to Mermaid (agent-legible, GitHub-native) and a self-contained tabbed HTML viewer (human-visual). Cross-tier traceability (`tekton query <from> <to>`) answers "which infra does this user-journey step touch?" as a path query. USE WHEN: designing or thinking deeply about architecture, a system, a data model, user journeys/flows, or a technical plan WITH the agent; when a Category-C HTML doc isn't enough because you need to see AND edit AND traverse the design across tiers; "let's design X", "architect this", "model the system", "draw the flow", "how does this fit together", "diagram this", "/tekton". NOT FOR: a one-off throwaway diagram (use Mermaid inline); prose-only ADRs (write the ADR...

broomva/skills

OpenCaptions extension for Content Engine — adds intent-driven CWI (Caption With Intent) captions to the post-production pipeline. Hooks into the grade → caption → final stage. Generates captions that understand video intent (pitch, volume, emotion, emphasis) and style themselves accordingly with variable font weight, size, and color. Uses the OpenCaptions CLI or MCP server. Triggers on: 'add captions', 'opencaptions', 'CWI captions', 'intent captions'.

broomva/skills

Produce polished product launch videos using the Liquid Glass aesthetic — dark void backgrounds, 3D perspective floating UI panels, particle effects, spring animations, and cinematic pacing. Built on Remotion with Imagen 4.0 for frames and Veo 3.1 for B-roll. Use when: (1) creating a product demo or launch video, (2) showcasing a UI/app/tool with cinematic polish, (3) building a social-ready video from screenshots and renders, (4) applying the liquid glass floating panel style, (5) composing Remotion videos with 3D transforms and spring animations. Triggers on: 'launch video', 'product video', 'liquid glass video', 'demo video', 'showcase video', 'remotion video', 'floating panel', 'glass aesthetic'.

Verwandte Skills