deeleeramone/pywry/interactive-buttons

Claude Code and agent skill by deeleeramone/pywry

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

Install

npx vskill@latest install deeleeramone/pywry/interactive-buttons

SKILL.md

Interactive Buttons - MANDATORY PATTERN

STOP. READ THIS ENTIRE FILE BEFORE CREATING ANY WIDGET.

The ONLY Correct Way to Create Buttons

Copy this EXACTLY. Do not deviate.

json
{
  "html": "<div id=\"counter\" style=\"font-size:48px;text-align:center;padding:50px\">0</div>",
  "title": "Counter",
  "height": 400,
  "toolbars": [{
    "position": "top",
    "items": [
      {"type": "button", "label": "+1", "event": "counter:increment", "variant": "primary"},
      {"type": "button", "label": "-1", "event": "counter:decrement", "variant": "neutral"},
      {"type": "button", "label": "Reset", "event": "counter:reset", "variant": "danger"}
    ]
  }]
}

THAT'S IT. No callbacks needed. Buttons work automatically.

How It Works

The event name counter:increment is parsed as:

  • counter → the HTML element id to update
  • increment → the action to perform

When you click "+1", PyWry:

  1. Finds the element with id="counter"
  2. Parses its current text as a number
  3. Adds 1 to it
  4. Updates the display

Supported Actions

Event PatternWhat It Does
myId:incrementAdds 1 to element's text
myId:decrementSubtracts 1 from element's text
myId:resetSets element's text to 0
myId:toggleToggles between true/false

More Examples

Status Toggle
python
create_widget(
    html='<div id="status" style="font-size:24px;text-align:center">false</div>',
    toolbars=[{
        "position": "top",
        "items": [
            {"type": "button", "label": "Toggle Status", "event": "status:toggle"}
        ]
    }]
)
Score Tracker
python
create_widget(
    html='''
        <div style="display:flex;justify-content:space-around;padding:20px">
            <div>Home: <span id="home" style="font-size:48px">0</span></div>
            <div>Away: <span id="away" style="font-size:48px">0</span></div>
        </div>
    ''',
    toolbars=[{
        "position": "top",
        "items": [
            {"type": "button", "label": "Home +1", "event": "home:increment"},
            {"type": "button", "label": "Away +1", "event": "away:increment"},
            {"type": "button", "label": "Reset All", "event": "home:reset"},
        ]
    }]
)

Rules

  1. Element id must exist - The HTML must have an element with the matching id
  2. Event format is `id:action` - Colon separates the target from the action
  3. Actions are lowercase - increment, decrement, reset, toggle
  4. Initial value matters - For increment/decrement, start with a number like "0"

Common Mistakes

❌ Wrong: event: "increment" (no target id) ❌ Wrong: event: "counter-increment" (hyphen instead of colon) ❌ Wrong: HTML has id="Counter" but event is counter:increment (case mismatch)

✅ Correct: event: "counter:increment" with id="counter" in HTML

Security

  • Security scanPassed, 100 of 100Pattern checks on the skill's files.
  • Model reviewPassed

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

Repository stars
89
Repository forks
7
7-day trend score
22

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/deeleeramone/pywry/interactive-buttons/badge)](https://verified-skill.com/skills/deeleeramone/pywry/interactive-buttons)

Something wrong with this skill or its page? Tell us.