What Semantic Components Are Available in the Reacticle Protocol? A Complete Reference

The Reacticle protocol defines 16 semantic React components—including Article, Hero, Section, Quote, CodeBlock, and Raw—that replace raw HTML/CSS in the beautiful-article skill, enforcing strict theme-driven styling via design tokens.

The Reacticle protocol is a prose-first semantic component system implemented in the ConardLi/garden-skills repository's beautiful-article skill. Unlike conventional React development that relies on arbitrary div elements and inline styles, this protocol provides a fixed vocabulary of typed components where every element conveys specific structural meaning. According to skills/beautiful-article/references/component-policy.md, all styling derives exclusively from theme tokens (prefixed --ra-*), prohibiting arbitrary CSS or external class names.

Document Structure Components

These components establish the hierarchical skeleton of any article, replacing generic HTML5 tags with explicit semantic types.

Article and ThemeProvider

The Article component serves as the root container that assembles the entire document tree, as defined in skills/beautiful-article/references/component-policy.md. Every Reacticle application requires a single ThemeProvider at the root to inject the active theme's token set into the component tree. Without this provider, child components cannot access the --ra-* CSS custom properties required for rendering.

Hero, Lead, and Metadata

The Hero component renders prominent front-matter blocks featuring large titles, subtitles, and optional metadata arrays. The Lead component follows the Hero to provide introductory paragraphs that set context and establish reader expectations. Both components are specified in component-policy.md and accept structured props rather than arbitrary markup, ensuring consistent presentation across different themes.

Section Hierarchy

Content organization relies on Section components as primary content blocks, which can nest Subsection elements for second-level grouping. The Conclusion component provides a standardized closing block for summarizing key takeaways, while TOC automatically generates a table of contents from the document hierarchy. These structural elements are documented in component-policy.md and enforce strict parent-child relationships to maintain document outline integrity.

Content Presentation Components

Text and Visual Enhancements

The Quote component renders block-level quotations with optional attribution, while Callout creates highlighted side-notes or tip boxes. Both are referenced in README.md and accept children content with automatic theme-appropriate styling. For multimedia, Image provides optimized responsive images, and Table renders structured data with optional captions. The Aside component creates side content visually separated from the main reading flow, as defined in component-policy.md.

Technical Content Blocks

Technical articles benefit from CodeBlock for syntax-highlighted code snippets and Formula for LaTeX/Math rendering. Both components encapsulate complex rendering logic while maintaining the protocol's theme constraints, sourcing their definitions from README.md.

Utility and Escape-Hatch Components

The Raw Component

The Raw component functions as a strictly controlled escape hatch for edge cases requiring custom markup. According to component-policy.md, Raw allows injection of HTML strings with a critical constraint: all styling must use theme-token-only markup (CSS variables like --ra-color-primary). Plain CSS classes or arbitrary inline styles are prohibited, preserving the design system's integrity even when bypassing standard components.

Complete Implementation Example

The following example demonstrates the proper composition of Reacticle semantic components as implemented in the beautiful-article skill:

import {
  ThemeProvider,
  Article,
  Hero,
  Lead,
  Section,
  Quote,
  Image,
  Raw,
} from "reacticle";

function MyArticle() {
  return (
    <ThemeProvider theme="press">
      <Article>
        <Hero
          title="How AI Changes Medicine"
          subtitle="A deep dive into emerging technologies"
          meta={[
            { label: "Date", value: "2026‑08‑28" },
            { label: "Author", value: "Conard Li" },
          ]}
        />
        <Lead>
          Artificial intelligence is reshaping healthcare from diagnosis to drug
          discovery. In this article we explore the most impactful trends.
        </Lead>

        <Section title="Diagnosis">
          <Quote>
            “AI can spot patterns invisible to the human eye.”
          </Quote>
          <Image src="/images/diagnosis.png" alt="AI‑assisted diagnosis" />
          <Raw>{`<p style="--ra-color-primary">Raw markup must use theme tokens only.</p>`}</Raw>
        </Section>

        <Section title="Drug Discovery">
          {/* … more prose … */}
        </Section>
      </Article>
    </ThemeProvider>
  );
}

Theming Architecture and Constraints

The Reacticle protocol enforces a strict no-raw-CSS policy. As documented in component-policy.md and SKILL.md, components never accept className props or inline style objects. Instead, all visual properties—colors, typography, spacing—reference CSS custom properties (design tokens) provided by the ThemeProvider. This architecture ensures that articles remain visually consistent across different themes (such as the "press" theme shown above) without manual style overrides.

Summary

• The Reacticle protocol provides 16 semantic components organized into document structure, content presentation, and utility categories.
• ThemeProvider is required at the root to supply --ra-* theme tokens to all child components.
• Components like Article, Hero, Section, and Quote replace generic HTML tags with typed, meaning-rich alternatives.
• The Raw component offers a constrained escape hatch that permits only theme-token-based styling.
• All component definitions reside in skills/beautiful-article/references/component-policy.md, with additional context in README.md and SKILL.md.

Frequently Asked Questions

What is the Reacticle protocol?

The Reacticle protocol is a prose-first semantic component system defined in the ConardLi/garden-skills repository. It provides a fixed vocabulary of React components that express document structure through explicit types rather than generic HTML tags, ensuring consistent styling through theme tokens.

How does Reacticle differ from standard HTML or JSX?

Unlike standard HTML, Reacticle components prohibit arbitrary div elements, className attributes, and inline styles. Every element must use a specific semantic component from the protocol vocabulary (such as Section or Quote), and all styling derives from the active theme's CSS custom properties.

Can I use custom CSS with Reacticle components?

Direct CSS usage is prohibited except through the Raw component. When using Raw, markup must exclusively reference theme tokens (e.g., style="--ra-color-primary") rather than raw color values or external CSS classes. This constraint maintains design system consistency across all articles.

Where are the Reacticle component specifications maintained?

The canonical component definitions and usage rules reside in skills/beautiful-article/references/component-policy.md within the ConardLi/garden-skills repository. High-level protocol descriptions appear in SKILL.md, while README.md provides quick-reference documentation for specific components like Quote and CodeBlock.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}