How I Used Agent Skills for SaaS Product Video and SEO Audit

Building is the fun part. At some point, though, you need to put the thing into the world. You need landing pages, video assets, copy that makes sense, and SEO that is not an afterthought. This is where a lot of projects stall out. The product exists, but the marketing layer is either missing or cobbled together.

Agent skills are a useful way to close that gap. I have been using a combination of the Remotion skill for programmatic video and a set of marketing skills from Corey Haines for SEO and copywriting, all driven from the Kiro CLI. This post walks through the workflow I used to go from a scaffolded SaaS app to having an animated product video on the landing page and an SEO and copy audit applied across the site.

The full repo is at siegerts/skills-marketing.

Quick walkthrough

In this walkthrough, I cover:

• Installing the Remotion and marketing skills with npx skills add
• Generating a project-specific Remotion prompt from Kiro's existing app context
• Embedding the exported product video into the landing page
• Running SEO and copy audits against the site

How agent skills work

Skills are packaged sets of best practices and rules that you can install into your development environment. The skills CLI (npx skills) is an open tool for installing agent skills across coding agents. When Kiro has a skill loaded, it follows those practices automatically. Install one for Remotion and it knows how to structure scenes and manage compositions. Install one for SEO and it knows what to audit and what to fix.

You install them with npx skills add:

npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices
npx skills add coreyhaines31/marketingskills

Once installed, they are available globally or scoped to a specific project.

The example app

To give this some context, I put together a SaaS survey tool called SurveyApp. It is an Astro app with React component islands and Tailwind CSS v4. The app itself is not real. The point is the workflow.

I pretty much one-shotted the initial scaffold with Kiro. The site includes a marketing landing page, pricing, docs, a blog, auth pages, and legal pages. Here is the structure:

/
├── src/
│   ├── components/
│   │   ├── mocks/          # React UI mockups reused in the Remotion video
│   │   │   ├── SurveyBuilder.astro
│   │   │   ├── SurveyResponder.astro
│   │   │   └── AnalyticsDashboard.astro
│   │   ├── Nav.astro
│   │   ├── Footer.astro
│   │   └── DocsSidebar.astro
│   ├── layouts/
│   ├── pages/
│   │   ├── index.astro
│   │   ├── blog/
│   │   └── docs/
│   └── styles/
│       └── global.css      # CSS custom property design tokens
└── video/                  # Remotion project

It is a solid starting point, but it never hurts to go through and optimize. What I wanted to do next was layer on some marketing polish using skills.

Installing the Remotion skill

The Remotion skill from remotion-dev brings in best practices for programmatic video creation. Once it is loaded, Kiro understands how to structure Remotion compositions and follow the framework's conventions.

npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices

I installed it globally since I did not have a project directory set up yet. The skill downloads as a set of rules that get referenced whenever you work with Remotion.

Installing the marketing skills

Corey Haines maintains a collection of marketing skills that cover SEO audits, copywriting, A/B testing, pricing strategy, and more. You can install the full bundle or pick individual skills.

npx skills add coreyhaines31/marketingskills

There are a lot of these. The ones I used were:

• SEO audit for page-level SEO review
• Copywriting for messaging and copy analysis
• Marketing ideas for content and positioning suggestions

There is also copy editing, programmatic SEO, A/B testing, ad creative, AI SEO, analytics tracking, and pricing strategy. It is a strong set if you are building an indie or SMB product. The npx skills add command lets you toggle individual skills on or off during installation.

Creating a product video with Remotion

The Astro app already has React UI mock components: a survey builder, a survey responder, and an analytics dashboard. Since Remotion is a React-based video framework, those same components can be reused directly in an animated marketing video.

The Remotion prompt trick

Rather than writing a Remotion prompt from scratch, I used Kiro to generate it. Kiro already had full context of the app's design system tokens, component structure, and copy. That context produced a much better prompt than writing one manually.

Here is the workflow:

1. In the Kiro IDE, ask it to create a Remotion prompt based on what it knows about the application. It references the design system, lists the components to reuse, defines scenes, and specifies timing.
2. Open the Kiro CLI, select a model, paste in the generated prompt, and run it. I used Claude 4.6 for this. It reads the Remotion best practices skill and examines the existing project structure before generating the video code.
3. Go back and forth with the model, adjusting the prompt and making targeted tweaks.

This two-step approach, using the IDE to create the prompt and then the CLI to execute it with the skill, worked well. The IDE has deep context about the project. The CLI with the skill loaded has deep context about Remotion. Combining both produced better results than either alone.

Here is the prompt Kiro generated. It is detailed, but that is why it works. It pulls in the design system tokens, defines each scene with frame ranges, specifies the spring configs, and tells Remotion which existing components to reuse:

Prompt used in the CLI, generated from the app's existing design and component context.

Using the remotion best practices, create a Remotion video for the
SurveyApp marketing index page. 10 seconds, 30fps, 1920x1080.

Design system:
  Background: #F5F3EF (warm off-white)
  Dark surface: #1C1C1F
  Accent: #FF6B4A (coral)
  Accent text on coral: #FFFFFF
  Border: #DDD9D0
  Text: #1A1A1A, muted #5C5A55, faint #9C9890
  Display font: DM Sans (700, -0.04em tracking)
  Mono font: JetBrains Mono
  Load both via the Remotion fonts rule

3 scenes, no transitions between scenes, just cuts:

Scene 1 - Hero (frames 0-90, 3s)
  Off-white background. Left column: coral beta pill badge springs in
  (frame 0), headline "Surveys people actually finish." animates in
  word-by-word with staggered springs (starts frame 8), subtitle fades
  up (frame 40), coral CTA button springs in (frame 60). Right column:
  the SurveyResponder mock component slides in from the right with a
  spring (frame 20). All springs use damping: 14, stiffness: 120.

Scene 2 - Builder (frames 90-210, 4s)
  Cut to the SurveyBuilder mock component filling most of the frame
  with a thin dark chrome bar above it. The three panels (question list,
  canvas, settings) each fade+translateY in with staggered delays of 6
  frames apart. At frame 150, a logic rule animates into the logic hint
  bar. At frame 180, the floating "94% completion rate" stat card
  springs in from the bottom-left.

Scene 3 - CTA (frames 210-300, 3s)
  Off-white background, centered. SurveyApp wordmark + coral icon
  spring in together (frame 210). Tagline "Precision survey tooling."
  fades in (frame 230). Coral "Start for free" button springs in
  (frame 250). Hold to end. Fade entire composition to off-white over
  the last 10 frames.

Technical:
  Reuse SurveyResponder and SurveyBuilder as React components
  (convert from Astro, keep all inline styles)
  Inject all CSS custom properties via a wrapper
  interpolate with extrapolateRight: 'clamp' everywhere
  If prefersReducedMotion, skip all spring/interpolate animations
  and render final states immediately
  No audio

The important part is that I did not write that prompt manually. Kiro generated it because it already knew the design tokens in global.css, the component names and structure in src/components/mocks/, and the copy on the landing page. That is why the two-step approach works. You would otherwise need to pull all of that together yourself.

The full conversation, including the back and forth for fixes, is in REMOTION-VIDEO-CREATION-CHAT.md in the repo.

Running the video editor

Once Remotion is in place and the dependencies are installed, it gives you a command to preview:

cd video
pnpm install
pnpm remotion studio

This opens Remotion Studio, a browser-based video editor where you can preview the animated video. The video pulls in survey builder mockups, analytics dashboards, and branding, all animated into a 10-second marketing clip.

Embedding the video

After generating the final video file, I asked Kiro to place the video below the hero section on the index page. Restart the dev server and the video is embedded into the marketing site as a first-class landing page asset.

Running an SEO and copywriting audit

With the visual asset in place, the next step is to run the marketing skills against the site to surface improvements in copy and SEO.

Back in the Kiro CLI, I used the marketing skills to create an audit for the site and the page copy. It worked through the content and produced findings across a few areas:

• Missing or generic OG properties for social sharing
• Page titles and meta descriptions that could be more descriptive
• Copy that could be tighter with sharper calls to action
• A full FAQ page based on what the app does, which helps with both traditional SEO and AI search visibility

This is all generated content to begin with, so it still needs review. The audit is useful, but you still have to validate that the product claims are accurate and that the recommendations match what the app actually does. From there you can go further. If you want to add analytics, test alternate messaging, or plan A/B flows, those skills can suggest what to test and where to instrument.

What's in the stack

Layer	Tool	Purpose
IDE	Kiro	Agentic AI IDE for scaffolding and context
Framework	Astro	Static site framework
Components	React	Component islands and mock UI
Styling	Tailwind CSS v4	Utility styles via Vite plugin
Video	Remotion	Programmatic video generation
Skills	skills.sh	Agent skills for Remotion, SEO, and copywriting
Package manager	pnpm	Dependency management

Skills used

Skill	Source	Purpose
remotion-best-practices	remotion-dev	Remotion video generation
seo-audit	Corey Haines	Page-level SEO review
copywriting	Corey Haines	Copy and messaging audit
marketing-ideas	Corey Haines	Content and positioning suggestions

Wrapping up

To recap: I installed agent skills with npx skills add, validated them with the Kiro CLI, scaffolded a SaaS app with Astro, used the Remotion best practices skill to create an animated product video for the landing page, and then used the marketing skills to run an SEO and copy audit across the site.

The two-step prompting pattern was the biggest improvement in the workflow. Using Kiro to generate the Remotion prompt, because it already knew the design system and components, and then running that prompt in the CLI with the skill active produced better output with less manual setup.

For the assets, the Remotion prompt is in REMOTION-VIDEO-CREATION-CHAT.md in the repo.

Repository: siegerts/skills-marketing