skills.rest
therealityreport
therealityreportCOMMUNITY
Explore all skills by this author →
GitHub

extract-ai2html-artboards

Extract structured ai2html artboard data from article HTML into Ai2htmlData JSON.

Updated Aug 23, 2025
Search Tags:#data-extraction#viewport#overlays#html-parsing#ai2html#artboards
One-click install
npx skills add https://github.com/therealityreport/trr-app --skill extract-ai2html-artboards
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extract-ai2html-artboards
Source: https://github.com/therealityreport/trr-app/tree/main/.agents/skills/design-docs-agent/extract-ai2html-artboards
Command: npx skills add https://github.com/therealityreport/trr-app --skill extract-ai2html-artboards

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Parse article HTML that contains ai2html output and extract structured artboard data: viewport-specific dimensions, background images, text overlays, and badge elements. Produce an Ai2htmlData JSON object that downstream components can consume to render responsive graphics.

Core Features & Use Cases

  • Extract viewport-specific data across mobile, tablet, and desktop with correct classification.
  • Resolve background images and optional CDN URLs via a provided image URL map.
  • Extract absolute-positioned text overlays and badges including fonts, colors, and spacing for downstream rendering.

Quick Start

Run the extractor on your article HTML to produce the Ai2htmlData JSON.

Frequently Asked Questions about extract-ai2html-artboards

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

FAQPage Schema
How do I extract ai2html artboard data from article HTML?▼

To extract ai2html artboard data from article HTML, run the extractor to parse viewport-specific dimensions, background images, and absolute overlays, producing a canonical Ai2htmlData JSON object for responsive rendering.

Can I parse responsive graphics data across mobile, tablet, and desktop viewports?▼

Yes, you can parse responsive graphics data by grouping artboard dimensions and style attributes across mobile, tablet, and desktop variants, correctly classifying each viewport for downstream rendering.

How do I extract absolute-positioned text overlays and badges from ai2html output?▼

Extract absolute-positioned text overlays and badges from ai2html output by parsing style attributes, fonts, colors, and spacing, capturing these elements within the structured Ai2htmlData JSON output.

What is the best way to resolve background images and CDN URLs for ai2html artboards?▼

The best way to resolve background images and CDN URLs for ai2html artboards is by mapping the parsed HTML elements against a provided image URL map, integrating the resolved URLs into the final JSON output.

How do I calculate aspect ratios for ai2html artboards during HTML parsing?▼

Calculate aspect ratios for ai2html artboards during HTML parsing by extracting viewport-specific dimension values from the style attributes, then deriving the aspect ratio for each artboard variant.

Does ai2html data extraction require specific dependencies or components?▼

Ai2html data extraction requires no external dependencies or components, operating directly on the provided article HTML and image URL map to generate the structured artboard metadata JSON.

Related Skills

Explore More Design & Creative Skills→
ahastudioahastudio
186

analyze-article

Fetch a web article and generate a Korean TIL document with summary, analysis, critique, and insights.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-overflow

Detect horizontal overflow, clipped badges, and hidden table columns via DOM evaluation.

Community
Intermediate
nicepkgnicepkg
276

article-extractor

Extract clean article text from web URLs and save as a text file.

Official
Intermediate
X-School-AcademyX-School-Academy
19

media-html-image

Render uploaded HTML files into static PNG images with specified viewport dimensions.

Official
Intermediate