Skills

writing-web

Installation
SKILL.md

Web Development (Simple, Modern)

Philosophy

  1. HTML first - Semantic markup does the work
  2. CSS second - Styling and layout
  3. HTMX third - Server-driven interactivity
  4. 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>&copy; 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

Verify Generated Code

After generating code, validate HTML and check for issues:

npx html-validate . 2>&1 || true
Related skills

More from alexei-led/cc-thingz

Installs
2
Repository
alexei-led/cc-thingz
GitHub Stars
19
First Seen
Apr 14, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass