What is holix-studio-frontend-backend?

A Holix Studio skill for running web applications, including frontend-only apps and apps with both a frontend and backend. Holix Studio is the environment where the running application is previewed in a browser.

Use it when starting or demonstrating Vite, Next, Nuxt, React, static SPA, or frontend-plus-API applications in Holix Studio.

It handles the setup details needed for Studio to reach the app and gives users a preview link rather than leaving them to find a local address. For frontend-and-backend apps, it also defines how the two parts should connect.

holix-studio-frontend-backend — Skill for Claude Code by javded-itres

Install

Getting it into your agent

It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.

Clone the repo

git clone --depth 1 https://github.com/javded-itres/Holix

agentmods

npx agentmods add skills/javded-itres/holix/holix-studio-frontend-backend

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/javded-itres/holix/holix-studio-frontend-backend/github.svg)](https://agentmods.dev/skills/javded-itres/holix/holix-studio-frontend-backend)

Your own site

<a href="https://agentmods.dev/skills/javded-itres/holix/holix-studio-frontend-backend"><img src="https://agentmods.dev/badge/skills/javded-itres/holix/holix-studio-frontend-backend/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/javded-itres/holix/holix-studio-frontend-backend"><img src="https://agentmods.dev/badge/skills/javded-itres/holix/holix-studio-frontend-backend.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 101 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 2,605 The whole file, excluding the scripts and references it only reads on demand.

Security scan B 1 finding. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00101	$0.02605
Opus 5	$0.00051	$0.01303
Sonnet 5	$0.00020	$0.00521
Haiku 4.5	$0.00010	$0.00261

Measured 10d ago against content hash a1771d101489, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-10, from the pricing page.

Security

Grade B, and why

holix-studio-frontend-backend scanned grade B with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Subtle steeringmediumPrompt injection

Instructions that bias recommendations or shape behaviour without the user noticing.

- Never tell the user to open `localhost` / bare `host:port` as the main URL.

core/skills/bundled/holix-studio-frontend-backend/SKILL.md · 247 lines

How it starts

The opening of the file, as written. The whole thing — 247 lines — stays where its author put it; the contents beside it link to each section on GitHub.

When to use (always in Studio)

Apply this skill whenever you start, fix, or demo a web frontend (or FE+API) in Holix Studio:

User asks to run the app, open the UI, “подними фронт”, “запусти preview”, “открой в браузере”
Project has Vite / Next / Nuxt / CRA / static SPA ± API
You are about to say the app is ready

This skill is platform / required: do not ignore it for Studio web work.

Non‑negotiable rules

Listen on 0.0.0.0 (never only 127.0.0.1) for any process that Studio Preview must reach
(Vite/Nuxt host: '0.0.0.0', uvicorn --host 0.0.0.0, nginx published port, etc.).
Always form real preview links in chat after the app listens:
- Call MCP open_preview_url(port=…) (and for FE+BE, for every public port users need).
- Paste into the chat reply: frame_url / public origin from the tool result (Markdown link).
- Never tell the user to open localhost / bare host:port as the main URL.
Prefer docker-compose + nginx for “run the app” demos:
- One published port on the host (nginx).
- Frontend and backend only on the compose network (expose, not host-publish unless needed).
- Nginx routes UI + API on the same origin (/ → FE, /api/ → BE) so the browser does not need a separate API host when possible.
Do not use Desktop / noVNC for web apps — only Studio → Browser via open_preview_url.
Do not claim “preview is ready” without a successful tool result that includes the public URL.

Preferred architecture (FE + BE)

Browser → Studio preview (public HTTPS) → host:PORT → nginx container
                                              ├─ /        → frontend:3000
                                              └─ /api/    → backend:8000

Single public port → one open_preview_url → one link in chat.

docker-compose.yml (template — adapt ports/paths)

Write under the project (e.g. docker-compose.yml or deploy/docker-compose.studio.yml):

Read the full file on GitHub · 247 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

10d ago First seen · 247 lines · 101 tokens per session scan B a1771d101489

Subscribe to this mod's changes

holix-studio-frontend-backend is a skill published in the GitHub repository javded-itres/Holix (14 stars, last pushed 2d ago), licensed MIT. It adds 101 tokens to every session and 2,605 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it B with 1 finding (subtle steering). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Backend and APIs Frontend agent-skills ai compose docker holix nginx preview required studio vite

html-preview

A guidance skill for adding small, static HTML/CSS visual previews to Markdown when a diagram, comparison, timeline, metric display, or layout sketch would be clearer than text. It does not use JavaScript.

xerrors/Yuxi · 86 tokens

sanity-live-cache-components

Integrates Sanity Live with Next.js Cache Components in next-sanity v13+ apps. Sets up sanityFetch, a shared cachedSanity 'use cache' boundary, , Visual Editing, Presentation Tool, draft mode handling, and the three-layer (Page/Dynamic/Cached) component pattern with explicit perspective/stega prop-drilling. Sequences…

sanity-io/next-sanity · 155 tokens

add-permission

Add a permission constant across backend and frontend.

fpindej/netrock · 8 tokens

gen-types

Regenerate frontend API types from the backend OpenAPI spec.

fpindej/netrock · 11 tokens

spiceflow

Spiceflow is a super simple, fast, and type-safe API and React Server Components framework for TypeScript. Works on Node.js, Bun, and Cloudflare Workers. ALWAYS load this skill BEFORE writing or editing ANY spiceflow code, including one-line changes: routes, pages, layouts, loaders, server actions, forms…

remorses/spiceflow · 159 tokens

new-feature

Scaffold a full-stack feature from entity to frontend page.