skills.rest
waiyanphyo999
waiyanphyo999COMMUNITY
Explore all skills by this author →
GitHub

webdev-image-generation

Generate and edit AI images in web and mobile projects via a preconfigured ImageService helper.

1|Updated Jul 17, 2026
Search Tags:#typescript#image generation#trpc#fullstack#model selection#ai image editing#expo
One-click install
npx skills add https://github.com/waiyanphyo999/telegram-bot-deploy --skill webdev-image-generation-waiyanphyo999
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webdev-image-generation
Source: https://github.com/waiyanphyo999/telegram-bot-deploy/tree/main/skills/webdev-image-generation
Command: npx skills add https://github.com/waiyanphyo999/telegram-bot-deploy --skill webdev-image-generation-waiyanphyo999

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It removes the need to manually configure an image generation API in Manus webdev fullstack (web-db-user) and mobile-app (Expo) projects by providing a preconfigured helper that connects to the internal ImageService. ## Core Features & Use Cases - AI Image Generation: Call generateImage() with a text prompt to create images and receive a hosted URL. - Image Editing: Pass originalImages with a URL and MIME type to edit existing images with a prompt. - Model Listing & Selection: Use listImageModels() to discover available models and override the default GPT Image 2 model and quality settings. - Use Case: Inside a tRPC procedure in a fullstack web app, generate a hero banner image from a text prompt and store the returned URL in your database. ## Quick Start Import generateImage from the server imageGeneration module and call it with a prompt inside a server-side tRPC procedure to get an image URL.

Frequently Asked Questions about webdev-image-generation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate an AI image in a Manus webdev project?▼

Import generateImage from ./server/_core/imageGeneration.ts and call it with a prompt object. It returns an object containing the generated image URL, with no manual API setup required.

How do I edit an existing image with AI?▼

Pass an originalImages array to generateImage containing the source image URL and its mimeType, along with a prompt describing the edit. The helper returns the edited image URL.

Which image generation model is used by default?▼

The default model is GPT Image 2 (MODEL_GPT_IMAGE_2) at medium quality. You can override it by passing model and quality parameters, or call listImageModels to see all available options.

Can I call generateImage from client-side code?▼

No, you should always call it from server-side code such as tRPC procedures. Calling it from the client would expose API keys and is not supported by the helper design.

Why does image generation seem slow or fail sometimes?▼

Image generation typically takes 5-20 seconds, so implement loading states in your UI. Generation can also fail, so wrap calls in proper error handling to manage failures gracefully.

Related Skills

Explore More Software Engineering Skills→
Military-Veteran-Team-LPT-RealtyMilitary-Veteran-Team-LPT-Realty

webdev-image-generation

Generates and edits images in Manus webdev and Expo projects via the internal ImageService helper.

Official
Basic
williamsforealwilliamsforeal
1

s3-uploader

Upload images or videos to S3/R2 and return canonical URLs for Airtable attachment fields.

Community
Basic
OpenCovenOpenCoven
20

empty-loading-error-states

Enforce loading, empty, partial, and error states in React or Vue components.

Official
Advanced
MacPhobosMacPhobos

digitalocean-containers-images

Interoperability with React Native and Flutter: The Ultimate Guide to Cross-Platform Development is a comprehensive online courseASTROLOGY AND MORE!

Community
Intermediate