AwesomeWebpageMetaSkill

Builds a packaged local multimedia webpage project with researched content and generated images, audio, and video.

6.8k|540|Updated May 6, 2026
One-click install
npx skills add https://github.com/opensquilla/opensquilla --skill awesomewebpagemetaskill
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: AwesomeWebpageMetaSkill
Source: https://github.com/opensquilla/opensquilla/tree/main/src/opensquilla/skills/bundled/AwesomeWebpageMetaSkill
Command: npx skills add https://github.com/opensquilla/opensquilla --skill awesomewebpagemetaskill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Creating a rich multimedia webpage normally requires coordinating research, copywriting, image sourcing, audio and video generation, HTML/CSS/JS authoring, and asset validation by hand. This Skill orchestrates that entire pipeline from a single topic request into a packaged local project.

Core Features & Use Cases

  • End-to-End Pipeline: Frames requirements, confirms media preferences interactively, researches the topic, plans a page outline, acquires or generates media, writes index.html/style.css/script.js, and validates the result.
  • Search-First Media Strategy: Searches the web for reusable images first and falls back to AIGC generation via OpenRouter models, with explicit user approval before any paid external generation call.
  • Deterministic Validation and Repair: Bundled scripts normalize media slots, collect generated assets, bind them into the page, and report missing or degraded modalities instead of silently hiding failures.
  • Use Case: Ask for a multimedia webpage about ocean plastic pollution for students in Chinese with a documentary style, and receive a packaged project folder with images, narration audio, an intro video, and usage guidance.

Quick Start

Create a multimedia webpage project about renewable energy for high school students in English with a minimal visual style, including images, audio narration, and a short intro video.

Frequently Asked Questions about AwesomeWebpageMetaSkill

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

FAQPage Schema
How do I generate a multimedia webpage with images, audio, and video?

Provide a topic, target audience, output language, visual style, and media preferences. The skill researches the topic, plans an outline, searches or generates media assets, writes index.html, style.css, and script.js, then packages and validates the project.

What models generate the images, audio, and video for the webpage?

Generation runs through OpenRouter models set in the awesome_webpage config: page_generation, image_generation, audio_generation, and video_generation keys. Defaults include moonshotai/kimi-k2.6 for pages and google/gemini-3-pro-image-preview for images.

Does the skill charge money for media generation?

Paid external generation only runs after explicit user approval through the media_provider_approval step. Ambiguous replies, empty responses, or added edit notes block the paid call, and image search is tried first before any AIGC fallback.

Can I build a webpage with only text and images, no audio or video?

Yes. Interactive confirmation steps ask separately for images, audio, and video, and answering NO to a modality excludes it from the outline, media slots, and validation requirements.

What happens if image search finds no usable assets?

When search returns empty, off-topic, or unclear-license results and aigc_fallback_when_search_empty is enabled, the pipeline switches to image generation. If generation is unavailable, a visible replacement slot is inserted and reported as degraded.

Why does webpage validation report MEDIA_BIND_FAILED?

Validation fails when a requested modality has no ready asset, an asset file is missing on disk, or a generated asset is not referenced by the HTML, CSS, or JS. The report lists each failure with its kind, reason, and src path.