Skip to content
cccskills
FreePublished on GitHub

social-card-screenshot-explainer

截图 / UI / 工具流解释类社交卡 — 必须给截图一个"舞台"：可读裁切 + 标注层级 + 出现的理由。骨架：封面 + 大截图 + 3 个标注 / 截图裁切 + 放大细节 + 结论 / before-after 截图对 / 产品 UI 框 + 编号 callout / 3 步工作流。

截图要大到手机能看清，箭头节制，加一个 takeaway 标题。触发："做个工具教程卡 / AI 工作流卡 / UI 解释卡 / 截图说明卡 / before-after 卡"。NOT 原图直接丢上画布，NOT 装饰性无关截图。

The English summary is being prepared. Showing the original description.

WyvernCW/Monich

Run score Not tested

See how to install

Files included (2)

  • SKILL.md2.4 KB
  • pattern.html4.8 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Social Card Screenshot Explainer

Use for tool walkthroughs, product UI explanations, app feature breakdowns, AI workflow screenshots, or before/after UI captures.

Core Rule

Never drop a raw screenshot onto the canvas and call it designed. A screenshot needs a stage, readable crop, annotation hierarchy, and a reason to be there.

Structure Options

  • cover + large screenshot + 3 annotations
  • screenshot crop + zoomed detail + conclusion
  • before / after screenshot pair
  • product UI frame + numbered callouts
  • 3-step workflow with one screenshot per step

Must Do

  • Keep the screenshot large enough to inspect on phone.
  • Crop irrelevant browser chrome unless it helps context.
  • Use device/browser frames only when they clarify the source.
  • Use arrows/callouts sparingly; labels must not cover key UI.
  • Add one takeaway title so the card is not just a screenshot.

Avoid

  • Tiny unreadable UI captures.
  • Too many callout bubbles.
  • Fake product screenshots.
  • Decorative screenshots unrelated to the point.

Related Pattern

Use social-card-swiss as the closest pattern if a visual reference is needed.

Pattern Source Rule

Read this SKILL.md first. Do not read pattern.html by default.

Read pattern.html only when you need concrete layout rhythm, spatial relationships, or interaction/annotation behavior that this markdown cannot fully specify. When read, extract patterns only; do not copy DOM, CSS classes, exact spacing, placeholder copy, or styling wholesale.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

agentic

Free

Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.

The English summary is being prepared. Showing the original description.

WyvernCW/Monich3Updated Jun 20, 2026

ant

Free

Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.

The English summary is being prepared. Showing the original description.

WyvernCW/Monich3Updated Jun 20, 2026

application

Free

App dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows.

The English summary is being prepared. Showing the original description.

WyvernCW/Monich3Updated Jun 20, 2026

artistic

Free

High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.

The English summary is being prepared. Showing the original description.

WyvernCW/Monich3Updated Jun 20, 2026

ascii-cosmos

Free

Generate a single-file product landing page with a layered ASCII cosmos hero (rotating ASCII planet, drifting irregular asteroids, comet trails, nebula gas clouds — each in its own harmonious color) plus full marketing sections (about / features grid / showcase / spec / pricing / CTA / footer). Takes a natural-language description of one product (any kind — a note app, a coffee subscription, a CLI tool, an indie hardware, a hosting service…) and outputs ONE working .html file with deep-space dark or warm-letterpress theme. Runs in BOTH Claude Code (writes to ~/Desktop) and GLM / online chat (outputs HTML inline). Trigger phrases: "做个宇宙风产品落地页", "生成 ASCII 产品官网", "ascii-cosmos-gen ...", "做个独立软件 / 独立硬件落地页", or when user drags this skill folder into chat asking for an atmospheric product landing page.

The English summary is being prepared. Showing the original description.

WyvernCW/Monich3Updated Jun 20, 2026

atelier-zero

Free

Magazine-grade, collage-driven editorial system: warm paper canvas, surreal plaster-and-architecture imagery, oversized display type, hairline rules, and Roman-numeral section markers.

The English summary is being prepared. Showing the original description.

WyvernCW/Monich3Updated Jun 20, 2026

See all skills by WyvernCW

Report a problem with this skill