How to Install the GPT-Image2 Style Library Agent Skill: Complete Setup Guide

Run node scripts/install-style-skill.mjs after installing dependencies to build the Vite-based ESM bundle, deploy it to public/skills/, and auto-register the skill in src/main.jsx.

The GPT-Image2 style library agent skill is a modular extension for the freestylefly/awesome-gpt-image-2 repository that injects curated image generation styles into the core application. According to the source code, this skill is packaged as a standalone ESM bundle built by Vite and loaded dynamically at runtime. Installation requires executing a Node.js helper script that compiles the assets and patches the application entry point to import the style definitions from data/style-library.json.

Architecture Overview

Understanding the component structure ensures you can troubleshoot or customize the integration:

Component	Location	Purpose
CLI Installer	scripts/install-style-skill.mjs	Orchestrates the build, file copy, and registration steps
Style Manifest	data/style-library.json	JSON catalog containing style IDs, prompt templates, and preview metadata
Vite Configuration	vite.config.js	Declares the ESM build target for the skill bundle (style-library.js)
API Client	src/apimartClient.js	Accepts the styleId parameter to route requests to the backend generation service
Example UI	src/image25/App.jsx	Demonstrates rendering style options in the gallery interface

When active, the skill exports a default registration function that the main application calls to inject new style options into the UI state.

Step-by-Step Installation

Follow these commands to activate the GPT-Image2 style library agent skill in your local environment.

1. Clone and Prepare the Repository

git clone https://github.com/freestylefly/awesome-gpt-image-2.git
cd awesome-gpt-image-2

2. Install Node.js Dependencies

Use the lockfile to ensure reproducible builds of the Vite toolchain:

npm ci

3. Execute the Installation Script

The installer handles compilation and registration automatically:

node scripts/install-style-skill.mjs

What the script does internally:

• Executes vite build --mode style using the configuration in vite.config.js
• Moves the generated style-library.js bundle to public/skills/style-library.js
• Patches src/main.jsx to include the dynamic skill import

4. Start the Development Server

Verify the integration with hot-reloading enabled:

npm run dev

Open http://localhost:5173 and confirm that the style selector populates with entries defined in data/style-library.json.

Generating a Standalone Skill Bundle

For deployments where you cannot run the installation script on the host, generate a distributable module:

node scripts/generate-style-skill.mjs

This outputs a self-contained style-library.js file that any GPT-Image2 instance can load via a standard module script tag:

<script type="module" src="/path/to/style-library.js"></script>

The bundle follows the same registration contract as the CLI-installed version, exporting a default function that accepts the core application instance.

Code Implementation Examples

Dynamically Loading the Skill at Runtime

If you need manual control over skill initialization, import the module directly and invoke the registry:

import { registerSkill } from './utils/skillRegistry.js';
import styleSkill from '/public/skills/style-library.js';

// The skill exports a default function that receives the app instance
registerSkill(styleSkill);

Applying a Style to an API Request

The src/apimartClient.js client accepts a styleId field to apply library templates to generation requests:

import { generateImage } from './apimartClient.js';
import styles from '../data/style-library.json';

async function createStyledImage(basePrompt) {
  const style = styles.find(s => s.id === 'retro-vaporwave');
  const payload = {
    prompt: basePrompt,
    styleId: style.id,          // Injected by the skill
    ...style.defaultParams,
  };
  return await generateImage(payload);
}

Summary

• The GPT-Image2 style library agent skill is installed via scripts/install-style-skill.mjs, which builds an ESM bundle and registers it in src/main.jsx.
• Style definitions reside in data/style-library.json and are exposed to the UI through the skill's registration function.
• The src/apimartClient.js module extends generation requests with a styleId parameter to utilize the library.
• For portable deployments, use scripts/generate-style-skill.mjs to create a standalone bundle loadable via <script type="module">.

Frequently Asked Questions

What file does the installation script modify in my project?

The installer appends an import statement to src/main.jsx to ensure the skill loads when the application initializes. It also copies the compiled style-library.js into public/skills/ so the web server can serve it as a static asset.

Can I use the style library without running the install script?

Yes. Run node scripts/generate-style-skill.mjs to produce a standalone style-library.js bundle. You can then load this file in any GPT-Image2 deployment using a dynamic import() statement or a <script type="module"> tag, bypassing the need to modify src/main.jsx.

Where are the actual style definitions stored?

All style metadata—including IDs, prompt templates, and preview images—is stored in data/style-library.json. The skill reads this file at runtime to populate the UI, and src/apimartClient.js references these IDs when constructing backend requests.

How does the skill communicate with the image generation backend?

The skill itself does not communicate directly with the backend. Instead, it enriches the application state with style options. When a user selects a style, the src/apimartClient.js method includes the selected styleId in the request payload, allowing the backend service to apply the corresponding prompt template and parameters.

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