WinWidgets
WinWidgets makes web-based desktop widgets easy to develop. Using HTML, CSS, and JavaScript create your own Windows 11 widgets on the fly.
Install / Use
/learn @beyluta/WinWidgetsREADME
About
WinWidgets makes web-based desktop widgets easy to develop.
Use a mix of HTML, CSS, and JavaScript to create your own widgets on the fly.
This is what makes this project interesting:
- 🧰 Focus on creating your widgets with all the usual web tools to your disposal.
- ⚙️ Develop complex widgets using JavaScript.
- 🖱️ Create your widgets from any tool or resource, then import it here.
- ⌨️ Listen to operating system events and act on them programmatically.
Support
These are the platforms officially supported by WinWidgets.
| Platform | Availability | Supported Version | | -------- | ------------ | ----------------- | | Windows | ✅ | Windows 11 | | Linux | ⚠️ (W.I.P) | Arch | | MacOS | ❌ | N/A |
The software may run on operating systems or distributions not listed here but it isn't guaranteed.
Widget development
Inside the application, you will find a tab "development". It includes a guide about widget development in WinWidgets.
You may also have a look in this repository under
assets/resources/ for some sample Widgets:
/WinWidgets/
| ...
| assets/
\_ resourcers/
| ...
| Clock.html
| Calendar.html
| Battery.html
Screenshots
Building
This is a brief guide for all supported platforms to compile and run the application.
Windows prerequisites
Download the following dependencies for Windows 11 with the following
Chocolatey command. Optionally you can download them manually and put
in your PATH environment variable.
choco install mingw make llvm
Linux prerequisites
For Linux you need the packages gtk-3.0, appindicator3 and webkitgtk-4.1.
Make sure to get their corresponding -dev packages as well or else you
won't be able to compile.
Common commands
These are commands that work for all supported platforms. Read them carefully to successfully compile the application.
When building for the first time you must run the following command to fetch dependencies:
git submodule update --init --recursive
(Optional) Consider running the following when pulling remote changes to update dependencies:
git submodule update --recursive --remote
Compile the binary for debugging with the following command:
make debug
Compile the binary for release with the following command:
make release
Execute the program with:
make run
Contributing
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Add yourself to the CONTRIBUTORS.txt file
- Open a Pull Request
Related Skills
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
openpencil
2.0kThe world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
ui-ux-designer
Use this agent when you need to design, implement, or improve user interface components and user experience flows. Examples include: creating new pages or components, improving existing UI layouts, implementing responsive designs, optimizing user interactions, building forms or dashboards, analyzing existing UI through browser snapshots, or when you need to ensure UI components follow design system standards and shadcn/ui best practices.\n\n<example>\nContext: User needs to create a new dashboard page for team management.\nuser: "I need to create a team management dashboard where users can view team members, invite new members, and manage roles"\nassistant: "I'll use the ui-ux-designer agent to design and implement this dashboard with proper UX considerations, using shadcn/ui components and our design system tokens."\n</example>\n\n<example>\nContext: User wants to improve the user experience of an existing form.\nuser: "The signup form feels clunky and users are dropping off. Can you improve it?"\nassistant: "Let me use the ui-ux-designer agent to analyze the current form UX and implement improvements using our design system and shadcn/ui components."\n</example>\n\n<example>\nContext: User wants to evaluate and improve existing UI.\nuser: "Can you take a look at our pricing page and see how we can make it more appealing and user-friendly?"\nassistant: "I'll use the ui-ux-designer agent to take a snapshot of the current pricing page, analyze the UX against Notion-inspired design principles, and implement improvements using our design tokens."\n</example>
HappyColorBlend
HappyColorBlendVibe Project Guidelines Project Overview HappyColorBlendVibe is a Figma plugin for color palette generation with advanced tint/shade blending capabilities. It allows designers to
