Agent Skill Workflow for Reading Style Templates in Awesome GPT Image 2

The agent skill workflow for reading style templates in Awesome GPT Image 2 operates through a declarative pipeline that loads JSON definitions from data/style-library.json, generates installable skill packages via scripts/generate-style-skill.mjs, and dynamically interpolates runtime variables to produce formatted image generation prompts.

The Awesome GPT Image 2 repository implements a modular approach to visual style management through its specialized agent skill workflow for reading style templates. This architecture externalizes style definitions from application logic, allowing AI agents to discover and apply reusable visual templates at runtime. By maintaining styles as discrete template files within an installable skill package named gpt-image-2-style-library, the system enables dynamic prompt construction without requiring code changes to the core image generation service.

Workflow Architecture and Data Flow

The agent skill workflow for reading style templates follows a five-step pipeline that bridges declarative configuration with runtime execution. This process transforms static JSON definitions into dynamically rendered prompts ready for the image generation API.

Step 1: Loading the Style Library

The workflow initiates in scripts/generate-style-skill.mjs by reading the master style definitions from data/style-library.json. This JSON file contains an array of style objects, each specifying a name, description, and template string.

According to the source implementation, the system uses Node.js filesystem operations to load this data:

const libPath = path.resolve('data', 'style-library.json');
const raw = readFileSync(libPath, 'utf-8');
const styles = JSON.parse(raw).styles;

The fs.readFileSync call retrieves the raw JSON, which JSON.parse converts into a JavaScript object array for processing.

Step 2: Generating the Skill Package

Once loaded, scripts/generate-style-skill.mjs iterates over the parsed styles to generate a distributable skill package under dist/. For each style, the script writes an individual template file using fs.writeFileSync.

The generation process also creates a skill.json manifest that registers the skill name (gpt-image-2-style-library) and catalogs the available template assets. This manifest enables the agent runtime to discover and enumerate available styles during the installation phase.

Step 3: Installing the Skill

The helper script scripts/install-style-skill.mjs executes the installation command to make templates discoverable by the agent runtime:

npx skills add freestylefly/awesome-gpt-image-2 --skill gpt-image-2-style-library --global --yes

This command copies the generated manifest and template files from the dist/ directory into the user's local skill directory at ~/.skills/gpt-image-2-style-library/. After installation, the agent can resolve style names to template file paths.

Step 4: Runtime Template Reading

When the agent receives a request specifying a style (e.g., style: "vivid-portrait"), the runtime locates the corresponding template file using fs.readFileSync. The template string resides in a .txt file within the installed skill folder, named according to the style identifier.

The system performs variable interpolation using simple ${variable} placeholders:

const tmplPath = path.resolve(process.env.HOME, '.skills', 'gpt-image-2-style-library', `${styleName}.txt`);
const tmpl = readFileSync(tmplPath, 'utf-8');
return tmpl.replace(/\${(\w+)}/g, (_, key) => variables[key] ?? '');

This rendering engine substitutes placeholders with request-specific values such as prompt, seed, width, and height.

Step 5: Submitting the Formatted Prompt

The fully interpolated prompt is transmitted to api/generate-image.js, which interfaces with the image generation service. This endpoint receives the constructed prompt along with dimension parameters, executes the generation request, and returns the resulting image URL or binary data to the caller.

Implementation Examples

The following code excerpts demonstrate the core logic implemented in the Awesome GPT Image 2 repository for managing style templates.

Loading and Generating Skills

This excerpt from scripts/generate-style-skill.mjs illustrates how the system reads the JSON library and writes individual template files:

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

// Load the JSON that holds all style definitions
const libPath = path.resolve('data', 'style-library.json');
const raw = readFileSync(libPath, 'utf-8');
const styles = JSON.parse(raw).styles;

// Create output folder for the generated skill
const outDir = path.resolve('dist', 'gpt-image-2-style-library');
mkdirSync(outDir, { recursive: true });

// Write each style template to its own file
for (const { name, template } of styles) {
  const fileName = `${name}.txt`;
  writeFileSync(path.join(outDir, fileName), template);
}

Runtime Template Rendering

When processing user requests, the agent uses logic similar to the following to render the final prompt:

import { readFileSync } from 'fs';
import path from 'path';

// Assume the user asked for the "vivid-portrait" style
function renderPrompt(styleName, variables) {
  const tmplPath = path.resolve(
    process.env.HOME, '.skills', 'gpt-image-2-style-library', `${styleName}.txt`
  );
  const tmpl = readFileSync(tmplPath, 'utf-8');

  // Very simple interpolation – replace ${key} with variables[key]
  return tmpl.replace(/\${(\w+)}/g, (_, key) => variables[key] ?? '');
}

// Example usage
const prompt = renderPrompt('vivid-portrait', {
  prompt: 'a futuristic city at sunset',
  width: 1024,
  height: 768,
});

Installing the Generated Skill

From the terminal, developers can install the skill after generation:

# After `node scripts/generate-style-skill.mjs` has produced the skill files:

node scripts/install-style-skill.mjs

# Or, using the provided CLI shortcut:

npx skills add freestylefly/awesome-gpt-image-2 --skill gpt-image-2-style-library --global --yes

Key Source Files

The agent skill workflow for reading style templates relies on the following critical files in the repository:

• data/style-library.json: Contains the master list of style definitions, including names, descriptions, and template strings with ${variable} placeholders.
• scripts/generate-style-skill.mjs: Reads the JSON library, processes style definitions, and generates individual template files and the skill.json manifest.
• scripts/install-style-skill.mjs: Automates the installation of the generated skill into the local agent environment using npx skills add.
• api/generate-image.js: Receives the rendered prompt from the agent and executes calls to the image generation service.
• docs/templates.md: Documents the template format, available placeholders, and usage guidelines for style authors.

Summary

The Awesome GPT Image 2 project implements a robust agent skill workflow for reading style templates that separates declarative style definitions from runtime execution:

• Declarative Storage: Styles are maintained as JSON objects in data/style-library.json with associated template strings.
• Build-Time Generation: The generate-style-skill.mjs script transforms JSON definitions into installable skill packages containing discrete .txt template files.
• Runtime Interpolation: The agent reads template files using fs.readFileSync and interpolates variables using ${variable} substitution.
• Modular Installation: Skills are installed via npx skills add, enabling dynamic discovery without core application modifications.
• API Integration: The final rendered prompt is submitted to api/generate-image.js for processing by the image generation backend.

Frequently Asked Questions

How does the agent locate style templates at runtime?

The agent resolves style templates by reading files from the installed skill directory located at ~/.skills/gpt-image-2-style-library/. When a request specifies a style name, the runtime constructs the file path by appending .txt to the style identifier and uses fs.readFileSync to load the template content. This approach allows the agent to access styles dynamically without bundling them into the core application binary.

What format does the style library use for template definitions?

The data/style-library.json file stores style definitions as a JSON array where each object contains name, description, and template properties. The template field holds a raw string containing ${variable} placeholders that the runtime replaces with request-specific values such as prompt text, dimensions, and random seeds. This declarative format enables non-developers to add or modify styles by editing a structured JSON file.

Can I install custom style templates without modifying the source code?

Yes, the workflow supports adding custom styles by extending the data/style-library.json file with new style objects and running node scripts/generate-style-skill.mjs followed by node scripts/install-style-skill.mjs. The installation script invokes npx skills add to register the updated skill package with the agent runtime. This design ensures that style additions require no changes to api/generate-image.js or other core application files.

How does variable interpolation work in the template system?

The template engine uses regular expression substitution to replace ${variableName} patterns with values from the request context. As implemented in the agent runtime, the system executes tmpl.replace(/\${(\w+)}/g, (_, key) => variables[key] ?? '') against the template string loaded from the skill directory. This simple interpolation strategy supports variables like prompt, width, height, and seed, allowing templates to be reused across different image generation requests.

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