How to use the Logo Outro Frame agent skill (frame-logo-outro)

What an agent skill is and what this one makes the agent do

An agent skill is a folder of instructions that an AI agent can load when a task matches it. This one is named frame-logo-outro and is licensed under Apache-2.0. Its SKILL.md file describes a template for a brand reveal frame meant to close a video.

When you ask for an end card, the agent builds a dark or light background, draws a logo from four to eight simple geometric shapes (circles, squares, triangles and hairlines) using CSS or inline SVG, and animates the pieces sliding in from different directions and settling into place. It then adds a soft glow and a shimmer across the logo, reveals the brand name, adds a tagline, and adds a footer line. The animation plays once and then holds still, so the last frame works as an end card.

• Canvas: 1920×1080 (16:9), with a subtle vignette so the centre is brighter.
• Four colour palettes: Midnight Indigo, Solar Amber, Forest Mint and Bone & Ink (light, editorial style with shadows instead of glow).
• Fonts: Inter Tight, SF Pro Display or Manrope for Western text; Noto Sans SC for Chinese text.
• Uses the brand name and tagline you supply, or falls back to placeholder text if none are given.

Install Logo Outro Frame in Claude or a project folder

Option one: download the ZIP for this skill from this page and unzip it into your personal skills folder, ~/.claude/skills/. Option two: unzip it into a project's .claude/skills/ folder so that only that project uses it.

Option three: in the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.

The package contains three files: SKILL.md (the instructions the agent reads), example.html (a sample of the output) and open-design.json (project metadata). Keep the files together as the unzip produces them.

• Personal install: unzip into ~/.claude/skills/
• Project install: unzip into .claude/skills/ inside your project
• Claude apps: Settings → Capabilities → Skills, then upload

Trigger the skill with a natural request

You do not need a special command. Describe the closing frame you want and include the brand name and tagline in the same message, because the template uses them exactly and does not invent them. If you leave them out, the agent uses the placeholders HTML Anything and Anything → beautiful HTML.

The skill is suited to requests about a video outro, end card, brand closing frame or logo reveal at the end of a clip. Mention the palette if you have a preference, such as dark indigo or the light editorial look.

• Make a 1920×1080 end card for my channel. Brand name: Northwind Labs. Tagline: Build quieter software. Use Solar Amber.
• Create a logo outro frame for our campaign video with a light Bone & Ink background and a footer line with our website.
• Design a closing frame for my YouTube clip using the Logo Outro Frame template, Midnight Indigo palette.

Get the HTML into a video

The output is an HTML file, not a video. To use it, open the file in a browser at 1920×1080 and record the screen or capture the animation with a screen recorder or your editing tool. Record through to the end so the held final frame is long enough for your outro.

Because the animation runs once and freezes, you can capture the final state as a still image for a thumbnail or a static end card.

• Open the HTML in a browser window sized 1920×1080.
• Start your recording before the animation begins and stop after it has settled.
• Import the recording into your editor as the last clip of your video.

Check the result before publishing

The template draws the logo from simple shapes. It does not reproduce a complex existing logo faithfully, and it is not allowed to use external logo image files. If your brand has an official logo file, the template will not use it, so compare the drawn version with your guidelines before publishing.

Check the text too. Confirm the brand name and tagline are spelled exactly as you want, and that the footer line is correct, since the template uses small uppercase text with reduced opacity that can be hard to read on some screens.

• Compare the drawn logo with your official brand guidelines.
• Confirm the placeholder text has been replaced with your real brand name and tagline.
• Check that small footer text is readable at your video's playback size.
• Preview the reduced-motion setting if your audience may use it, since the template respects prefers-reduced-motion.

Safety notes: scripts and network

According to the skill's metadata, Logo Outro Frame requires nothing beyond the agent, does not run scripts and does not use the network. It is a set of instructions plus a sample HTML file.

Because the output is an HTML file that you open yourself, review it as you would any file before sharing it publicly.

• Requires: nothing listed in the skill metadata.
• Runs scripts: no.
• Uses network: no.
• Licence: Apache-2.0.