Skill

writing-web

Simple web development with HTML, CSS, JS, and HTMX. Use when writing or reviewing web templates, stylesheets, or scripts.

From web-dev

Install

Run in your terminal

npx claudepluginhub alexei-led/cc-thingz --plugin web-dev

Tool Access

This skill is limited to using the following tools:

ReadBashGrepGlob

Skill Content

Similar Skills

skill-lookup

Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.

prompts.chat

157.5k

prompt-lookup

Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.

prompts.chat

157.5k

Agent Development

6 files

Guides agent creation for Claude Code plugins with file templates, frontmatter specs (name, description, model), triggering examples, system prompts, and best practices.

plugin-dev

83.2k

Stats

Parent Repo Stars14

Parent Repo Forks1

Last CommitApr 1, 2026

Actions

View Source View Plugin View on GitHub View README

Patterns

Semantic HTML

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)

 <div hx-get="/items" hx-trigger="load"></div>  <form hx-post="/create" hx-target="#result"> <input name="title" required /> <button>Create</button> </form>  <button hx-delete="/item/123" hx-confirm="Delete?">Delete</button>  <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); } });

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