تشغيل أي مهارة في Manus بنقرة واحدة

web-render-screenshot

Generate ultra-high-resolution screenshots from HTML content using Playwright. Default 4x device scale factor produces crisp, pixel-perfect output ideal for UI mockups, dashboards, data visualizations, infographics, website previews, and any content requiring accurate text rendering. Use when: (1) user wants a website/webpage screenshot or mockup image, (2) content has text, numbers, tables, charts that must be legible, (3) user wants a UI design rendered as an image, (4) HTML Canvas or data-driven visuals need to be exported as PNG/JPEG. Triggers: "website screenshot", "网页截图", "网站首页图", "UI mockup image", "dashboard image", "数据可视化图片", "render HTML to image". Prefer this over AI image generation (stable-image-ultra) when the content has structured text, data, or UI elements. AI image generation cannot produce readable text.

تشغيل في Manus

نظرة عامة

أمر التثبيت

npx skills add https://github.com/wujiaming88/skills --skill web-render-screenshot

انسخ والصق هذا الأمر في Claude Code لتثبيت المهارة

المصدر

wujiaming88/skills

النجوم٠

التفرعات٠

آخر تحديث٢٤ أبريل ٢٠٢٦ في ٠٦:٣٦

مستكشف الملفات

2 ملفات

SKILL.md

readonly

name

web-render-screenshot

description

Web Render Screenshot

Generate ultra-high-resolution PNG/JPEG images from HTML content via Playwright headless Chromium.

When to Use

Scenario	Use This Skill	Use AI Image Gen Instead
Website UI / mockup	✅	❌
Dashboard / data viz	✅	❌
Text-heavy infographic	✅	❌
Weather/finance/news page	✅	❌
Artistic illustration	❌	✅
Photorealistic scene	❌	✅

Rule: If it has text that must be readable → use this skill.

Quick Start

Step 1: Create the HTML

Write a self-contained HTML file with inline CSS. Guidelines:

Use system fonts or Google Fonts CDN for Chinese support: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif
All styles inline (no external CSS files)
Design for the target viewport (default: 1920×1080)
Use emoji for icons when appropriate (universally supported)
Ensure overflow: hidden on body if single-viewport capture is desired

Step 2: Take the Screenshot

Use the bundled script:

python3 scripts/screenshot.py <input.html> [output.png] [options]

Or inline Python when the script cannot be invoked directly:

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(
        viewport={"width": 1920, "height": 1080},
        device_scale_factor=4,  # 4x ultra-high res (default)
    )
    page.goto("file:///path/to/input.html", wait_until="networkidle")
    page.wait_for_timeout(1000)
    page.screenshot(path="output.png", full_page=True)
    browser.close()

Step 3: Deliver

Output MEDIA:<path> for inline delivery, or use openclaw message send with --force-document for Telegram to avoid compression.

Default Parameters

Parameter	Default	Description
`device_scale_factor`	4	Ultra-high resolution (4x). Output = viewport × 4
`viewport.width`	1920	CSS pixel width
`viewport.height`	1080	CSS pixel height
`full_page`	true	Capture entire scrollable content
`wait`	1000ms	Wait after page load for rendering
`format`	png	Lossless output (use jpeg for smaller files)

Resolution Reference

Scale	Output for 1920×1080 viewport	File Size (typical)	Use Case
1x	1920×1080	~100KB	Draft / preview
2x	3840×2160	~1-2MB	Standard high-res
3x	5760×3240	~3-5MB	High-quality print
4x	7680×4320	5-8MB	Ultra-high (default)

Script Options

python3 scripts/screenshot.py <html> [output] [options]

Arguments:
  html              HTML file path or URL
  output            Output file path (default: <input-stem>.png)

Options:
  --scale N         Device scale factor (default: 4)
  --width N         Viewport width (default: 1920)
  --height N        Viewport height (default: 1080)
  --full-page       Capture full page (default)
  --no-full-page    Capture viewport only
  --wait N          Wait time in ms (default: 1000)
  --format FORMAT   png or jpeg (default: png)
  --quality N       JPEG quality 0-100 (default: 92)

HTML Design Tips

Glassmorphism: backdrop-filter: blur(20px); background: rgba(255,255,255,0.12);
Gradient backgrounds: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Card shadows: box-shadow: 0 8px 32px rgba(0,0,0,0.1);
Chinese fonts: Always include fallback chain for cross-platform rendering
Emoji icons: Use emoji for weather/status/category icons — they render at any scale
Grid layout: CSS Grid for complex dashboards; Flexbox for simpler layouts

File Size Management

If the output PNG is too large for delivery (e.g., >5MB for Telegram):

from PIL import Image
img = Image.open("output.png")
img.save("output.jpg", "JPEG", quality=92, optimize=True)  # Usually 5-10x smaller

Or use --format jpeg --quality 92 with the screenshot script.

المزيد من هذا المستودع

نفس المستودع

svg-architecture-diagram

wujiaming88/skills

Create professional, publication-quality technical architecture diagrams using pure SVG in HTML, then screenshot via Playwright. Produces crisp, pixel-perfect diagrams with precise connection lines, color-coded modules, and clear text at any resolution. Use when: (1) user asks for a system architecture diagram, (2) user wants a technical component diagram or flow chart, (3) user needs a data flow or pipeline visualization, (4) any diagram requiring accurate text labels and precise connecting lines. Triggers: "architecture diagram", "架构图", "技术架构", "system diagram", "component diagram", "flow diagram", "数据流图", "模块图", "draw architecture", "画架构图", "technical diagram". Prefer this over AI image generation for any diagram with text labels.

2026-04-250

stable-image-ultra

wujiaming88/skills

Generate the highest quality photorealistic images using Stability AI's Stable Image Ultra and Stable Diffusion 3.5 Large models via AWS Bedrock. The most powerful text-to-image models on Bedrock. Supports multiple AWS auth methods: environment variables, credentials file, named profiles, IAM instance roles, SSO, or direct access keys. Use when the user asks for ultra-high-quality, photorealistic, or premium image generation. Triggers: "ultra quality image", "photorealistic image", "best quality image", "stable image ultra", "SD3.5", "stability ai", "ultra画质", "超高清图片", "照片级图片", "最高画质", "generate image", "生成图片", "画一张", "做配图", "生图". This is the DEFAULT image generation skill for ALL agents. Always use this unless the user explicitly asks for text-heavy diagrams (use HTML Canvas instead). Requires AWS Bedrock access with Stability AI models enabled in us-west-2. NOT for: editing existing images, generating video, or HTML/CSS canvas rendering.

2026-04-240

karpathy-coding-guidelines

wujiaming88/skills

Behavioral guidelines to reduce common LLM coding pitfalls, derived from Andrej Karpathy's observations. Apply these four principles when writing, editing, or reviewing code — especially for non-trivial changes. Triggers on coding tasks, code reviews, refactoring, bug fixes, feature implementation, or when the user asks for careful/disciplined coding behavior.

2026-04-200

ppt-from-template

wujiaming88/skills

Generate presentations by extracting visual style from a reference template and recreating slides from scratch using PptxGenJS. Use when: user provides a PPT/PDF as style reference and wants new slides in that style; user says "按这个风格做PPT", "模仿这个模板", "参考这个PDF做演示", "make slides like this", "use this template", "做个PPT", "用这个模板做课件", "帮我做演示文稿"; user uploads a .pptx file as template. Supports: template directory auto-discovery, user upload, multi-template selection, image/video placeholders, large decks (30-100+ pages via batched generation). Requires: pptx skill (PptxGenJS), python-pptx, pdftoppm (poppler-utils). NOT for: editing existing PPT (use pptx skill), creating slides without style reference (use pptx skill directly).

2026-03-250

nova-canvas

wujiaming88/skills

Generate images using Amazon Nova Canvas via AWS Bedrock. Supports multiple AWS auth methods: environment variables, credentials file, named profiles, IAM instance roles, SSO, or direct access keys. Use when the user asks to generate, create, draw, or produce an image, picture, illustration, photo, artwork, poster, icon, banner, or any visual content. Triggers: "generate an image", "draw me", "create a picture", "make an illustration", "画一张", "帮我画", "生成图片", "做一张图", "AI绘图". Requires AWS Bedrock access with Nova Canvas model enabled. NOT for: editing existing images, generating video, or HTML/CSS canvas rendering.

2026-03-250

openclaw-diagnostics

wujiaming88/skills

OpenClaw 系统诊断和性能分析工具。分析 agent 推理耗时、Token 用量、工具调用统计、 Run 时间线、Gateway 重启历史。支持多种模式：批量分析（默认）、实时跟踪（-f）、摘要统计（-s）、高级诊断（--advanced）。支持多 Agent 过滤。使用场景：当用户询问 OpenClaw 运行状态、性能瓶颈、推理延迟、Token 消耗、工具执行统计、错误排查、agent 活动分析时触发。触发词：诊断、diagnostics、性能分析、推理耗时、token统计、运行状态、 agent分析、工具调用统计、Run详情、Gateway重启。指令触发：/diag — 直接执行诊断，支持参数透传。

2026-03-230

المصدر

wujiaming88

wujiaming88/skills

فتح مستودع GitHub عرض مستودعات المنشئ

أمر التثبيت

تنزيل

تشغيل في Manus

مفيد لـSOC

مطوّرو البرمجياتمهن الحاسوب والرياضيات15-1252L4

name

web-render-screenshot

description

Web Render Screenshot

Generate ultra-high-resolution PNG/JPEG images from HTML content via Playwright headless Chromium.

When to Use

Scenario	Use This Skill	Use AI Image Gen Instead
Website UI / mockup	✅	❌
Dashboard / data viz	✅	❌
Text-heavy infographic	✅	❌
Weather/finance/news page	✅	❌
Artistic illustration	❌	✅
Photorealistic scene	❌	✅

Rule: If it has text that must be readable → use this skill.

Quick Start

Step 1: Create the HTML

Write a self-contained HTML file with inline CSS. Guidelines:

Use system fonts or Google Fonts CDN for Chinese support: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif
All styles inline (no external CSS files)
Design for the target viewport (default: 1920×1080)
Use emoji for icons when appropriate (universally supported)
Ensure overflow: hidden on body if single-viewport capture is desired

Step 2: Take the Screenshot

Use the bundled script:

python3 scripts/screenshot.py <input.html> [output.png] [options]

Or inline Python when the script cannot be invoked directly:

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(
        viewport={"width": 1920, "height": 1080},
        device_scale_factor=4,  # 4x ultra-high res (default)
    )
    page.goto("file:///path/to/input.html", wait_until="networkidle")
    page.wait_for_timeout(1000)
    page.screenshot(path="output.png", full_page=True)
    browser.close()

Step 3: Deliver

Output MEDIA:<path> for inline delivery, or use openclaw message send with --force-document for Telegram to avoid compression.

Default Parameters

Parameter	Default	Description
`device_scale_factor`	4	Ultra-high resolution (4x). Output = viewport × 4
`viewport.width`	1920	CSS pixel width
`viewport.height`	1080	CSS pixel height
`full_page`	true	Capture entire scrollable content
`wait`	1000ms	Wait after page load for rendering
`format`	png	Lossless output (use jpeg for smaller files)

Resolution Reference

Scale	Output for 1920×1080 viewport	File Size (typical)	Use Case
1x	1920×1080	~100KB	Draft / preview
2x	3840×2160	~1-2MB	Standard high-res
3x	5760×3240	~3-5MB	High-quality print
4x	7680×4320	5-8MB	Ultra-high (default)

Script Options

python3 scripts/screenshot.py <html> [output] [options]

Arguments:
  html              HTML file path or URL
  output            Output file path (default: <input-stem>.png)

Options:
  --scale N         Device scale factor (default: 4)
  --width N         Viewport width (default: 1920)
  --height N        Viewport height (default: 1080)
  --full-page       Capture full page (default)
  --no-full-page    Capture viewport only
  --wait N          Wait time in ms (default: 1000)
  --format FORMAT   png or jpeg (default: png)
  --quality N       JPEG quality 0-100 (default: 92)

HTML Design Tips

Glassmorphism: backdrop-filter: blur(20px); background: rgba(255,255,255,0.12);
Gradient backgrounds: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Card shadows: box-shadow: 0 8px 32px rgba(0,0,0,0.1);
Chinese fonts: Always include fallback chain for cross-platform rendering
Emoji icons: Use emoji for weather/status/category icons — they render at any scale
Grid layout: CSS Grid for complex dashboards; Flexbox for simpler layouts

File Size Management

If the output PNG is too large for delivery (e.g., >5MB for Telegram):

from PIL import Image
img = Image.open("output.png")
img.save("output.jpg", "JPEG", quality=92, optimize=True)  # Usually 5-10x smaller

Or use --format jpeg --quality 92 with the screenshot script.