The official vanilla JavaScript SPA engineering track within the TidyFactor Ecosystem.
๐ Quick Start โข โก 11 Commands โข ๐๏ธ Ecosystem โข ๐ ุจุงูุนุฑุจูุฉ
Part of the TidyFactor ecosystem. Sibling tracks (tidyfactor-html,
tidyfactor-php, tidyfactor-php-micro, tidyfactor-js-micro,
tidyfactor-htmx) live as separate skills so each can carry a full,
framework-appropriate command set instead of one skill trying to cover
every stack at once.
- Init โ scaffold a brand-new vanilla JS application.
- Convert โ bring an existing static site, jQuery-era codebase, or React/Vue app onto framework-free vanilla JS.
- Improve โ audit and upgrade a project already on this track.
- Routing strategy โ hash-based (zero host config) or History API (clean URLs, needs a host rewrite rule).
- Build tooling โ zero-build native ES Modules, or Vite (dev/build tooling only, never a framework dependency).
init ยท assets ยท logic ยท store ยท compo ยท route ยท pages ยท
modules ยท i18n ยท seo ยท deploy โ see SKILL.md for the full
sequencing and each command's reference file under references/commands/.
Built and maintained by alwkala โ github.com/alwkala
Licensed under the Apache License 2.0.
Choose your preferred installation method:
Install directly using the official ecosystem package runner into your active workspace:
npx @tidyfactor/cli add js
Or if you have the CLI installed globally (npm i -g @tidyfactor/cli):
tidyfactor add js
Install using the universal multi-agent standard across all supported IDEs (Cursor, Antigravity, Claude Code, Windsurf, Trae, Codex):
npx skills add tidyfactor/js
Run the dedicated skill installer directly with automatic cache invalidation:
npx @tidyfactor/js@latest
TidyFactor is a modular web architecture and AI coding agent skill ecosystem built on clear separation of concerns across the product lifecycle:
TidyFactor Organization (github.com/TidyFactor)
โ
โโโ Design Skills
โ โโโ Cinematic โ Experience / "Wow" (Apple ร Cartier Scroll-Driven Landing Pages)
โ โโโ Design โ Prototype / "Build" (Code-Native UI Design Engine & Figma Alternative)
โ โโโ Styler โ Production / "Ship" (Framework Styler & RTL Polish Engine)
โ
โโโ Development Skills
โ โโโ HTML โ Content & Static (Semantic SEO & Static Platform Starter)
โ โโโ HTMX โ Hypermedia (Server-Driven Micro-Interactions)
โ โโโ JS โ Vanilla SPA (Framework-Free Reactive ES Modules)
โ โโโ PHP โ Server-Rendered (Modern PHP 8.x Component UI & Architecture)
โ โโโ Next โ Multi-Tenant SaaS (Next.js 16, React 19, Supabase RLS & Dev-Perf)
โ
โโโ Growth Skills
โโโ Marketing โ Growth / Revenue (Direct Response, Pillar SEO & Content Lifecycles)
TidyFactor
โ
โโโโโโโโโโโผโโโโโโโโโโ
โ โ โ
Cinematic Design Styler
โ โ โ
Experience Prototype Production
โ โ โ
"Wow" "Build" "Ship"
| Track | Category | GitHub Repository | Agent Skill | NPM Package |
|---|---|---|---|---|
| Cinematic | Design | TidyFactor/Cinematic |
tidyfactor-cinematic |
@tidyfactor/cinematic |
| Design | Design | TidyFactor/Design |
tidyfactor-design |
@tidyfactor/design |
| Styler | Design | TidyFactor/Styler |
tidyfactor-styler |
@tidyfactor/styler |
| Next | Development | TidyFactor/Next |
tidyfactor-next |
@tidyfactor/next |
| HTML | Development | TidyFactor/HTML |
tidyfactor-html |
@tidyfactor/html |
| HTMX | Development | TidyFactor/HTMX |
tidyfactor-htmx |
@tidyfactor/htmx |
| JS | Development | TidyFactor/JS |
tidyfactor-js |
@tidyfactor/js |
| PHP | Development | TidyFactor/PHP |
tidyfactor-php |
@tidyfactor/php |
| Marketing | Growth | TidyFactor/Marketing |
tidyfactor-marketing |
@tidyfactor/marketing |
- ๐ Official Website: https://tidyfactor.com/
- ๐ Official Documentation: https://tidyfactor.com/documentation
- ๐ค Official Partner Website: Alwkala Digital Agency
- ๐ GitHub Organization: github.com/TidyFactor
- ๐ง Business Inquiries: [email protected]
- ๐ฑ WhatsApp: +20 101 665 6899
- ๐ Phone: +20 101 665 6899
- ๐ Location: Cairo, Egypt
Licensed under the Apache License 2.0. Copyright (c) 2026 TidyFactor & Alwkala.