skills.rest
krazyuniks
krazyuniksCOMMUNITY
Explore all skills by this author →
GitHub

gts-frontend-dev

Automate pre-bundled frontend stack workflows for NAM shootouts.

Updated Aug 27, 2026
Search Tags:#frontend#jinja2#tailwind#htmx#astro#alpine.js#react-island
One-click install
npx skills add https://github.com/krazyuniks/guitar-tone-shootout-archive --skill gts-frontend-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gts-frontend-dev
Source: https://github.com/krazyuniks/guitar-tone-shootout-archive/tree/main/.claude/skills/gts-frontend-dev
Command: npx skills add https://github.com/krazyuniks/guitar-tone-shootout-archive --skill gts-frontend-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill consolidates the NAM shootout frontend stack (SSR templates, lightweight client-side state, and a pre-bundled artifact set) to speed up development and ensure a consistent user experience across pages and fragments.

Core Features & Use Cases

  • SSR pages with Jinja2, HTMX, Alpine.js, and Tailwind for fast fragment updates and cohesive UI.
  • React islands only for complex stateful components (SignalChainBuilder) to keep the rest of the UI lean.
  • Pre-bundled artifacts in astro/dist to simplify deployment and testing with Docker and Just-based workflows.

Quick Start

Build the frontend assets and start in watch mode:

  • Build: just build-astro
  • Watch: just watch-templates
  • Run: docker compose up -d

Frequently Asked Questions about gts-frontend-dev

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

FAQPage Schema
How do I build a frontend stack using Jinja2, HTMX, and Tailwind for server-side rendering?▼

To build a Jinja2 SSR UI with HTMX and Tailwind, this Skill provides prebuilt frontend patterns that automate fragment updates and cohesive styling. It requires prebuilt assets in astro/dist and uses Docker-based execution with Just-based build commands.

When do I need React islands in an HTMX and Alpine.js frontend architecture?▼

You need React islands in an HTMX and Alpine.js frontend architecture specifically for complex stateful components like a SignalChainBuilder. This approach isolates heavy interactivity to keep the rest of the server-side rendered UI lean.

How do I start development with a pre-bundled Jinja2 and Astro frontend workflow?▼

To start development with this Jinja2 and Astro workflow, build the frontend assets using `just build-astro`, start template monitoring with `just watch-templates`, and execute the environment via `docker compose up -d`.

Does this frontend Skill require Docker and Just commands to operate?▼

Yes, this frontend Skill requires Docker-based execution and Just-based build and watch commands to operate. It relies on these workflows to manage prebuilt artifacts in astro/dist for testing and deployment.

What is the best way to manage UI state alongside HTMX fragment updates in Jinja2 templates?▼

The best way to manage UI state alongside HTMX fragment updates in Jinja2 templates is using Alpine.js for lightweight client-side interactions. This combination allows fast SSR page loads while maintaining dynamic user experiences.

Related Skills

Explore More Software Engineering Skills→
eighteyeseighteyes
9

chokidar-v4

Implement chokidar v4 file watchers with atomic write detection.

Community
Intermediate
timequitytimequity
6

frontend-htmx

Render server-rendered HTML UI for Axum apps using Askama and HTMX.

Official
Intermediate
eykdeykd

htmx-alpine-templates

Generate interactive HTML pages with HTMX and Alpine.js templates.

Community
Advanced
eykdeykd

htmx-pattern-library

Provide HTMX and Alpine.js patterns for interactive web features.

Community
Advanced