Generate Showcase From Video Agent Skill

Extracts YouTube transcripts and generates professional Flutter showcase blog posts in Markdown format. Use when you need to create a technical marketing case study from a video success story.

2k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

3106

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/flutter/website --skill generate-showcase-from-video

What comes with it

4 484 bytes besides the instruction

references/blog-format.md

The instruction itself

8 sections, as written by the author

Generate showcase from video

Overview

This skill automates the creation of high-quality Flutter case studies from video interviews or presentations. It fetches the transcript, analyzes the business and technical impact, and formats a blog post suitable for the official Flutter showcase.

Workflow

1. Extract transcript

Prompt the user for a YouTube URL if one hasn't been provided.
Execute the transcript extraction script:

  dart run tool/get_video_transcript.dart "<youtube_url>"

2. Analyze & generate

Analyze the transcript to identify:
Customer/Company name: Used for the final filename.
Goal: The problem they were solving (this content should be part of the introductory paragraphs without a header).
Why Flutter: Reasons for choosing Flutter.
Their solution: Technical implementation details (mapped to the Their solution header).
Key metrics: Quantifiable wins (Velocity, Reuse, FPS, Team size, etc. - mapped to the Results header).
CRITICAL: DO NOT use Markdown headers (e.g. # Header) in the content. Use Bold Text for the section titles as specified in references/blog-format.md.
Use the detailed structure and tone guidelines in references/blog-format.md.

3. Generate image assets

MANDATORY: Request an image (logo or app icon) from the user directly using the chat UI. The user can drag and drop or attach the image to the chat.
PROHIBITION: DO NOT use browser tools, search engines, or external websites to find the logo yourself. You must always wait for the user to provide the official asset.
Image naming: Image filenames (logo and card) MUST use underscores to separate words, even if the directory or slug uses hyphens (e.g., global_citizen_logo.png).
Once the image is attached, copy it to content/showcase/images/third_party/case_studies/<customer_name>/<customer_name_underscored>_logo.png.
Run the automatic padding script to generate a perfectly fitted 1450x1080 Showcase Card with a white background:

  dart run tool/generate_showcase_card.dart "content/showcase/images/third_party/case_studies/<customer_name>/<customer_name_underscored>_logo.png" "content/showcase/images/third_party/case_studies/<customer_name>/<customer_name_underscored>_card.png"

4. Output Markdown & update YAML

Create the final Markdown file directly in the content/showcase/ directory. DO NOT create any standalone blog draft files or scratch .md files anywhere else in the project. The only markdown output should be the final showcase file.
Filename: content/showcase/<customer_name>.md (e.g., content/showcase/bmw.md, content/showcase/nubank.md).
Strict frontmatter schema: Ensure the output follows the professional, data-driven tone specified in the guidelines. MANDATORY: You MUST follow the exact YAML frontmatter schema defined in references/blog-format.md.
YAML safety: Always quote values that contain colons.
Headline: The headline field MUST be exactly the company_name (e.g., headline: "BMW"). Do NOT add descriptions or slogans to the headline.
Specifically, successMetrics must include perc and desc.
Include the date field: publishDate.
Include the videoEmbedUrl in the frontmatter if provided, formatting standard YouTube links as /embed/ links (e.g., https://www.youtube.com/embed/A3ApoV_QRio).
Make sure to map logo: and card: in the frontmatter to the newly generated content/showcase/images/third_party/case_studies/<customer_name>/ images.
Ensure the company is added to content/showcase/data/companies.yaml if it doesn't already exist.

Best practices

Human-like tone: Avoid robotic phrasing. The blog should feel authentic and well-reasoned.
Metrics focus: Always look for numbers. If the video mentions "shipped in 4 months," include it.
Safety: Do not exaggerate claims beyond what is explicitly stated or strongly implied in the transcript.
Logos: Never "guess" or search for a logo online. Brands are very specific about their visual identity; using an incorrect or low-quality logo from the web can damage the professional look of the showcase.

Other skills for the same job

different authors, same section of the catalogue

Canvas Design

by anthropics

vendor ×13

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.

Improves the quality of images, especially screenshots, by enhancing resolution, sharpness, and clarity. Perfect for preparing images for presentations, documentation, or social media posts.

Downloads videos from YouTube and other platforms for offline viewing, editing, or archival. Handles various formats and quality options.

Lightweight WSI tile extraction and preprocessing. Use for basic slide processing tissue detection, tile extraction, stain normalization for H&E images. Best for simple pipelines, dataset preparation, quick tile-based analysis. For advanced spatial proteomics, multiplexed imaging, or deep learning pipelines use pathml.

Microscopy data management platform. Access images via Python, retrieve datasets, analyze pixels, manage ROIs/annotations, batch processing, for high-content screening and microscopy workflows.

Python library for working with DICOM (Digital Imaging and Communications in Medicine) files. Use this skill when reading, writing, or modifying medical imaging data in DICOM format, extracting pixel data from medical images (CT, MRI, X-ray, ultrasound), anonymizing DICOM files, working with DICOM metadata and tags, converting DICOM images to other formats, handling compressed DICOM data, or processing medical imaging datasets. Applies to tasks involving medical image analysis, PACS systems, radiology workflows, and healthcare imaging applications.

This skill should be used when working with pre-trained transformer models for natural language processing, computer vision, audio, or multimodal tasks. Use for text generation, classification, question answering, translation, summarization, image classification, object detection, speech recognition, and fine-tuning models on custom datasets.

13k tokens

How to use it

Copy the folder

Take flutter/generate-showcase-from-video from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.