headless-step-frontend

headless-step-frontend is a skill for Claude Code, Codex from hostinger/api-mcp-server. It costs 78 tokens per session (3,581 once invoked), scanned A, original, MIT.

A frontend-building step that creates or connects the website users see to the backend described in the project files. It chooses or confirms a framework, follows the recorded design, and puts the source code in the site workspace.

In plain words
What is it for?
Use it to build a new frontend, connect an existing app to WordPress, WooCommerce, or another backend, and prepare source code for deployment.
Why use it?
It turns backend content and an agreed visual direction into a working website. It also supports projects that already have a frontend instead of forcing a new one.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it to build a new frontend, connect an existing app to WordPress, WooCommerce, or another backend, and prepare source code for deployment.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/hostinger/api-mcp-server/06-frontend
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add hostinger/api-mcp-server --skill 06-frontend
Clone the repo
git clone --depth 1 https://github.com/hostinger/api-mcp-server

Made for: Claude Code, Codex.

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.

agentmods badge for headless-step-frontend

README.md
[![agentmods](https://agentmods.dev/badge/skills/hostinger/api-mcp-server/06-frontend/github.svg)](https://agentmods.dev/skills/hostinger/api-mcp-server/06-frontend)
Your own site
<a href="https://agentmods.dev/skills/hostinger/api-mcp-server/06-frontend"><img src="https://agentmods.dev/badge/skills/hostinger/api-mcp-server/06-frontend/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.

agentmods 80×15 button for headless-step-frontend

Your own site · 80×15
<a href="https://agentmods.dev/skills/hostinger/api-mcp-server/06-frontend"><img src="https://agentmods.dev/badge/skills/hostinger/api-mcp-server/06-frontend.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 78 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,581 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. 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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00078 $0.03581
Opus 5.5 $0.00031 $0.01432
Sonnet 5.5 $0.00016 $0.00716
Haiku 4.5 $0.00008 $0.00358

Measured today against content hash 78a73a17fcff, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

headless-step-frontend scanned grade A with 0 findings 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 today.

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.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/headless/steps/06-frontend/SKILL.md · 182 lines

How it starts

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

headless-step-frontend

Build the site's frontend against the backend from site.json, implementing the look the design step already chose and wrote to design.md (plus the logo in brand/). The design is decided; this step is where it becomes real code. There's no per-framework recipe — use good judgement, follow design.md as the contract, and ask only for the clarifications you genuinely need. Out: source in the site workspace ~/.hostinger/<domain>/src/.

⚠️ Build mode: "Bring your own frontend"? Read this first (any backend)

Read brief.md → Build mode. When it is Bring your own frontend, the user already has a frontend (the project in the folder the command was run in) and this step wires it to the backend from site.json — it does not scaffold a new project and there is usually no design.md to implement (the design step deferred to the user). Use their project as the source: copy or point ~/.hostinger/<domain>/src/ at it, keep its framework and UI, and collaborate on changes at the user's direction (vibe-code with them). Your job is to connect it to the live backend (WordPress wp/v2 reads, the WooCommerce/Ecommerce Store API, env/keys) and make it deployable (set engines.node to 22, remove any .htaccess), then hand off to deploy. This generalises the Webapp "existing app" case below to WordPress and Ecommerce too. When Build mode is "Agent designs and builds", ignore this box and proceed normally (scaffold + implement design.md).

⚠️ Webapp backend? Read this first

A webapp brief has no CMS/store and no content-model.md — the app owns its own data (its own API, or the MySQL database recorded in site.json → database). It comes in two shapes, decided back in refine:

  • An existing app the user brought to deploy (refine routes "deploy my app" here). Use their project as the source — copy/point ~/.hostinger/<domain>/src/ at it and keep its own framework and UI. Do not scaffold a new project, and do not re-implement design.md over it (so the design step does not apply to an app that brings its own UI). Your job is only to make it deployable: set engines.node to 22, remove any .htaccess, wire its data/env, then hand off to deploy. Skip the Step 2 design pass, and ignore the content-model.md requirement in Step 3.
  • A new app built from the brief. Scaffold and build it from brief.md (and design.md if the design step produced one — design does run for a from-scratch app). Its data is owned by the app, so there is still no content-model.md to bind against.

Framework choice (Step 1), the build, and hand-off (Step 4) apply to both. The per-backend bullets in Step 3 are WordPress / WooCommerce / Ecommerce only — for a webapp follow the Webapp bullet there.

Read the full file on GitHub · 182 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.

  1. today Changed · +6 lines 78a73a17fcff
  2. 5d ago Changed · +15 lines 2783b21dd7cd
  3. 7d ago First seen · 161 lines · 78 tokens per session scan A 11a1ba8bd995

Subscribe to this mod's changes

headless-step-frontend is a skill published in the GitHub repository hostinger/api-mcp-server (164 stars, last pushed yesterday), licensed MIT. It adds 78 tokens to every session and 3,581 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-20.