effective-html

Name: effective-html
Rating: 88 (1 reviews)
Author: plannotator

plannotator/effective-html

Design principles and creative direction for building non-generic HTML artifacts, ensuring high aesthetic quality and thoughtful design choices.

1.6k 127MITUpdated 2026-08-03

Great

View on GitHub Open source file

Overview

This skill acts as a boutique creative director guide for AI agents, pushing them beyond generic AI-generated aesthetics when building HTML deliverables such as landing pages, reports, demos, and dashboards. It enforces strict typography rules, robust color token systems, dual-theme support, and conscious layout decisions, steering clear of clichés and producing polished, highly customized web artifacts.

Capabilities

▸Design system planning and token architecture
▸Custom typography pairing and inline font embedding
▸Dual-theme light/dark mode implementation using CSS custom properties
▸Layout structuring with CSS grid and flexbox
▸Avoiding common AI design clichés and stylistic tropes
▸Optional publishing via the tot CLI tool with user consent

Best for

Creating bespoke landing pages, decks, and reports in HTML, Designing interactive prototypes and tools with custom visual identities, Restyling existing HTML mockups to avoid typical AI design tropes

Works with

Claude CodeCursorGitHub CopilotChatGPTGemini CLICodexOpenCode

Evoa Score breakdown= Σ (score × weight)

Task usefulness20%100 → +20.0

実タスクにどれだけ役立つか（機能の豊富さ・用途の明確さ）。 — AIによるcapabilities/use-cases解析

Code quality15%95 → +14.3

実装・指示の品質。 — AIによるSKILL.md/README解析

Maintenance15%100 → +15.0

リポジトリがどれだけ活発に保守されているか。 — GitHub 最終push日時の新しさ

Documentation12%29 → +3.5

ドキュメントの充実度・分かりやすさ。 — README/独自要約の情報量

Security15%100 → +15.0

危険・不審な挙動が無いか。 — AIによるセキュリティレビュー

Originality10%90 → +9.0

ありふれたラッパーではない独自性。 — AIによる独自性判定

Popularity8%82 → +6.6

コミュニティの採用度。 — GitHub Stars/Forks（対数スケール）

Compatibility5%100 → +5.0

対応AIエージェントの広さ。 — AIによる対応エージェント判定

Weighted total88.3 / 100

ライセンス不明/制限あり（Red）のSkillは総合スコアに0.85倍の補正を適用します。ランキングはこのScoreのみで決まり、広告で変わりません。算出方法の詳細 →

Security considerations

The skill includes an optional publishing feature via the 'tot' CLI tool, which requires explicit user consent before publishing any HTML file to a public URL.