web-coder

Implements standards-compliant web solutions across HTML, CSS, JavaScript, HTTP, and accessibility domains.

1|1|Updated Jan 29, 2026
One-click install
npx skills add https://github.com/ultraviollettnympho/transit-ticket --skill web-coder-ultraviollettnympho
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-coder
Source: https://github.com/ultraviollettnympho/transit-ticket/tree/main/.github/skills/web-coder
Command: npx skills add https://github.com/ultraviollettnympho/transit-ticket --skill web-coder-ultraviollettnympho

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Web development spans dozens of technologies, protocols, and standards, making it hard to apply correct terminology, follow W3C/WHATWG specifications, and implement accessible, performant, secure code consistently across frontend and backend work. ## Core Features & Use Cases - 15 Competency Domains: Covers HTML markup, CSS styling, JavaScript, Web APIs, HTTP networking, security, performance, accessibility, browsers, tooling, data formats, media, architecture patterns, and server infrastructure with dedicated reference files. - Terminology Translation: Converts colloquial requests like "make it responsive" or "fix the cache" into precise technical implementations using media queries or Cache-Control headers. - Structured Workflows: Provides step-by-step processes for implementing features, debugging issues, optimizing Core Web Vitals, and applying security headers. - Use Case: When asked to make a form accessible, the skill consults its accessibility reference and implements proper labels, ARIA attributes, keyboard navigation, and error messaging validated against WCAG 2.1 AA. ## Quick Start Ask the assistant to implement, debug, or optimize any web feature such as "make this form WCAG compliant" or "fix this CORS error" and it will apply the relevant standards and reference material.

Frequently Asked Questions about web-coder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a web form accessible and WCAG compliant?

Add proper label elements associated with inputs, include ARIA attributes like aria-invalid and aria-describedby for errors, ensure keyboard navigation works, and provide visible focus indicators. Validate against WCAG 2.1 Level AA using tools like axe DevTools or Lighthouse.

How to fix CORS errors when calling an API?

CORS errors occur when a server blocks cross-origin requests. Configure the server to send appropriate Access-Control-Allow-Origin headers, handle preflight OPTIONS requests, and ensure credentials settings match between client fetch calls and server configuration.

What is the difference between Flexbox and CSS Grid?

Flexbox is a one-dimensional layout system best for aligning items along a single row or column. CSS Grid is two-dimensional, giving precise control over rows and columns simultaneously, making it better for full page layouts.

Does this skill cover backend and server infrastructure topics?

Yes, it includes references for HTTP networking, security headers, authentication, servers, DNS, CDN, and deployment strategies alongside frontend topics. It addresses terminology differently depending on frontend, backend, or DevOps context.

Why is my website scoring poorly on Core Web Vitals?

Poor scores typically come from unoptimized images, render-blocking resources, or layout shifts from elements without dimensions. Apply lazy loading, minification, compression, and explicit width/height attributes, then measure improvements with Lighthouse.