← Back to Skills Marketplace
wangjipeng977

Convert Any Screenshot

by 王继鹏 · GitHub ↗ · v1.0.1 · MIT-0
cross-platform ⚠ suspicious
52
Downloads
1
Stars
0
Active Installs
1
Versions
Install in OpenClaw
/install convert-any-screenshot
Description
Use when (1) Convert any UI screenshot into a clean React or HTML/CSS implementation prompt.
README (SKILL.md)

Core Position

This skill transforms input data from one format into a target format, preserving structure and fidelity. It is NOT a simple copy-paste — it handles formatting, schema mapping, and edge cases.

Key responsibilities:

  • Parse the input format (JSON/CSV/code/etc.) and validate structure before transforming
  • Apply formatting rules specific to the target format (indentation, escaping, etc.)
  • Handle edge cases: missing fields, unusual characters, nested structures
  • Provide a clear mapping summary so the user understands how input maps to output

Modes

/convert-any-screenshot --pretty

Formatted output. Applies proper indentation, spacing, and style conventions.

/convert-any-screenshot --strict

Strict mode. Fails on any deviation from expected structure rather than guessing.

Execution Steps

  1. Parse input — Read and parse the input; detect format (JSON/CSV/XML/code/etc.)
    • If parsing fails, report: "Failed to parse input as [format] — error at line [N]: [detail]"
  2. Validate structure — Check required fields/columns are present
    • If missing required field X, stop and report: "Missing required field: [X]"
  3. Transform — Convert input to target format, applying format-specific rules
    • Preserve all data — do not silently drop fields
    • Apply proper escaping for special characters (quotes, newlines, etc.)
  4. Validate output — Run the target format parser on the result to confirm it's valid
    • If output is invalid, revert to previous version and report what went wrong
  5. Deliver — Return the converted output with a brief mapping summary

Mandatory Rules

Do not

  • Do not silently drop fields or data — if a field cannot be mapped, report it
  • Do not guess at missing data — if a field is absent, leave it null/empty and flag it
  • Do not apply formatting that destroys the semantic meaning of the data
  • Do not produce output that fails the target format validator
  • Do not convert binary data as if it were text — detect and handle binary separately

Do

  • Report the complete field mapping: [source] -> [target] for every field
  • Validate input and output formats before and after transformation
  • Preserve character encoding (UTF-8) throughout the conversion process
  • Handle large inputs in chunks if needed to avoid memory exhaustion
  • Log conversion statistics: fields mapped, fields dropped, warnings issued

Quality Bar

Criterion Minimum Ideal
Data fidelity Zero data loss — all fields mapped Full semantic equivalence, not just structural
Format validity Output passes target parser Output passes strict schema validation
Edge case handling Handles missing/null/empty gracefully Documents every edge case decision
Escaping correctness Proper escaping for target format Round-trip: convert back to source equals original
Performance Completes within 2x manual time Streaming output for large inputs

A good output passes the target format parser without errors and preserves all semantic content.

Good vs. Bad Examples

Scenario Bad Good
Missing field Omits field from output silently Reports "Field [X] absent — output null, flagged as warning"
Special characters Only escapes visible chars Escapes all special chars per target format spec
Large input Loads entire file into memory Streams in chunks, reports progress at 25/50/75%
Output validation Skips validation Runs target parser on output, confirms valid before returning
Format error Returns raw output with error text appended Returns nothing, reports "Output invalid: [parser error] at [location]"
Usage Guidance
Review carefully before installing. The files do not show exfiltration, destructive actions, or persistence, but the skill should be revised so its instructions, README, credential claims, and modes all match the screenshot-to-code purpose and clearly state whether any local files can be modified.
Capability Tags
requires-sensitive-credentials
Capability Assessment
Purpose & Capability
Manifest and README advertise converting UI screenshots into React or HTML/CSS prompts, while SKILL.md primarily instructs a generic JSON/CSV/XML/code transformation workflow; this is a concrete purpose mismatch that could route unrelated or sensitive data into the skill.
Instruction Scope
The activation and execution instructions are broad and contradictory, covering generic parsing, schema mapping, binary detection, chunking, and conversion statistics rather than the screenshot-to-code use case.
Install Mechanism
Installation is a normal ClawHub/manual skill copy flow, and the included setup script only prints usage; however README examples mention a write mode without defining overwrite behavior.
Credentials
The included helper script uses only Python stdlib, reads stdin or a named file, and prints a generated UI implementation prompt; static review found no network calls, package installs, destructive commands, persistence setup, or credential-store access.
Persistence & Privilege
No background worker, daemon, autostart, privilege escalation, or persistent local indexing was found, but README/metadata claim API-key or sensitive-credential relevance without a clear need in the artifacts.
How to Use
  1. Make sure OpenClaw is installed (local or Docker)
  2. Run the install command in chat: /install convert-any-screenshot
  3. After installation, invoke the skill by name or use /convert-any-screenshot
  4. Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.1
Initial release
Metadata
Slug convert-any-screenshot
Version 1.0.1
License MIT-0
All-time Installs 0
Active Installs 0
Total Versions 1
Frequently Asked Questions

What is Convert Any Screenshot?

Use when (1) Convert any UI screenshot into a clean React or HTML/CSS implementation prompt. It is an AI Agent Skill for Claude Code / OpenClaw, with 52 downloads so far.

How do I install Convert Any Screenshot?

Run "/install convert-any-screenshot" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is Convert Any Screenshot free?

Yes, Convert Any Screenshot is completely free, licensed under MIT-0. You can download, install and use it at no cost.

Which platforms does Convert Any Screenshot support?

Convert Any Screenshot is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created Convert Any Screenshot?

It is built and maintained by 王继鹏 (@wangjipeng977); the current version is v1.0.1.

💬 Comments