About this skill

Problem

Static HTML often requires repeated source edits for copy, color, and spacing changes. This skill turns a page into a visual editor: text can be edited directly, while side panels control color, font size, and layout, then exports a deliverable HTML file.

Core capabilities

Data-driven color panel: scans DOM text nodes for computed color and aggregates the top text, background, and border colors by character-weighted usage.
Font and layout controls: a small set of sliders covers headings, body, auxiliary text, page width, padding, line height, and card spacing.
Style prompt: clicking a style card copies a prompt with description, palette, and constraints, suitable for an AI to rewrite CSS.
Clean export: removes editor UI, keeps data-editable, and restores var(--xxx) to hex for pasting into docs or email.

Boundaries

Best with pages that already use CSS variables. Inline-heavy, canvas, or iframe pages are only partially supported. Prefer running adapt.py; do not hand-write panels or modify assets/editor-core.js. Manually check text editability, font hierarchy, and visual results.

Screenshots

Use Cases

Review a static landing page and edit copy in place before exporting HTML to engineering.
Apply design feedback on color, font size, and spacing by extracting inline colors into variables.
Copy a style prompt with palette and constraints before asking an AI to rewrite CSS.
Export a clean HTML version for Notion or email while preserving readable colors.

Best For

Frontend engineers delivering landing pages: turn static HTML into an editable version and export clean HTML.
Technical writers producing product reviews: adjust font size, color, and layout without editing source code.
Independent developers refining design drafts: extract inline colors into CSS variables and ask an AI to refactor.
Engineers preparing CSS rewrite prompts for AI: copy style prompts with palette and constraints.

Related Skills

Java Spring Boot Backend Development

@user_c11ac35d/java-sy-ml

Guides Java Spring Boot backend development across REST APIs, data access, security, microservices, testing, deployment, and troubleshooting.

Development 2026.08.30 ↓ 886

Code Error Fixer: Five-Step Workflow

@user_01798a01/code-fix

A systematic code error fixing skill that follows a five-step workflow: Reproduce, Isolate, Understand, Fix, Verify, to help developers resolve code errors.

Development 2026.08.30 ↓ 3.5K

Lanhu Design Restoration

@user_59e19289/design-lanhu-skill

Restores Lanhu designs to target framework code using schema JSON, design tokens, and image assets.

Development 2026.08.30 ↓ 1.1K

Code Bug and Vulnerability Analyzer

@user_b130948c/code-bug-analyzer

Automatically detects engineering or competition code, analyzes bugs, vulnerabilities, algorithm complexity, and edge cases, then produces risk-level findings with before/after fixes.