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

extract-quote-components

Extract quote containers from article HTML into structured QuoteData.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Quote extraction from editorial HTML is tedious and error-prone; this skill automates locating quote blocks, capturing content, and preserving styling details to enable reproducible rendering downstream.

Core Features & Use Cases

  • Quote container discovery: identifies blocks via selectors like blockquote, .quote, .callout, .pullquote, and .g-block with nested quote cues.
  • Sub-element extraction: captures citation, quote text, and optional status badge, with CSS properties per element.
  • Section mapping: associates each quote with its nearest article section header for context.
  • Optional badge palette: collects unique badge text/color pairs for downstream status systems.

Quick Start

Run extract-quote-components on an article page to output QuoteData containing all quote blocks and their computed styles.

Frequently Asked Questions about extract-quote-components

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

FAQPage Schema
How do I extract blockquote elements and their CSS styling from an article HTML?▼

Extract blockquote elements and their CSS styling by processing article HTML to locate quote containers matching patterns like blockquote, .quote, .callout, .pullquote, and .g-block. Output structured QuoteData containing quote text, citation, computed CSS properties, and optional badge palettes.

What is the best way to parse pullquotes and map them to their article sections?▼

Parse pullquotes and map them to article sections by identifying quote containers in HTML and associating each quote with its nearest preceding h2 header. This structured QuoteData output preserves quote context, citation, and element CSS.

How does quote extraction handle callout blocks with status badges?▼

Quote extraction handles callout blocks with status badges by capturing the badge text and computed CSS color pairs. These unique badge palettes are collected alongside quote text and citation to support downstream status rendering.

Can I extract structured quote data from HTML without specifying CSS selectors manually?▼

You can extract structured quote data without manually specifying CSS selectors. The skill automatically discovers quote containers by matching blockquote, .quote, .callout, .pullquote, and .g-block patterns, capturing sub-elements and computed CSS.

Does quote extraction work with custom HTML class containers like g-block?▼

Quote extraction works with custom HTML class containers like g-block, along with standard blockquote, .quote, .callout, and .pullquote patterns. It captures nested quote cues, maps sections from preceding h2 tags, and outputs structured QuoteData.

Why are my extracted quotes missing citation or section context?▼

Extracted quotes may miss citation or section context if the HTML lacks proper citation sub-elements or preceding h2 headers. The skill maps sections from the nearest preceding h2 and extracts available citation data to produce structured QuoteData.

Related Skills

Explore More Content & Communication Skills→
ngochuy13ngochuy13

article-enrichment

Transform unstructured article dumps into structured brain pages with summaries and quotes.

Community
Advanced
bengousbengous

design-system-creator

Generate design systems with CSS tokens, typography scales, and accessibility checks.

Community
Advanced
abdullah1854abdullah1854
1

chrome-data-extract

Generate JavaScript snippets to extract structured data from HTML tables, forms, and lists.

Community
Intermediate
cas-bigdatalabcas-bigdatalab
541

clean_html_mapper

Convert HTML content to plain text with asterisk list formatting.

Official
Basic