What Is the Role of data/style-library.json in Awesome-GPT-Image-2?

The data/style-library.json file serves as the single source of truth for all visual styles, categories, scenes, and prompt templates across the Awesome-GPT-Image-2 ecosystem.

In the freestylefly/awesome-gpt-image-2 repository, data/style-library.json functions as the central metadata hub that drives every user-facing interface and automated build process. This JSON document defines the complete taxonomy of image generation capabilities, synchronizing definitions across the React web interface, static documentation site, and autonomous agent skills.

Central Metadata Hub and Taxonomy

The data/style-library.json file aggregates four critical data structures that define the project's visual language:

• Metadata – Stores version information, repository links, and human-readable tag label mappings
• Categories – The categories array enumerates UI, infographic, poster, product, brand, architecture, photography, illustration, character, scene, history, document, and "other" categories, each with an ID, title, description, and cover image
• Styles and Scenes – The styles and scenes arrays catalog visual aesthetics (e.g., 3D, Brand, Poster) and usage contexts (e.g., Tech, Commerce, Education) with localized titles and keyword hints
• Prompt Templates – The templates array binds categories, styles, and scenes into concrete generation recipes (e.g., "UI Screenshot System", "Infographic Engine") with guidance and pitfalls for GPT-Image-2

Runtime Consumption in the React Frontend

The React application in src/main.jsx fetches the style library at runtime to populate the user interface. On application load, the code retrieves /style-library.json and stores it in component state via setStyleLibrary, enabling dynamic category browsing and template selection.

useEffect(() => {
  fetch('/style-library.json')
    .then(res => res.json())
    .then(library => setStyleLibrary(library));
}, []);

This fetch operation provides the UI with the complete list of categories, styles, scenes, and templates, ensuring users always interact with the current taxonomy.

Build Pipeline Integration

Multiple Node.js build scripts read data/style-library.json to generate downstream artifacts, validating the file's integrity during the process.

Generating Agent Skill References

The scripts/generate-style-skill.mjs script reads the JSON file to produce the skill reference markdown at style-library.md. It explicitly validates that the templates section exists before rendering.

const libraryFile = join(root, 'data', 'style-library.json');
const library = JSON.parse(await readFile(libraryFile, 'utf8'));
if (!library.templates) throw new Error('style-library.json must include templates');
const md = renderSkillReference(library);
await writeFile(join(skillDir, 'references', 'style-library.md'), md);

Static Site Data Generation

The scripts/generate-site-data.mjs script consumes the same JSON file to produce static site data for the documentation website. This guarantees that the website and the autonomous "gpt-image-2-style-library" skill share identical style definitions.

Prompt Template Architecture

The templates array within data/style-library.json defines concrete prompt structures that bind taxonomy elements together. Each template specifies applicable categories, styles, scenes, usage conditions, and generation guidance.

The following function demonstrates how applications can consume these templates to construct formatted prompts:

function buildPrompt(templateId) {
  const tmpl = styleLibrary.templates.find(t => t.id === templateId);
  return [
    `Category: ${tmpl.category}`,
    `Styles: ${tmpl.styles.join(', ')}`,
    `Scenes: ${tmpl.scenes.join(', ')}`,
    `Use when: ${tmpl.useWhen.en}`,
    `Guidance: ${tmpl.guidance.en.join(' ')}`,
  ].join('\n');
}

Cross-Component Dependencies

Because data/style-library.json drives the web UI, static documentation, and agent skill, any modification propagates across the entire ecosystem:

• src/main.jsx – Fetches the file at runtime to hydrate the React state with categories and templates
• scripts/generate-style-skill.mjs – Validates the JSON structure and generates the skill reference markdown
• scripts/generate-site-data.mjs – Produces static site assets for the documentation website
• agents/skills/gpt-image-2-style-library/SKILL.md – References the JSON file as the definitive source for style definitions

Summary

• data/style-library.json acts as the single source of truth for the Awesome-GPT-Image-2 visual taxonomy
• The React frontend consumes it via HTTP fetch in src/main.jsx to drive the UI
• Build scripts validate the file and generate skill references and static site data
• The JSON structure includes categories, styles, scenes, and prompt templates with localization support
• Changes to styles or templates must be made in this file to maintain ecosystem consistency

Frequently Asked Questions

What is the role of data/style-library.json in the project?

This file serves as the central configuration hub that defines every visual style, category, scene, and prompt template used by the repository. It stores metadata, taxonomy definitions, and generation templates that synchronize the React frontend, build scripts, and agent skills.

How does the React frontend load the style library?

The frontend fetches /style-library.json in a useEffect hook within src/main.jsx, then stores the parsed data in React state via setStyleLibrary. This runtime consumption ensures the UI always reflects the current taxonomy without requiring a rebuild.

Which build scripts depend on this file?

scripts/generate-style-skill.mjs and scripts/generate-site-data.mjs both read data/style-library.json. The former validates the templates array and generates markdown references for the agent skill, while the latter produces static data for the documentation website.

What happens if the templates section is missing from the JSON?

The scripts/generate-style-skill.mjs script explicitly checks for the templates property and throws Error: style-library.json must include templates if it is absent. This validation prevents the generation of incomplete skill documentation and ensures the build pipeline fails fast on malformed data.

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