How do I install the Web Frontend skill?

Run npx skillmds@latest add hugobatista/web-frontend in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Web Frontend safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Web Frontend?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Web Frontend free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Web Frontend?

hugobatista (@hugobatista) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Web Frontend

Name: Web Frontend
Rating: 4.2 (5 reviews)
Author: hugobatista

Use when building or modifying web frontend code. Covers Vue, Tailwind CSS, Vite, dark/light mode, responsive design, and frontend tooling. For other UI types (desktop, Qt, etc.), use the dedicated skill for that domain.

hugobatista Updated Sep 22, 2026

Web & Frontend

Install

Press C to copy

$ npx skillmds@latest add hugobatista/web-frontend

Installs into ~/.claude/skills (or .claude/skills inside a project). Restart Claude Code to pick it up.

Download SKILL.md

＋ Add to plugin

README badge

[![SkillMD](https://skillmd.com/badge/hugobatista/web-frontend.svg)](https://skillmd.com/skills/hugobatista/web-frontend)

Trust & safety

Audits pending

Not yet audited · commit 2c9a902

Permissions this skill uses

Makes network calls
The instructions fetch remote URLs or call external services.

Works with: Claude Code Claude.ai OpenAI Codex +

File contents

Build tool: Vite — always fetch latest docs
Frontend: Vue — always fetch latest docs
Styling: Tailwind CSS — always fetch latest docs
Theming: implement dark/light mode switching
Responsive: mobile-first layout adapting across all screen sizes
No comments in template/style blocks for self-explanatory markup

npm security hardening

Use npm ci over npm install for reproducible builds — respects the lockfile exactly, never mutates package-lock.json.
Create an .npmrc with ignore-scripts=true to block postinstall attacks during install, and audit-level=high to surface only high/critical vulnerabilities:
```
audit-level=high
ignore-scripts=true
```
In Docker build stages, use npm ci --prefer-offline --ignore-scripts.
Add npm audit signatures in CI pipelines to verify package tarball signing keys against the npm public key, preventing tampered packages from being injected during install.

hugobatista/agent-skills/tree/main/skills/frontend/web-frontend commit 2c9a902c52

Frequently asked questions

npx skillmds@latest add hugobatista/web-frontend