extract-icons-and-media

Extract icons, logos, avatars, and embedded images from static HTML into structured JSON.

Updated Aug 23, 2025
One-click install
npx skills add https://github.com/therealityreport/trr-app --skill extract-icons-and-media
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: extract-icons-and-media
Source: https://github.com/therealityreport/trr-app/tree/main/.agents/skills/design-docs-agent/extract-icons-and-media
Command: npx skills add https://github.com/therealityreport/trr-app --skill extract-icons-and-media

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill extracts inline SVG icons, team/league logos, author avatars, and embedded images from static HTML, converting them into structured data to support design-system documentation and asset pipelines.

Core Features & Use Cases

  • Extract inline SVGs with metadata such as name, viewBox, fills, size, usage, and source element.
  • Detect and classify logos (team and league) from HTML assets and provide resolved URLs for asset pipelines.
  • Retrieve author avatars and embedded images with resolvable URLs and size metadata.
  • Deduplicate assets and provide a consistent IconsAndMediaData output for downstream tooling.

Quick Start

Provide the static HTML source and run the agent to produce the IconsAndMediaData output.

Frequently Asked Questions about extract-icons-and-media

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract inline SVG icons from static HTML for a design system?

Extract inline SVG icons from static HTML by parsing the source to resolve image URLs, deduplicate assets, and validate fields, outputting a structured IconsAndMediaData JSON object for design-system documentation.

Can I use this to extract logos and author avatars from server-rendered pages without executing JavaScript?

Yes, you can extract logos and author avatars from server-rendered pages without executing JavaScript. The tool applies static HTML parsing logic to ensure deterministic asset discovery from raw HTML.

What is the best way to convert embedded images and media assets into structured JSON data?

The best way to convert embedded images and media assets into structured JSON data is to run the static HTML source through the agent, which retrieves resolvable URLs and size metadata to produce consistent IconsAndMediaData output.

How do I deduplicate extracted assets and generate download tasks for an asset pipeline?

Deduplicate extracted assets and generate download tasks by applying static HTML parsing logic to validate extracted fields, outputting both IconsAndMediaData and AssetDownloadTask entries for downstream asset pipelines.

Does this asset extraction approach work with dynamic JavaScript-rendered web pages?

No, this asset extraction approach does not work with dynamic JavaScript-rendered web pages. It is designed specifically for server-rendered pages where no JavaScript is executed, ensuring deterministic asset discovery from raw HTML.

What metadata can I retrieve when extracting SVG icons from HTML?

When extracting SVG icons from HTML, you can retrieve metadata such as name, viewBox, fills, size, usage, and source element to support design-system documentation and asset pipelines.