<Devsly/>
NotebookLM Watermark Remover
Remove the NotebookLM watermark from PDF slide exports — free, unlimited, and 100% in your browser.
View
NotebookLM Video Watermark Remover
Remove the NotebookLM watermark from every frame of your MP4 and auto-trim the end card — free and unlimited.
View
Gemini Watermark Remover
Remove the Gemini (Veo) sparkle watermark from every frame of your AI-generated MP4 — free and unlimited.
View
MCP https://devsly.io/mcp MCP Tools Best Skills API Docs
Devsly

Keyboard Shortcuts

Navigation

Quick Search
⌘ / Ctrl + K
Toggle Dark Mode
⌘ / Ctrl + D
Close Dialogs
Esc

Tool Actions

Execute / Process
⌘ / Ctrl + Enter
Clear Input
⌘ / Ctrl + Shift + C
Copy Output
⌘ / Ctrl + Shift + X

Editor

Select All
⌘ / Ctrl + A
Undo
⌘ / Ctrl + Z
Redo
⌘ / Ctrl + Shift + Z

Updated 1d ago

by plannotator

effective-html

Agent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.

  • Active — Updated in the last 14 days
Works with
  • Claude
  • Codex
View on GitHub (opens in a new tab)

3.7k GitHub stars (3,669)

+375 in 20 days

Stars gained per day · daily snapshots since Sep 26
Stars gained per day, Sep 26 to Oct 16: +375 in total; the busiest day was Sep 30 with +130 stars.Sep 27: 0 starsSep 28: +4 starsSep 29: +27 starsSep 30: +130 starsOct 1: +7 starsOct 2: +34 starsOct 3: +14 starsOct 4: +9 starsOct 5: +13 starsOct 6: +6 starsOct 7: +14 starsOct 8: +8 starsOct 9: +17 starsOct 10: +12 starsOct 11: +9 starsOct 12: +4 starsOct 13: +11 starsOct 14: +14 starsOct 15: +28 starsOct 16: +14 stars
Stars gained between daily snapshots
PeriodNew stars
Sep 270
Sep 28+4
Sep 29+27
Sep 30+130
Oct 1+7
Oct 2+34
Oct 3+14
Oct 4+9
Oct 5+13
Oct 6+6
Oct 7+14
Oct 8+8
Oct 9+17
Oct 10+12
Oct 11+9
Oct 12+4
Oct 13+11
Oct 14+14
Oct 15+28
Oct 16+14
  • 6 skills (6 skills found in its SKILL.md files)
  • 247 forks (247 forks)
  • 1d ago last update (Last updated 1d ago)

Install

Skills CLI

npx skills add plannotator/effective-html

Asks which skills and agents to install. Just one: npx skills add plannotator/effective-html --skill design-artifact — add -g for every project.

Claude Code

git clone https://github.com/plannotator/effective-htmlcp -r "effective-html/skills/design-artifact" ~/.claude/skills/

Copies the design-artifact skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.

Plugin

/plugin marketplace add plannotator/effective-html

Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.

Skills can run code on your machine — read the SKILL.md first.

What it does

In the author's own words, from each skill's SKILL.md.

  • design-artifact

    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.

    skills/design-artifact/SKILL.md on GitHub (opens in a new tab)

  • html-diagram

    Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure. Use when the user explicitly invokes html-diagram or the broad html skill routes a diagram request here. Do not activate independently from a general request.

    skills/html-diagram/SKILL.md on GitHub (opens in a new tab)

  • html-plan

    Direct-invocation specialist for clear, self-contained HTML plans that preserve source material while improving hierarchy, sequence, ownership, dependencies, and reviewability. Use when the user explicitly invokes html-plan or the broad html skill routes a plan request here. Do not activate independently from a general request.

    skills/html-plan/SKILL.md on GitHub (opens in a new tab)

  • html-prototype

    Direct-invocation specialist for polished, responsive, self-contained HTML mockups and interactive prototypes grounded in the user's conversation, product context, and design language. Use when the user explicitly invokes html-prototype or the broad html skill routes a mockup or prototype request here. Do not activate independently from a general request. Treat a mockup as a noninteractive fideli…

    skills/html-prototype/SKILL.md on GitHub (opens in a new tab)

  • html-wireframe

    Direct-invocation specialist for low-fidelity, self-contained HTML wireframes that test information hierarchy, content, navigation, task flow, and responsive structure before visual design. Use when the user explicitly invokes html-wireframe or the broad html skill routes a wireframe request here. Do not activate independently from a general request. Do not use for polished mockups or production-…

    skills/html-wireframe/SKILL.md on GitHub (opens in a new tab)

  • html

    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-…

    skills/html/SKILL.md on GitHub (opens in a new tab)

Review before you install

A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.