skills.rest
BrunoAMSilva
BrunoAMSilvaCOMMUNITY
Explore all skills by this author →
GitHub

web-coder

Translate web requirements into standards-compliant frontend and backend implementations.

Updated Apr 14, 2026
Search Tags:#performance#html#accessibility#security#javascript#css#web
One-click install
npx skills add https://github.com/BrunoAMSilva/my-config --skill web-coder-brunoamsilva
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-coder
Source: https://github.com/BrunoAMSilva/my-config/tree/main/coding/skills/web-coder
Command: npx skills add https://github.com/BrunoAMSilva/my-config --skill web-coder-brunoamsilva

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Translate ambiguous web requirements into standards-compliant, accessible, and performant implementations across the full web stack so teams can ship reliable web features faster and with fewer regressions.

Core Features & Use Cases

  • Semantic HTML & Markup: Recommend correct element choice, heading hierarchy, and metadata for SEO and accessibility.
  • CSS & Layout: Design responsive layouts with Flexbox, Grid, container queries, and modern CSS patterns.
  • JavaScript & Web APIs: Implement ES6+/TypeScript patterns, module loading, async flows, and browser APIs (Fetch, Service Worker, WebRTC).
  • HTTP, Performance & Security: Advise caching, CDNs, Core Web Vitals improvements, TLS/HSTS, CSP and other security headers.
  • Accessibility & Testing: Provide ARIA guidance, keyboard interaction patterns, WCAG-compliant recommendations, and testing tool suggestions.
  • Architecture & Deployment: Assist with SSR/SSG choices, API design (REST/GraphQL), server configuration, and CDN/edge strategies.
  • Use Case Example: Convert a design and acceptance criteria into a progressive enhancement implementation with accessible components, performance budget, and deployment checklist.

Quick Start

Audit the provided HTML/CSS/JS, return a prioritized list of accessibility and performance fixes, and deliver a small standards-compliant code patch with explanations.

Frequently Asked Questions about web-coder

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

FAQPage Schema
How do I make my web application accessible and compliant with WCAG standards?▼

To make a web application accessible, you need semantic HTML, correct ARIA roles, and keyboard interaction patterns. This involves auditing components against WCAG standards, fixing heading hierarchies, and ensuring screen reader compatibility for all interactive elements.

What's the best way to optimize Core Web Vitals for HTML, CSS, and JavaScript?▼

Optimizing Core Web Vitals involves improving HTML structure, CSS rendering, and JavaScript execution. You can achieve this by applying modern CSS layouts, minimizing render-blocking resources, and implementing efficient ES6+ module loading and async flows.

How do I implement modern CSS layouts using Flexbox and Grid for responsive design?▼

Implementing modern CSS layouts requires using Flexbox for one-dimensional flows and Grid for two-dimensional structures. Applying these patterns alongside container queries ensures your web interfaces adapt smoothly across different screen sizes and devices.

Can I use TypeScript and modern Web APIs like Fetch and Service Worker for progressive enhancement?▼

Yes, you can use TypeScript with modern Web APIs for progressive enhancement. Implementing ES6+ patterns alongside Fetch, Service Worker, and WebRTC allows you to build resilient web features that function reliably across varying network conditions.

What security headers and TLS configurations should I deploy for a web application?▼

Essential web security headers include Content Security Policy (CSP), HSTS, and recommended TLS configurations. Deploying these headers mitigates cross-site scripting and injection attacks while ensuring secure data transmission between clients and servers.

How do I choose between SSR and SSG for my web architecture and API design?▼

Choosing between SSR and SSG depends on your content update frequency and performance targets. SSR suits dynamic data via REST or GraphQL APIs, while SSG optimizes delivery speed and CDN edge caching for static content.

Related Skills

Explore More Software Engineering Skills→
Eigo-Mt-FujiEigo-Mt-Fuji

requirements-analyst

Convert stakeholder needs into testable requirements and SRS documentation.

Community
Advanced
Sir-chawakornSir-chawakorn
9

optimize-core-web-vitals

Diagnose and remediate Core Web Vitals metrics using Lighthouse audits and performance traces.

Community
Advanced
tsuji-tomonoritsuji-tomonori

a11y-ci-gating

Automate accessibility testing in CI/CD pipelines with quality gates.

Community
Advanced
timsvoicetimsvoice

specimin-ui-accessibility

Audit and fix generated UI code for WCAG 2.1 AA compliance.

Community
Advanced