writing-web
Simple web development with HTML, CSS, JS, and HTMX. Use when writing or reviewing web templates, stylesheets, or scripts.
Install
npx skillscat add alexei-led/claude-code-config/writing-web Install via the SkillsCat registry.
About this skill
The skill involves writing and reviewing simple web templates using HTML, CSS, and HTMX, with minimal JavaScript, to create semantic, maintainable interfaces without heavy client-side code. It is used when building or evaluating web pages that rely on server‑driven interactivity and straightforward styling.
SKILL.md
Web Development (Simple, Modern)
Philosophy
- HTML first - Semantic markup does the work
- CSS second - Styling and layout
- 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
- 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
Categories
Install
npx skillscat add alexei-led/claude-code-config/writing-web Install via the SkillsCat registry.