How Data/style-library.json Is Shared Between the Website and Agent Skill Reference in awesome-gpt-image-2

The data/style-library.json file serves as the single source of truth, consumed at runtime by the website and at build time by a Node.js script that generates the agent skill reference.

In the freestylefly/awesome-gpt-image-2 repository, maintaining synchronized style data across the user interface and AI agent capabilities is critical. Rather than duplicating definitions, the project uses one JSON file that both systems read independently—ensuring that style categories, templates, and examples remain identical whether a user browses the site or an agent generates prompts.

How the Website Loads the Style Library at Runtime

The client-side application fetches style-library.json dynamically when the page loads. In src/main.jsx, the code retrieves the file via standard fetch:

fetch('/style-library.json')
  .then(r => r.json())
  .then(data => {
    // use data.categories, data.styles, data.templates, …
  });

The returned data powers the entire UI: category cards, style selectors, and example galleries all render from this single request. Because the JSON resides in the public directory (data/style-library.json), it is served as a static asset without additional build configuration.

How the Agent Skill Reference Is Generated at Build Time

The GPT-Image-2 agent skill does not read JSON directly. Instead, scripts/generate-style-skill.mjs processes the same source file to produce a Markdown reference that skills can consume:

import { readFileSync, writeFileSync } from 'fs';
import { join } from 'path';

const libraryFile = join(root, 'data', 'style-library.json');
const referenceFile = join(skillDir, 'references', 'style-library.md');

const library = JSON.parse(readFileSync(libraryFile, 'utf‑8'));
const md = `# Style Library\n\n${JSON.stringify(library, null, 2)}`;

writeFileSync(referenceFile, md);

This script executes during the build pipeline. The generated file at agents/skills/gpt-image-2-style-library/references/style-library.md is then imported into the skill definition:

import reference from './references/style-library.md';
export const skill = {
  name: 'gpt-image-2-style-library',
  reference,
  // …
};

The Markdown format allows the skill to include structured reference material in its system prompt without parsing raw JSON at execution time.

Supporting Build Step: Site-Wide Static Data Generation

A third consumer, scripts/generate-site-data.mjs, also reads data/style-library.json to produce pre-rendered page data:

// Consumes data/style-library.json to generate static assets
// Used for SEO-optimized, fast-loading category pages

This enables static site generation while still deriving content from the central JSON file.

Key Files in the Sharing Architecture

Purpose	Path	Function
Source of truth	data/style-library.json	Contains all categories, styles, scenes, templates
Website runtime loader	src/main.jsx	Executes fetch('/style-library.json')
Skill reference generator	scripts/generate-style-skill.mjs	Transforms JSON → Markdown
Generated skill reference	agents/skills/gpt-image-2-style-library/references/style-library.md	Imported by agent skills
Site data generator	scripts/generate-site-data.mjs	Produces static build artifacts

Summary

• Single source of truth: data/style-library.json prevents data drift between website and agent.
• Runtime consumption: The React frontend fetches JSON directly for dynamic UI rendering.
• Build-time transformation: scripts/generate-style-skill.mjs converts JSON to Markdown for agent compatibility.
• Additional pipeline: scripts/generate-site-data.mjs supports static site generation from the same file.
• Zero duplication: All systems reference identical style definitions without copy-paste maintenance.

Frequently Asked Questions

Why does the agent skill use Markdown instead of reading the JSON directly?

Markdown integrates cleanly with LLM system prompts. The references/style-library.md file provides human-readable context that the model processes as reference material, whereas raw JSON would require additional parsing logic inside the skill runtime.

What happens if the JSON structure changes?

Both the website and the skill reference generator adapt automatically. The fetch call in main.jsx and the file reading logic in generate-style-skill.mjs both parse the full JSON structure, so schema evolution affects all consumers consistently—no manual sync required.

Is the style library fetched on every page load?

Yes. The fetch('/style-library.json') call in main.jsx executes at runtime, ensuring users always see the latest definitions without a full site redeployment. For high-traffic scenarios, standard HTTP caching headers could reduce redundant transfers.

Can other scripts add new consumers of the JSON?

Absolutely. The data/style-library.json path is stable and documented. Any build or runtime script can import or fetch it, following the pattern established by generate-style-skill.mjs and generate-site-data.mjs.

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