Agent skill

Frontend

Generic frontend development patterns for VeChain dApps — React Query, Turborepo architecture, state management, Chakra UI, i18n, loading states, and transaction UX.

MITAuto-check passedFrontend & Design

Install Frontend

skills CLI

$ npx skills add vechain/x-app-template --skill frontend -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install vechain/x-app-template frontend --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/vechain/x-app-template.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/frontend .claude/skills/frontend && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "frontend" agent skill from https://github.com/vechain/x-app-template/tree/main/.agents/skills/frontend into .claude/skills/frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/vechain/x-app-template/tree/main/.agents/skills/frontend

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add vechain/x-app-template --skill frontend -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install vechain/x-app-template frontend --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/vechain/x-app-template.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/frontend .agents/skills/frontend && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "frontend" agent skill from https://github.com/vechain/x-app-template/tree/main/.agents/skills/frontend into .agents/skills/frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add vechain/x-app-template --skill frontend -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install vechain/x-app-template frontend --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/vechain/x-app-template.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/frontend .cursor/skills/frontend && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "frontend" agent skill from https://github.com/vechain/x-app-template/tree/main/.agents/skills/frontend into .cursor/skills/frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/vechain/x-app-template.git --path .agents/skills/frontend

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add vechain/x-app-template --skill frontend -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install vechain/x-app-template frontend --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/vechain/x-app-template.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/frontend .gemini/skills/frontend && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "frontend" agent skill from https://github.com/vechain/x-app-template/tree/main/.agents/skills/frontend into .gemini/skills/frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install vechain/x-app-template frontend

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add vechain/x-app-template --skill frontend -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/vechain/x-app-template.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/frontend .github/skills/frontend && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "frontend" agent skill from https://github.com/vechain/x-app-template/tree/main/.agents/skills/frontend into .github/skills/frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add vechain/x-app-template --skill frontend -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install vechain/x-app-template frontend --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/vechain/x-app-template.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/frontend .opencode/skills/frontend && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "frontend" agent skill from https://github.com/vechain/x-app-template/tree/main/.agents/skills/frontend into .opencode/skills/frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: frontend
GitHub stars: 450
Token cost: ~1.1k tokens
SKILL.md length: 521 words
Files: 2 (incl. references)
Skills in repo: 11
Repo updated: Jul 20, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Generic frontend development patterns for VeChain dApps — React Query, Turborepo architecture, state management, Chakra UI, i18n, loading states, and transaction UX.

Works in 5 steps: Check Node version → Detect project structure → Clarify before implementing → …
Tasks that involve State management
SKILL.md covers CRITICAL RULES, Scope, Default stack and Operating procedure, plus 1 more section
Calls nvm and npm

What it does

Frontend is an agent skill from vechain/x-app-template. Generic frontend development patterns for VeChain dApps — React Query, Turborepo architecture, state management, Chakra UI, i18n, loading states, and transaction UX.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/frontend.md`).

It sits in Frontend & Design, covering State management, Smart contracts and Monorepo tooling. It works with TanStack and Turborepo. The repository describes itself as: Vechain VeBetterDAO X-App template. The licence is MIT.

When your agent uses it

Tasks that involve State management
Tasks that involve Smart contracts
Tasks that involve Monorepo tooling

Example prompts

“/frontend”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

Check Node version
Detect project structure
Clarify before implementing
Implement with correctness
Verify and deliver

What it can do on your machine

Read from SKILL.md and the folder at commit 8692b6a. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- nvm
- npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Frontend loads about 1.1k tokens when it runs, and up to ~4k if it reads all its reference files. Until then it costs about 44 tokens; SKILL.md has 521 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~44
When it runs · the whole SKILL.md, loaded when a task matches: ~1.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from vechain/x-app-template at commit 8692b6a, republished under its MIT licence (© vechain). 521 words, ~1,050 tokens.

Download SKILL.mdSave it as .claude/skills/frontend/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.

name: frontend
description: Generic frontend development patterns for VeChain dApps — React Query, Turborepo architecture, state management, Chakra UI, i18n, loading states, and transaction UX.
license: MIT
metadata.author: VeChain
metadata.version: 0.1.0

Frontend Skill

CRITICAL RULES

Read reference files FIRST. When the user's request involves any topic in the reference table below, read those files before doing anything else — before writing code, before making decisions. Briefly mention which files you are reading so the user can confirm the skill is active (e.g., "Reading frontend patterns reference...").
Information priority for VeChain topics: (a) Reference files in this skill — always the primary source. (b) VeChain MCP tools — use @vechain/mcp-server for on-chain data, transaction building, and live network queries; use Kapa AI MCP for VeChain documentation lookups. (c) Web search — only as a last resort, and only for topics NOT covered in the reference files.
Prefer working directly in the main conversation for VeChain tasks. Plan mode and subagents do not inherit skill context and may fall back to web search instead of using reference files.
After compaction or context loss, re-read this SKILL.md to restore awareness of the reference table and operating procedure before continuing work.

Scope

Use this Skill for generic frontend development patterns in VeChain dApps:

React Query (TanStack Query): query keys, cache invalidation, batch queries, loading states, anti-patterns
Turborepo monorepo architecture and conventions
State management (React Query for server state, Zustand for client state)
Chakra UI integration and responsive design
i18n with react-i18next
Transaction UX: loading states, confirmation patterns, error handling
Choosing between VeChain Kit and dapp-kit

For package-specific APIs (hooks, components, setup), see the vechain-kit skill. For core VeChain SDK, fee delegation, and multi-clause transactions, see the vechain-core skill.

Default stack

Layer	Default	Alternative
Frontend	React / Next.js (App Router)	--
Data fetching	`@tanstack/react-query`	--
State management	Zustand (client state only)	--
UI	Chakra UI v2	--
Monorepo	Turborepo	--
Node	Node 20 LTS (managed via `nvm`)	--

Operating procedure

1. Check Node version

Before installing dependencies or running any command:

Check if .nvmrc exists in the project root. If yes, run nvm use.
If .nvmrc does not exist, create one with 20 (Node 20 LTS) and run nvm use.

Show full SKILL.md (194 more words)Show less

2. Detect project structure

turbo.json present → follow Turborepo conventions (apps/frontend, packages/*)
Apply conditional patterns (Chakra UI, i18n, Zustand) only when the project uses them

3. Clarify before implementing

When the user's request is ambiguous or could be solved multiple ways, ask before building. Separate research from implementation.

4. Implement with correctness

Use React Query for all server state (contract reads, indexer data)
Never duplicate server state in Zustand — let React Query be the source of truth
Always use enabled guards on queries with dynamic params
Always show skeletons while loading — never render empty/zero states during loads
Invalidate affected caches after transactions

5. Verify and deliver

A task is not complete until all applicable gates pass:

Code compiles — no build errors (npm run build or equivalent succeeds)
Tests pass — existing tests still pass; new logic has test coverage
Risk notes documented — any signing, fee, or token-transfer implications are called out

Reference files

Read the matching files BEFORE doing anything else. See Critical Rules above.

Topic	File	Read when user mentions...
Frontend patterns	references/frontend.md	frontend, React Query, caching, query keys, loading, skeleton, Turborepo, Chakra, i18n, state management, transaction UX, VeChain Kit vs dapp-kit

Files

SKILL.md and 1 other file (references) in .agents/skills/frontend of vechain/x-app-template.

SKILL.md
references/frontend.md

Open the folder on GitHubat commit 8692b6a

Compare with similar skills

Frontend next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Frontend compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Frontend this skillvechain/x-app-template	450	—	~1.1k	Automated safety check: Pass	MIT	2 mo ago
Nextjs15 Initbear2u/my-skills	933	—	~2.4k	Automated safety check: Pass	None	3 mo ago
Web Frontendlatitude-dev/latitude-llm	4.7k	—	~5.2k	Automated safety check: Pass	MIT	today
React ExpertJeffallan/claude-skills	12k	—	~1.4k	Automated safety check: Pass	MIT	4 days ago
Moai Ref React Patternsmodu-ai/moai-adk	1.2k	—	~1.8k	Automated safety check: Pass	Apache-2.0	today
Impeccablebestofjs/bestofjs	3.1k	27 repos	~2.6k	Automated safety check: Pass	MIT	3 days ago

Similar skills

Nextjs15 Init
bear2u/my-skills
A skill your agent uses when user wants to create a new Next.js 15 project (Todo/Blog/Dashboard/E-commerce/Custom domain) with App Router, ShadCN, Zustand, Tanstack Query, and modern Next.js stack
933 GitHub stars~2.4k tokensUpdated 3 mo ago
Frontend & DesignAuto-check passed
Web Frontend
latitude-dev/latitude-llm
apps/web UI — routes, @repo/ui, TanStack Start server functions and collections, navigation (Link vs useNavigate), forms (useForm + createFormSubmitHandler + fieldErrorsAsStrings for Zod field…
4.7k GitHub stars~5.2k tokensUpdated today
Frontend & DesignAuto-check passed
React Expert
Jeffallan/claude-skills
Builds React 19 components in TypeScript with Server Components, useActionState forms, custom hooks and state libraries, checked with tsc and React Testing Library.
12k GitHub stars~1.4k tokensUpdated 4 days ago
Frontend & DesignAuto-check passed
Moai Ref React Patterns
modu-ai/moai-adk
React/Next.js component design patterns, state management strategies, and project structure reference for frontend development.
1.2k GitHub stars~1.8k tokensUpdated today
Frontend & DesignAuto-check passed
Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
3.1k GitHub starsUsed in 27 repos~2.6k tokens
Frontend & DesignAuto-check passed
Create Docs
victorgarciaesgi/nuxt-typed-router
Create complete documentation sites for projects. An agent skill from victorgarciaesgi/nuxt-typed-router.
413 GitHub starsUsed in 2 repos~2.8k tokens
Frontend & DesignAuto-check passed

More from vechain/x-app-template

All 11 skills in this repo

Create Vechain Dapp
vechain/x-app-template
Scaffold a VeChain dApp with Next.js, VeChain Kit, Chakra UI v3, and GitHub Pages deployment.
450 GitHub stars~1.8k tokensUpdated 2 mo ago
Auto-check passed
Secure GitHub Actions
vechain/x-app-template
Secure GitHub Actions workflows against supply-chain, privilege, and shell-injection risks.
450 GitHub stars~1.2k tokensUpdated 2 mo ago
Auto-check passed
Translate
vechain/x-app-template
Manages translation files for react-i18next. An agent skill from vechain/x-app-template.
450 GitHub stars~1.2k tokensUpdated 2 mo ago
Auto-check passed
Smart Contract Development
vechain/x-app-template
Solidity smart contract development on VeChainThor — Hardhat setup, ERC-20/721 patterns, upgradeable contracts, gas optimization, testing with Thor Solo, security auditing, and ABI codegen.
450 GitHub stars~1.1k tokensUpdated 2 mo ago
Auto-check passed
Vebetterdao
vechain/x-app-template
VeBetterDAO and X2Earn app development — B3TR/VOT3 tokens, reward distribution, sustainability proofs, app submission, governance, VeVote, quadratic funding, B3MO Quests, and navigators.
450 GitHub stars~1.1k tokensUpdated 2 mo ago
Auto-check passed
Vechain Core
vechain/x-app-template
Core VeChain development — SDK usage, fee delegation (VIP-191), multi-clause transactions, dual-token model, legacy migration, and general VeChainThor development patterns.
450 GitHub stars~1.2k tokensUpdated 2 mo ago
Auto-check passed

Works with

Questions about Frontend

What does Frontend do?

Generic frontend development patterns for VeChain dApps — React Query, Turborepo architecture, state management, Chakra UI, i18n, loading states, and transaction UX. Frontend is an agent skill from vechain/x-app-template. Generic frontend development patterns for VeChain dApps — React Query, Turborepo architecture, state management, Chakra UI, i18n, loading states, and transaction UX.

When should I use Frontend?

Frontend fits situations like: tasks that involve State management; tasks that involve Smart contracts; tasks that involve Monorepo tooling.

How do I install Frontend in Claude Code?

Run `npx skills add vechain/x-app-template --skill frontend -a claude-code`. Or copy the skill folder (.agents/skills/frontend in vechain/x-app-template) into .claude/skills/frontend in your project. Claude Code loads it when a task matches its description.

How do I install Frontend in Codex?

Run `npx skills add vechain/x-app-template --skill frontend -a codex`. Or copy the skill folder (.agents/skills/frontend in vechain/x-app-template) into .agents/skills/frontend in your project. Codex loads it when a task matches its description.

Can I use Frontend in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add vechain/x-app-template --skill frontend -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend, .gemini/skills/frontend, .github/skills/frontend and .opencode/skills/frontend in your project.

What does Frontend need to run?

Going by SKILL.md and its folder, Frontend needs the command-line tools its instructions call (nvm and npm).

Does Frontend access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Frontend safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Frontend use?

Frontend is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Frontend use?

About 1.1k tokens (SKILL.md is roughly 4.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3k tokens, read only when the agent opens those files.

What are the alternatives to Frontend?

Skills that share tags, products or a category with Frontend: Nextjs15 Init (bear2u/my-skills, 933 stars), Web Frontend (latitude-dev/latitude-llm, 4.7k stars), React Expert (Jeffallan/claude-skills, 12k stars) and Moai Ref React Patterns (modu-ai/moai-adk, 1.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend?

vechain (a GitHub organization) maintains it in vechain/x-app-template, which has 450 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on July 20, 2026.

Source: vechain/x-app-template on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Frontend

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Frontend Skill

CRITICAL RULES

Scope

Default stack

Operating procedure

1. Check Node version

2. Detect project structure

3. Clarify before implementing

4. Implement with correctness

5. Verify and deliver

Reference files

Files

Compare with similar skills

Similar skills

More from vechain/x-app-template

Related

Questions about Frontend