skills.rest
gakonst
gakonstCOMMUNITY
Explore all skills by this author →
Website𝕏@gakonstGitHub

js

Automate Vite, React, TanStack Query, and Bun development with Cloudflare Workers.

Updated Aug 27, 2026
Search Tags:#logs#frontend#tmux#bun#vite#cloudflare#js
One-click install
npx skills add https://github.com/gakonst/dotfiles --skill js
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: js
Source: https://github.com/gakonst/dotfiles/tree/main/.codex/skills/js
Command: npx skills add https://github.com/gakonst/dotfiles --skill js

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates development workflows for a full JS frontend stack (Vite + React + TanStack Query) on Bun with a Cloudflare Worker backend. It includes a dev-console bridge to pipe FE logs to backend logs, a tmux layout for server/log tails, dense/no-motion UI defaults, and Justfile/CI parity guidance.

Core Features & Use Cases

  • Dev-console bridge: forwards browser FE console messages to the backend with timestamps for easier debugging without switching contexts.
  • Worker receiver & logging: backend captures frontend logs, preserving context during development.
  • tmux layout: a ready-to-run pane arrangement for Vite, backend, and log tails to speed up debugging.
  • UI defaults: dense, zero-animation UI baseline suitable for rapid iteration.
  • TypeScript & React patterns: guidance on type-first imports, satisfies, and explicit query options to improve maintainability.

Quick Start

Start dev with the standard stack: pnpm dev (or bun run dev --host 0.0.0.0 --port 5173); ensure Wrangler/CF Worker dev parity is configured if needed.

Frequently Asked Questions about js

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up frontend logging that bridges to my backend without using the browser console?▼

This Skill provides a dev-console bridge that forwards browser console messages to your backend logs with timestamps, eliminating context-switching during debugging. Configure it in your Vite + React setup to pipe frontend logs directly to your Cloudflare Worker backend receiver.

Can I use Vite and React with Bun and still maintain CI parity with my Cloudflare Workers backend?▼

Yes. This Skill automates a full JS stack workflow for Vite, React, TanStack Query on Bun with Cloudflare Workers, including Justfile and CI alignment guidance to ensure dev commands match production pipelines.

What's the fastest way to set up a tmux development environment for a Vite frontend and backend server?▼

This Skill provides a ready-to-run tmux layout that arranges panes for Vite dev server, backend service, and log tails in one session, speeding up debugging and eliminating manual pane setup.

How do I configure React and TanStack Query with TypeScript best practices for maintainability?▼

This Skill includes guidance on type-first imports, the `satisfies` keyword, and explicit query options patterns for React + TanStack Query, improving type safety and code maintainability in your frontend.

Does this stack support dense, animation-free UI defaults suitable for rapid iteration?▼

Yes. This Skill includes built-in dense, zero-animation UI baseline configurations optimized for rapid development iteration without visual distractions.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tooling-setup

Configure React 19 frontend tooling with Vite, TypeScript, Biome, and Vitest.

Official
Intermediate
greyhaven-aigreyhaven-ai
29

observability-monitoring

Implement Cloudflare Workers observability with wrangler tail and health checks.

Community
Intermediate
sanity-iosanity-io
28

pnpm

Manage Node.js monorepos with pnpm workspace-aware dependency management.

Official
Advanced
truongnattruongnat

cloudflare-pro

Orchestrate Cloudflare Workers, R2, D1, KV, and Pages for edge applications.

Community
Advanced