Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

alexei-led/writing-web

Name: writing-web
Author: alexei-led

plugins/web-dev/skills/writing-web/SKILL.md

npx skillsauth add alexei-led/claude-code-config writing-web

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

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

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.

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.

20 stars

development

Updated May 10, 2026

$ install --global

skillsauth

npx skillsauth add alexei-led/claude-code-config writing-web

Install 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.

Scanners Passed

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

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/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. NOT for generic implementation planning that does not read or write `.spec/` files.

35SKILL.mdUpdated Jul 18, 2026

alexei-led/writing-web

development

VerifiedTrustedCommunity

Simple web development with HTML, CSS, JS, and HTMX. Use 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.

35SKILL.mdUpdated Jul 18, 2026

alexei-led/writing-web

alexei-led/writing-typescript

tools

VerifiedTrustedCommunity

Idiomatic TypeScript development. Use when writing TypeScript code, Node.js services, React apps, or TypeScript design advice. Emphasizes strict typing, boundary validation, composition, fast feedback, behavior tests, and project-configured tooling. NOT for Go, Python, Rust, plain HTML/CSS/JS, or server-rendered templates (use writing-web).

35SKILL.mdUpdated Jul 18, 2026

alexei-led/writing-typescript

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, CI `run:` shell bodies, or command-runner recipes. Emphasizes portability, quoting, safe filesystem/process handling, non-TUI CLI tools, ShellCheck, shfmt, Bats, and ShellSpec. NOT for Python, Rust, TypeScript, Go, web code, or GitHub Actions workflow/job/permissions semantics; use operating-infra.

35SKILL.mdUpdated Jul 18, 2026

alexei-led/writing-shell

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/alexei-led/claude-code-config.git

# Copy into Claude Code skills folder (global)
cp -r claude-code-config/plugins/web-dev/skills/writing-web ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

alexei-led/claude-code-config

20 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT