browser-automation
Browser automation for rendered UI exploration, validation, screenshots,
@alexei-ledInstall SkillDevelopment
Skill
/writing-web
Simple web development with HTML, CSS, JS, and HTMX. Use when working
Claude Code
$ npx -y skills add alexei-led/cc-thingz --skill writing-web --agent claude-code
Codex
$ npx skills add alexei-led/cc-thingz --skill writing-web -a codex -y
Cursor
$ npx skills add alexei-led/cc-thingz --skill writing-web -a cursor -y
Gemini CLI
$ npx skills add alexei-led/cc-thingz --skill writing-web -a gemini-cli -y
GitHub Copilot
$ npx skills add alexei-led/cc-thingz --skill writing-web -a github-copilot -y
OpenCode
$ npx skills add alexei-led/cc-thingz --skill writing-web -a opencode -y
Windsurf
$ npx skills add alexei-led/cc-thingz --skill writing-web -a windsurf -y
SKILL.md
writing-web.SKILL.mddescription: 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.
name: writing-web
Web Development
Follow the existing template language, asset pipeline, and conventions. Add a dependency, build step, or framework only when the project already uses it or the user approves; requests that need a SPA framework belong to writing-typescript.
HTML and CSS
- Semantic HTML first; HTMX or JS only where native behavior falls short. `button` for actions, `a` for navigation, `details`/`summary` and `dialog` before custom widgets.
- Label every control; group with `fieldset`/`legend`; use native input types, validation, and `autocomplete`. Add ARIA only when HTML cannot express the state.
- Mobile-first, fluid CSS: `gap`, logical properties, `rem`/`clamp`. Design tokens in custom properties; one-off values stay local.
- `:focus-visible` styles, and animations respect `prefers-reduced-motion`. `!important` only at integration boundaries.
HTMX
- Use HTMX when the server owns the state or the fragment. Set explicit `hx-target` and `hx-swap`, and return fragments shaped for that target.
- Keep the form's `action` and `method` so it still works without JS.
- Send CSRF and auth headers through the project's existing mechanism.
- Request not firing: check trigger, target, swap, response status, and CSRF/auth headers before adding a JS fallback.
JavaScript
- Small scoped modules, event delegation for dynamic content, no new globals.
- Render untrusted data with `textContent`, never `innerHTML`, unless the project sanitizer marks it trusted.
- Clean up timers, observers, and listeners on elements that can be swapped out.
Checks
UI changes need a look at mobile and desktop widths and keyboard navigation. Use browser-automation for rendered checks, screenshots, and interaction tests.
Done when the relevant build/test/lint checks pass on what you changed, or you name each check that did not run and why.
Read more
description: 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. name: writing-web
Web Development
Follow the existing template language, asset pipeline, and conventions. Add a dependency, build step, or framework only when the project already uses it or the user approves; requests that need a SPA framework belong to writing-typescript.
HTML and CSS
- Semantic HTML first; HTMX or JS only where native behavior falls short. `button` for actions, `a` for navigation, `details`/`summary` and `dialog` before custom widgets.
- Label every control; group with `fieldset`/`legend`; use native input types, validation, and `autocomplete`. Add ARIA only when HTML cannot express the state.
- Mobile-first, fluid CSS: `gap`, logical properties, `rem`/`clamp`. Design tokens in custom properties; one-off values stay local.
- `:focus-visible` styles, and animations respect `prefers-reduced-motion`. `!important` only at integration boundaries.
HTMX
- Use HTMX when the server owns the state or the fragment. Set explicit `hx-target` and `hx-swap`, and return fragments shaped for that target.
- Keep the form's `action` and `method` so it still works without JS.
- Send CSRF and auth headers through the project's existing mechanism.
- Request not firing: check trigger, target, swap, response status, and CSRF/auth headers before adding a JS fallback.
JavaScript
- Small scoped modules, event delegation for dynamic content, no new globals.
- Render untrusted data with `textContent`, never `innerHTML`, unless the project sanitizer marks it trusted.
- Clean up timers, observers, and listeners on elements that can be swapped out.
Checks
UI changes need a look at mobile and desktop widths and keyboard navigation. Use browser-automation for rendered checks, screenshots, and interaction tests.
Done when the relevant build/test/lint checks pass on what you changed, or you name each check that did not run and why.
Stats
38
Stars
5
Forks
Active
Maintenance
Python
Language
MIT
License
Last commit
Created
Ships withcc-thingz
Portable skills, agents, hooks, and Pi-native extensions for Claude Code, Codex CLI, GitHub Copilot, Cursor, Grok, and Pi. Gemini is retired.
3828 skills6 agents
Stars on GitHub
Momentum
- stars in total
- 38
Other skills on cc-thingz.
@alexei-ledInstall Skillcommitting-code
Create normal git commits with logical grouping. Use when committing,
@alexei-ledInstall Skilldocumenting-code
Write, rewrite, or update project docs from implementation facts - README
@alexei-ledInstall Skillfixing-code
Fix code defects with a reproducible feedback loop, root-cause diagnosis,
@alexei-ledInstall Skillimproving-tests
Improve test design, speed, and coverage with behavior-focused tests,
@alexei-ledInstall Skillreleasing-code
Prepare, publish, or repair a software release and write its release notes. Use for cutting a versioned release or editing…
@alexei-ledInstall SkillMore skills from other plugins.
Auto-invoked
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
@obraInstall Skillask-matt
Ask which skill or flow fits your situation. A router over the skills in this repo.
@mattpocockInstall SkillAuto-invoked
Questions about writing-web.
- Which coding agents can use writing-web?
- writing-web installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.