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

> Discover how data/style-library.json is shared between the website and agent skill reference in awesome-gpt-image-2. Learn about runtime consumption and build-time generation for this key file.

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: internals
- Published: 2026-09-02

---

**The [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/style-library.json) dynamically when the page loads. In [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx), the code retrieves the file via standard fetch:

```javascript
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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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:

```javascript
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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/agents/skills/gpt-image-2-style-library/references/style-library.md) is then imported into the skill definition:

```javascript
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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) to produce pre-rendered page data:

```javascript
// 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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) | Contains all categories, styles, scenes, templates |
| **Website runtime loader** | [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`.