TemplateEngine
Design and build web applications with components using only your web browser
Install / Use
/learn @AgronKabashi/TemplateEngineREADME
TemplateEngine
TemplateEngine is a web component templating framework that helps you build web applications using only your browser! Include it in your projects to replace your editing tool or create something more awesome based on it.
Demo: http://agronkabashi.github.io/TemplateEngine/
Sizes
This includes markup and default components.
| | Size (KB) | Gzipped (KB) | |----------------|-----------|--------------| | TemplateEngine | 25.2 | 8.4 | | TemplateEditor | 58.1 | 14.6 |
Dependencies
- jQuery (TemplateEditor)
- jQuery UI (TemplateEditor)
- Custom lodash build
- AngularJS
How to Get Started
Download and install NodeJS
$ npm install -g grunt-cli // Install Grunt globally
$ git clone https://github.com/AgronKabashi/TemplateEngine.git // Clone the project and enter directory
$ cd TemplateEngine
$ npm install // Install dependencies
$ grunt // Run the default task
Build targets
grunt build // Pre-cleaning and compilation of js, sass and templates
grunt release-build // Same as build + minification and obfuscation
grunt default // Runs build target and hosts a webserver with live reload
grunt release // Runs build target and hosts a webserver
grunt eslint // Runs linting
grunt test // Run unit/e2e tests
Creating your own components
Check the Wiki for details about how to create your own components.
Related Skills
diffs
342.5kUse the diffs tool to produce real, shareable diffs (viewer URL, file artifact, or both) instead of manual edit summaries.
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
1.9kThe 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-pro-max-skill
55.6kAn AI SKILL that provide design intelligence for building professional UI/UX multiple platforms
