alexei-led/writing-web
dist/claude/plugins/web-dev/skills/writing-web/SKILL.md
Simple web development with HTML, CSS, JS, and HTMX. Use when working with .html, .css, or .htmx files, web templates, stylesheets, or vanilla JS scripts. NOT for React/Vue/Angular (use writing-typescript) or Node.js backends.
$ install --global
skillsauthnpx skillsauth add alexei-led/claude-code-config writing-webInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 18, 2026, 3:40 AM130.8s1 file scanned
SKILL.md
- agent:
- engineer
- context:
- fork
- description:
- Simple web development with HTML, CSS, JS, and HTMX. Use when working
- name:
- writing-web
- user-invocable:
- false
Web Development (Simple, Modern)
Critical Output Rules
- Use semantic HTML elements before reaching for CSS or JS:
<button>,<dialog>,<details>,<summary>,<nav>,<article>. - CSS custom properties (
--var) for all repeated values; no magic numbers. - HTMX for server-driven interactivity; vanilla JS only when HTML/CSS/HTMX cannot do it.
- Include a verification plan for every generated page or component: manual browser check, responsive check at mobile/desktop, and a Playwright step when behavior changed.
- Do not run destructive shell commands. For broad or risky changes, state the risk and ask before acting.
Philosophy
The HTML-first philosophy, the no-destructive-commands safety rule, and the post-generation verification plan are in references/principles.md — read it before generating code.
Patterns
Semantic HTML
<header>
<nav><a href="/">Home</a></nav>
</header>
<main>
<h1>Title</h1>
<article>Content</article>
</main>
<footer>© 2024</footer>
Use native elements
<button>for actions<a>for navigation<details>/<summary>for accordions<dialog>for modals
Simple CSS
:root {
--primary: #2563eb;
--spacing: 1rem;
}
.container {
display: grid;
gap: var(--spacing);
}
@media (min-width: 768px) {
.container {
grid-template-columns: 1fr 1fr;
}
}
HTMX (with Go)
<!-- Load content -->
<div hx-get="/items" hx-trigger="load"></div>
<!-- Form -->
<form hx-post="/create" hx-target="#result">
<input name="title" required />
<button>Create</button>
</form>
<!-- Delete with confirmation -->
<button hx-delete="/item/123" hx-confirm="Delete?">Delete</button>
<!-- CSRF token -->
<body hx-headers='{"X-CSRF-Token": "{{.Token}}"}'></body>
Minimal JS
// Only when HTML/CSS/HTMX can't do it
document.body.addEventListener("click", (e) => {
if (e.target.matches("[data-copy]")) {
navigator.clipboard.writeText(e.target.dataset.copy);
}
});
Avoid
- JS for things HTML can do (accordions, modals)
- CSS for things HTML can do (form validation)
- Fetch when HTMX works
- Deep selector nesting
- Wrapper div soup
References
- principles.md - Philosophy, safety rule, and verification plan (read before generating code)
- PATTERNS.md - Semantic HTML, modern CSS, and minimal-JS idioms
Failure Cases
- html-validate reports errors: fix semantic/attribute issues before considering the task done; do not suppress with
|| truein CI. - HTMX request not firing: check
hx-trigger,hx-targetselector, and CSRF header presence before adding JS fallback.
Related Skills
alexei-led/writing-shell
tools
VerifiedTrustedCommunity
Idiomatic shell development for POSIX sh, Bash, Zsh, Fish, hooks, CI shell steps, and scriptable CLI glue. Use when writing or changing `.sh`, `.bash`, `.zsh`, `.fish`, `.bats`, shell functions, shell pipelines, or command-runner recipes. Emphasizes portability, quoting, safe filesystem/process handling, non-TUI CLI tools, ShellCheck, shfmt, Bats, and ShellSpec. NOT for Python, TypeScript, Go, web code, or infrastructure operations.
33SKILL.mdUpdated Jun 5, 2026
alexei-led/spec-flow
tools
VerifiedTrustedCommunity
Use when planning, executing, checkpointing, finishing, or inspecting lightweight spec-driven work. Runs one task at a time using `.spec/` markdown files and the bundled `specctl` helper. NOT for broad product discovery beyond a short requirement interview.
33SKILL.mdUpdated Jun 5, 2026
alexei-led/operating-infra
testing
VerifiedTrustedCommunity
Author, inspect, troubleshoot, and review infrastructure across IaC, Kubernetes, cloud resources, containers, CI/CD, and Linux hosts. Use when changing Terraform/OpenTofu, Kubernetes, Helm, Kustomize, Dockerfiles, GitHub Actions, AWS, GCP, Cloud Run, BigQuery, IAM, logs, instances, or service health. NOT for deploy/apply/rollback workflows (see deploying-infra). NOT for shell scripts or generic command pipelines (see writing-shell).
33SKILL.mdUpdated Jun 5, 2026
alexei-led/configuring-git-hygiene
development
VerifiedTrustedCommunity
Configure safe git workflow hygiene: pre-commit/pre-push hooks, Gitleaks secret scanning, .gitignore rules, local git config, and guardrails. Use when setting up git hooks, gitleaks/git leaks, staged pre-commit checks, pre-push validation, core.hooksPath, .gitignore, or git config best practices. NOT for creating commits (use committing-code), cleaning branches/worktrees (use cleanup-git), or creating worktrees (use using-git-worktrees).
33SKILL.mdUpdated Jun 5, 2026