# Web Frontend

> 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.

- Skill: `hugobatista/web-frontend` (Agent Skill)
- Install (CLI): `npx skillmds@latest add hugobatista/web-frontend`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hugobatista/web-frontend/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: hugobatista (https://skillmd.com/u/hugobatista)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/hugobatista/web-frontend

---


- **Build tool**: [Vite](https://vitejs.dev/) — always fetch latest docs
- **Frontend**: [Vue](https://vuejs.org/) — always fetch latest docs
- **Styling**: [Tailwind CSS](https://tailwindcss.com/) — 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:
  ```ini
  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.