When you add a widget to a page, you have a nice form to fill in the widget properties. All you do is fill in the properties. You get the same form when you apply a custom widget to an Item in the “default list item widget”. For example:
The door widget above defines a two properties, the control item and the sensor item. This is what the “default list item widget” form looks like:
Easy peasy.
Those widgets would work the same. Each defines one or more properties. When you add it to a Page you have the opportunity to set the properties and that’s how you connect your Items to the widget.
As for the pages, you’d probably need to import the widgets first under Developer Tools → Custom Widgets and pasting the YAML from the Github page first. None of these appear to be on the marketplace. Then you’d create each page and paste the YAML for the new pages to the “code” tab for the page.
But I recommend starting smaller first. Create a simple custom widget of your own and apply it. It can be as simple as something that changes the color of an icon. Then everything in that repo will make more sense.