design-artifact

plannotator/effective-html

Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools. Use when creating or restyling any visual HTML deliverable and deciding its palette, type pairing, layout, theming, or overall register, or when the output must not look generically AI-generated.

Latest update at:

View on GitHub
npx skills add plannotator/effective-html --skill design-artifact
4,154Stars285ForksRepository last pushed

About this Skill

Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools. Use when creating or restyling any visual HTML deliverable and deciding its palette, type pairing, layout, theming, or overall register, or when the output must not look generically AI-generated.

Why we picked it

Summarized from the original plannotator/effective-html SKILL.md by Plannotator; the original upstream instructions were used.

What it helps with

  • Use this workflow when the task matches the original design-artifact instructions.

Before you use it

  • Read the original SKILL.md and referenced files in plannotator/effective-html.

Sources & references

Original sources are linked below. Practical starting points are editorial suggestions from SkillHey.