alexei-led/writing-web
plugins/web-dev/skills/writing-web/SKILL.md
Simple web development with HTML, CSS, JS, and HTMX. Auto-activates 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 10, 2026, 3:35 AM157.6s1 file scanned
SKILL.md
- name:
- writing-web
- description:
- >-
- user-invocable:
- false
- context:
- fork
- agent:
- web-engineer
Web Development (Simple, Modern)
Philosophy
- HTML first - Semantic markup does the work
- Responsive simple CSS second - Small stylesheets, fluid layout, mobile-first sizing, and media/container queries only when needed
- HTMX third - Server-driven interactivity
- JS last - Only when nothing else works
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
- Destructive shell commands; ask before deleting or overwriting user files
- 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
Verify Generated Code
After generating code, validate HTML and check behavior:
npx html-validate . 2>&1 || true
# or, with Bun:
# bunx html-validate . 2>&1 || true
For small HTMX/form answers, explicitly mention simple responsive CSS and include a basic browser/manual or Playwright verification plan.
Verification plan must include:
- Manual/browser check for the changed page or component.
- Responsive check at mobile and desktop widths.
- Playwright or equivalent browser test when behavior changed.
- Screenshot or concise pass/fail notes for visual changes.
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