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

> Explore 16 semantic React components in the Reacticle protocol, like Article, Hero, and CodeBlock. Enforce strict theme-driven styling for beautiful UIs.

- Repository: [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills)
- Tags: api-reference
- Published: 2026-08-28

---

**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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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:

```tsx
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`](https://github.com/ConardLi/garden-skills/blob/main/component-policy.md) and [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/skills/beautiful-article/references/component-policy.md), with additional context in [`README.md`](https://github.com/ConardLi/garden-skills/blob/main/README.md) and [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/skills/beautiful-article/references/component-policy.md) within the ConardLi/garden-skills repository. High-level protocol descriptions appear in [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md), while [`README.md`](https://github.com/ConardLi/garden-skills/blob/main/README.md) provides quick-reference documentation for specific components like Quote and CodeBlock.