HTML Skill Effectiveness

Generates self-contained single-file HTML artifacts — visually polished, zero dependencies, openable straight in a browser. Covers 13 layout patterns, a 5-dimension critique system and DevLoop iteration, under 7 enforceable craft rules (anti-ai-slop, color, typography, hierarchy, animation, accessibility, laws-of-ux) plus state-coverage and form-validation contracts. Use when the user asks for a report, comparison, dashboard, slide deck or interactive explainer delivered as one HTML file. NOT for auth, payment, backend logic or real-time database scenarios — refuse and inform the user in those

5 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add YardonYan/html-skill-effectiveness --skill html-skill-effectiveness

Manual install

git clone --depth 1 https://github.com/YardonYan/html-skill-effectiveness.git /tmp/html-skill-effectiveness
mkdir -p ~/.claude/skills
cp -r /tmp/html-skill-effectiveness/. ~/.claude/skills/html-skill-effectiveness

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# HTML Effectiveness v3.0

## Overview

This skill guides the generation of single-file `.html` artifacts that are self-contained (no external dependencies), visually polished, and designed for human consumption. Core philosophy: **trade documents people skim for documents people actually read**.

Every artifact is one HTML file with inline CSS and JavaScript. No build step. No dependencies. Open directly in a browser.

**Evolution Note**: Combines the structured pattern catalog from [html-effectiveness](https://github.com/ThariqS/html-effectiveness), bold aesthetic philosophy from [frontend-design](https://github.com/anthropics/skills/tree/main/skills/frontend-design) by Anthropic, and engineering rigor from [open-design](https://github.com/opendesign).

**v3.0 Craft Discipline**: Seven enforceable craft rules — anti-ai-slop, color, typography, typography-hierarchy, animation-discipline, accessibility-baseline, laws-of-ux — plus state-coverage and form-validation contracts. These are checkable constraints, not style preferences. Every artifact must pass all P0 rules before emitting.

**Scope**: Pure front-end presentation artifacts only. Not suitable for auth/payment/backend logic/real-time database scenarios — refuse and inform user when such requirements arise.

---

## Workflow

### Step 0 — Pre-flight

1. **Read this SKILL.md end-to-end** — understand the design system, pattern catalog, and hard rules.

Read the full skill on GitHub

Details

Skill name: html-skill-effectiveness
Repository: YardonYan/html-skill-effectiveness
License: Apache-2.0
Repo updated: 8 October 2026

FAQ

What does the HTML Skill Effectiveness skill do?

How do I install the HTML Skill Effectiveness skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add YardonYan/html-skill-effectiveness --skill html-skill-effectiveness. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is HTML Skill Effectiveness popular?

It lives in YardonYan/html-skill-effectiveness, which has 5 GitHub stars and 0 forks.

Related skills

Lean Canvas Coach

xntj-ai/lean-canvas-coach

交互式教练：用教练式提问带一位创始人/老板走完一张「精益画布」(Lean Canvas 9 格)，然后揪出那个最要命的「关键假设」，再帮他设计一个「最低成本验证」去先验它。不是做一次就完——支持每月/每周把新情况丢进来「重跑」，看关键假设变没变。三模式：interview(我访谈你→画布→关键假设→最低成本验证)、rerun(拿旧画布+新情况→重跑更新)、script(我出提问脚本你自己填)。是**会做功课的教练**——每一格你答完，我都补一手(调研核实/起草候选/先立后破地质疑/点破框架坑)，跟你共创，不把画布的活儿全压给你；不是只会问的问卷机，也不是空表让你自己填。 Use when: 用户要做商业模式分析/精益画布/lean canvas、说"帮我理一理这门生意""我这想法到底成不成""最大的风险在哪""帮我做个商业画布""访谈我出画布"、或已有画布要重跑更新。 NOT for: 写商业计划书/BP 全文、纯财务建模、个人IP定位(用 ip-canvas-coach)、写单篇文案(用 voice-dna / luo-restyle)。

Frontend & Design

Frontend Feature Architecture

Arthurblaya/frontend-feature-architecture

Organize frontend code by feature with explicit ownership and one-way dependencies. Use when adding a frontend feature, deciding file placement, reviewing architecture, or migrating a frontend folder structure across web, mobile, and desktop projects.

Frontend & Design

Logo Intro

CJ10110425/logo-intro

Build an animated WebGL logo intro from a brand's SVG logo. The mark arrives from a lens-warped, colour-fringed close-up, the wordmark pulls out of it, a gradient bloom grows, a lock-in beat (a badge pops, two parts snap together, inner layers rise, or the mark spins) sends out a ring, and a shimmer sweeps the logo. Outputs a single HTML file, an embeddable site splash, or an MP4/WebM video. Use when someone asks for a logo animation, brand intro, opening/splash animation for a website, an intro video like ElevenLabs', or to animate a specific company's logo.

Frontend & Design

Figma to Roblox UI

xtrair/figma-to-roblox-ui

Import Figma frames and designs into Roblox Studio GUI (ScreenGui/Frame/ImageLabel): Scale-only layout, centered AnchorPoint, UIStroke ScaledSize, UICorner in Scale, detailed art and custom shapes exported as images. Use for any Figma to Roblox UI transfer.

Frontend & Design

Logo to Stickers

huyanxius/logo-to-stickers

Turn a logo, brand mark, or existing IP into a consistent set of playful die-cut paper stickers. Use for brand character extensions, logo personification, website sticker assets, or sticker variations that need actual transparent images; not for redesigning the logo itself.

Frontend & Design

Deslopify

AntonioSpagnol/UI-Deslopify-Skill

Audits and refactors vibe-coded UIs by replacing each slop element with modern 21st.dev components or equivalents with real visual character — never removes without replacing. Runs a mandatory grill-me style interview (one question at a time, with recommendations) before touching files, including brand identity and design references. Use when the user asks to deslopify, refatorar UI, limpar design, refactor UI, clean design, replace components, or when the code has glassmorphism, purple/blue gradients, decorative orbs, spinners, or empty corporate copy.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.