Simple web development with HTML, CSS, JS, and HTMX. Use when writing or reviewing web templates, stylesheets, or scripts.
From web-devnpx claudepluginhub alexei-led/cc-thingz --plugin web-devThis skill is limited to using the following tools:
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.
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.
Guides agent creation for Claude Code plugins with file templates, frontmatter specs (name, description, model), triggering examples, system prompts, and best practices.
<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:root {
--primary: #2563eb;
--spacing: 1rem;
}
.container {
display: grid;
gap: var(--spacing);
}
@media (min-width: 768px) {
.container {
grid-template-columns: 1fr 1fr;
}
}
<!-- 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>
// 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);
}
});
After generating code, validate HTML and check for issues:
npx html-validate . 2>&1 || true