All skills
plannotator avatar

/html

@e1e71db
by plannotatorplannotator/effective-html3.5k stars
238

Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject. Use when HTML is the deliverable for a report, explainer, landing page, presentation, tool, mixed artifact, or broad request. This is the collection's only implicit router. Route clear wireframe, prototype, mockup, plan, or diagram requests to the matching direct-invocation specialist when available. Do not use for ordinary application implementation when a standalone HTML file is not the deliverable.

Recorded with Claude Code, Opus 5.5

PromptMake a 7-slide pitch deck for Brothwheel, a neighborhood soup co-op that sells soup in returnable jars, where arrow keys or clicks advance the slides. Save it as deck.html, one file with all CSS and JavaScript inline.

Desktop screenshot of the page the Agent built for: Make a 7-slide pitch deck for Brothwheel, a neighborhood soup co-op that sells soup in returnable jars, where arrow keys
Use this Skill: https://skilld.dev/gh/plannotator/effective-html/html

Nothing lands on disk. Nothing to clean up.

Fork this Skill

Edit a local copy. It keeps the author and licence.

referencesdocuments-and-presentations.md

≈487 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Documents and presentations

Read this for reports, briefs, plans, explainers, comparisons, and slide-like artifacts.

Documents

Design around the reader's decision or understanding, not around a generic page outline. The opening should orient quickly: what this is, why it matters, and what deserves attention. Follow with evidence, structure, and detail in the order the reader needs them.

  • Keep prose measures readable and let tables, timelines, code, and diagrams use wider regions.
  • Use headings, labels, numbering, dividers, and callouts only when they express genuine hierarchy or sequence.
  • For plans, stay close to the user's language and ambition. Clarify ownership, order, dependencies, risks, and completion conditions without inventing a larger program.
  • For reports, distinguish observation, interpretation, recommendation, and uncertainty.
  • For comparisons, keep like-for-like attributes aligned so the eye can compare without remembering.
  • For print-oriented work, add sensible print styles and avoid interactions that hide essential content.

Most operational documents want a workmanlike register. They still deserve intentional typography, spacing, and color, but rarely need a giant hero or ornamental dashboard furniture.

Presentations

A presentation is paced, not merely paginated. Give each screen one job and one dominant idea.

  • Establish a visual rhythm across slides, then break it only for emphasis.
  • Keep essential information visible without hover.
  • If the file behaves like a deck, support keyboard navigation, clear progress, and direct slide links when practical.
  • Use builds and transitions to control explanation order, not to decorate every change.
  • Ensure a useful narrow-screen or scrolling fallback when the fixed stage cannot fit.

When a request blends a document and a deck, prefer the reading mode the audience will actually use rather than building two half-working experiences.

Source: SKILL.md on GitHub

No rule matched.

skilld matched fixed text patterns in SKILL.md and file names. Patterns miss obfuscated code.

skilld run checks every file with the same patterns. It asks for approval before it loads a Skill with a behavior marked Needs approval.

No alerts2mo3 checks · Risk SAFE
  • Gen Agent Trust Hub2mo

    The skill is a design assistant for generating standalone HTML artifacts. While it adheres to safety best practices by discouraging unauthorized network connections, it remains susceptible to indirect prompt injection. This occurs because the skill is instructed to ingest project-level documentation (such as AGENTS.md or design-system files) to inform its design choices without using boundary markers or sanitization to differentiate between design data and potentially malicious embedded instructions.

  • Socket2mo

    No alerts

  • Snyk2mo

    Risk: LOW · No issues

Signed by skilld at e1e71db. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 3 weeks ago.

Activeupdated 2 months ago

README badge

README badge for plannotator/effective-html/html