Authoring Theme Profiles for the Beautiful-Article Skill: Complete Guide

The beautiful-article skill provides 12 distinct authoring theme profiles—including Tufte, Press, Shannon, and Vignelli—that define visual styling contracts for AI-generated content, configured via the JSON registry at skills/beautiful-article/theme-profiles/index.json in the ConardLi/garden-skills repository.

The beautiful-article skill is a specialized component of the ConardLi/garden-skills framework that standardizes how AI agents format and style generated articles. These authoring theme profiles act as declarative contracts, mapping specific design philosophies to rendering instructions used by the reacticle runtime library.

Available Authoring Theme Profiles

The registry in skills/beautiful-article/theme-profiles/index.json defines twelve visual identities, each optimized for specific content contexts and audience expectations.

Evidence-First and Technical Documentation

• Tufte (tufte): Enforces a data-ink maximization style with minimal decoration. Ideal for evidence-based reports and analytical writing.

• Shannon (shannon): Implements a dark-theme engineering aesthetic optimized for post-mortems and technical forensics.

• Vignelli (vignelli): Applies Swiss Internationalist grid principles for neutral, highly readable documentation layouts.

• Knuth (knuth): Provides formal academic preprint styling with numbered sections and formula support for research publications.

• Fuller (fuller): Renders a cool technical blueprint appearance designed for specifications and RFC documents.

Editorial and Narrative Content

• Press (press): Delivers a warm, editorial tone suited for long-form essays and executive briefings.

• Bodoni (bodoni): Employs high-contrast Didone typography reminiscent of magazine spreads for high-impact storytelling.

• Freddie (freddie): Uses warm yellow tones to create a friendly, approachable vibe for tutorials and changelogs.

• Andy (andy): Applies a soft, soothing palette specifically designed for onboarding flows and wellness content.

Creative and Brand-Focused

• Bayer (bayer): Implements Bauhaus primary-color geometry for product introductions and brand storytelling.

• Sottsass (sottsass): Applies playful Memphis design with 80s撞色 (color-blocking) for creative writing and experimental content.

Accessing and Configuring Theme Profiles

The skill exposes theme metadata through a centralized JSON registry and CLI utilities.

Listing Available Themes

Use the scaffold script located at skills/beautiful-article/scripts/scaffold.sh to enumerate installed profiles:

bash scripts/scaffold.sh --list-themes

Registry Structure

For custom tooling, directly inspect the JSON entries in skills/beautiful-article/theme-profiles/index.json:

{
  "id": "tufte",
  "runtimeTheme": "tufte",
  "label": "Tufte · Data-Ink",
  "profile": "tufte.md",
  "canonicalRuntimeMd": "reacticle/themes/tufte.md"
}

Each entry maps the theme ID to its corresponding Markdown contract and runtime implementation path.

Theme Profile Contracts

Each authoring theme profile includes a detailed Markdown contract specifying visual constraints, recommended article types, and exclusion criteria.

Contract File Locations

Individual profile documentation follows the naming convention {theme-id}.md within the theme profiles directory:

• skills/beautiful-article/theme-profiles/tufte.md
• skills/beautiful-article/theme-profiles/press.md
• skills/beautiful-article/theme-profiles/shannon.md

These files describe the "not for" scenarios and typographic rules that the AI agent must respect during content generation.

Runtime Integration with Reacticle

The canonicalRuntimeMd field establishes the bridge between the authoring profile and the rendering layer. This property points to the matching runtime component in the reacticle library, ensuring that the visual style defined in the profile contract renders correctly in the final output.

When scaffolding a new project, the CLI persists the selected theme to your configuration:

{
  "dependencies": {
    "reacticle": "^<latest>"
  },
  "theme": "tufte"
}

Summary

• The beautiful-article skill maintains 12 distinct authoring theme profiles ranging from academic (Knuth) to creative (Sottsass).
• Profile metadata is centralized in skills/beautiful-article/theme-profiles/index.json.
• Each profile links to a Markdown contract file (e.g., tufte.md) detailing styling constraints and usage guidelines.
• The canonicalRuntimeMd field connects profiles to specific rendering components in the reacticle library.
• Use bash scripts/scaffold.sh --list-themes to enumerate options, then set the "theme" field in package.json to activate a profile.

Frequently Asked Questions

How do I add a custom theme profile to the beautiful-article skill?

Create a new entry in skills/beautiful-article/theme-profiles/index.json with a unique ID, runtime theme reference, and human-readable label. Provide a corresponding Markdown contract file documenting the visual specifications, color constraints, and recommended content types. Ensure the canonicalRuntimeMd field points to a valid reacticle runtime theme or your custom implementation.

What is the difference between the theme ID and the runtime theme?

The theme ID (e.g., tufte) serves as the internal identifier used by scaffold scripts and configuration files. The runtime theme specifies which rendering component to load from the reacticle library. While these values often match in the default registry, they can differ when using extended theme variants or aliased implementations.

Which theme profile should I use for technical API documentation?

Select Vignelli for neutral, grid-based layouts that maximize readability, or Fuller if you require a blueprint aesthetic suitable for engineering specifications and RFC documents. Both enforce strict typographic hierarchies essential for technical reference material.

Where does the scaffold script store the selected theme configuration?

The bash scripts/scaffold.sh utility writes the chosen theme to the theme field in the generated project's package.json. This value is then consumed by the reacticle build pipeline to load the appropriate CSS variables, layout components, and typography rules during static generation.

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