New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Web Coder

by boshi-xixixi in boshi-xixixi/TraeSkill

Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards.

MITAuto-check passedFrontend & Design

Install Web Coder

skills CLI
$ npx skills add boshi-xixixi/TraeSkill --skill web-coder -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install boshi-xixixi/TraeSkill web-coder --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/boshi-xixixi/TraeSkill.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.trae/Skills/.agents/skills/web-coder .claude/skills/web-coder && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
web-coder
GitHub stars
274
Used in
1 other repo
Token cost
~5.2k tokens
SKILL.md length
1,753 words
Files
17 (incl. references)
Skills in repo
16
Repo updated
First seen
Licence
MIT

At a glance

Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards.

  • Works in 12 steps: HTML & Markup → CSS & Styling → JavaScript & Programming → …
  • Working with HTML
  • SKILL.md covers When to Use This Skill, Prerequisites, Core Competencies and Working with Web Terminology, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Web Coder is an agent skill from boshi-xixixi/TraeSkill. Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards. Use when working with HTML, CSS, JavaScript, web APIs, HTTP/HTTPS, web security, performance optimization, accessibility, or any web/internet concepts. Specializes in translating web terminology accurately and implementing modern web standards across frontend and backend development.

Its SKILL.md is about 5.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 17 other files, including reference files (for example `references/accessibility.md`, `references/architecture-patterns.md` and `references/browsers-engines.md`).

It sits in Frontend & Design, covering Translation, Accessibility and Web application vulnerabilities. It works with JavaScript. The repository describes itself as: 为 Trae IDE 打造的全流程标准化 AI 开发技能库，内置调度分发与多角色研发技能，一键导入规范 AI 编码工作流 🚀. The licence is MIT.

When your agent uses it

  • Working with HTML
  • Performance optimization
  • Any web/internet concepts

Example prompts

  • “/web-coder”

Workflow steps

12 steps, taken from the step headings in SKILL.md.

  1. HTML & Markup
  2. CSS & Styling
  3. JavaScript & Programming
  4. Web APIs & DOM
  5. HTTP & Networking
  6. Security & Authentication
  7. Performance & Optimization
  8. Accessibility
  9. Web Protocols & Standards
  10. Browsers & Engines
  11. Development Tools
  12. Data Formats & Encoding

What it can do on your machine

Read from SKILL.md and the folder at commit 9cf38e6. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript, html and css).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Web Coder loads about 5.2k tokens when it runs, and up to ~59k if it reads all its reference files. Until then it costs about 101 tokens; SKILL.md has 1,753 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~101
When it runs · the whole SKILL.md, loaded when a task matches
~5.2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~59k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from boshi-xixixi/TraeSkill at commit 9cf38e6, republished under its MIT licence (© boshi-xixixi). 1,753 words, ~5,245 tokens.

Download SKILL.mdSave it as .claude/skills/web-coder/SKILL.md (or your agent's skills folder). This skill also uses 16 other files; get the full folder from GitHub.
name
web-coder
description
Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards. Use when working with HTML, CSS, JavaScript, web APIs, HTTP/HTTPS, web security, performance optimization, accessibility, or any web/internet concepts. Specializes in translating web terminology accurately and implementing modern web standards across frontend and backend development.

Web Coder Skill

Transform into an expert 10x web development engineer with deep knowledge of web technologies, internet protocols, and industry standards. This skill enables you to communicate effectively about web concepts, implement best practices, and navigate the complex landscape of modern web development with precision and expertise.

Like a seasoned web architect who speaks fluently across all layers of the web stack—from HTML semantics to TCP handshakes—you can translate requirements into standards-compliant, performant, and accessible web solutions.

When to Use This Skill

  • Working with HTML, CSS, JavaScript, or any web markup/styling/scripting
  • Implementing web APIs (DOM, Fetch, WebRTC, WebSockets, etc.)
  • Discussing or implementing HTTP/HTTPS protocols and networking concepts
  • Building accessible web applications (ARIA, WCAG compliance)
  • Optimizing web performance (caching, lazy loading, code splitting)
  • Implementing web security measures (CORS, CSP, authentication)
  • Working with web standards and specifications (W3C, WHATWG)
  • Debugging browser-specific issues or cross-browser compatibility
  • Setting up web servers, CDNs, or infrastructure
  • Discussing web development terminology with collaborators
  • Converting web-related requirements or descriptions into code

Prerequisites

  • Basic understanding of at least one area of web development
  • Access to web development tools (browser, editor, terminal)
  • Understanding that web development spans multiple disciplines

Core Competencies

As a web coder, you possess expert knowledge across 15 key domains:

1. HTML & Markup

Semantic HTML5, document structure, elements, attributes, accessibility tree, void elements, metadata, and proper markup patterns.

Key Concepts: Semantic elements, document structure, forms, metadata Reference: HTML & Markup Reference

2. CSS & Styling

Cascading stylesheets, selectors, properties, layout systems (Flexbox, Grid), responsive design, preprocessors, and modern CSS features.

Key Concepts: Selectors, box model, layouts, responsiveness, animations Reference: CSS & Styling Reference

3. JavaScript & Programming

ES6+, TypeScript, data types, functions, classes, async/await, closures, prototypes, and modern JavaScript patterns.

Key Concepts: Types, control flow, functions, async patterns, modules Reference: JavaScript & Programming Reference

4. Web APIs & DOM

Document Object Model, Browser APIs, Web Storage, Service Workers, WebRTC, WebGL, and modern web platform features.

Key Concepts: DOM manipulation, event handling, storage, communication Reference: Web APIs & DOM Reference

5. HTTP & Networking

HTTP/1.1, HTTP/2, HTTP/3, request/response cycle, headers, status codes, REST, caching, and network fundamentals.

Key Concepts: Request methods, headers, status codes, caching strategies Reference: HTTP & Networking Reference

6. Security & Authentication

HTTPS, TLS, authentication, authorization, CORS, CSP, XSS prevention, CSRF protection, and secure coding practices.

Key Concepts: Encryption, certificates, same-origin policy, secure headers Reference: Security & Authentication Reference

7. Performance & Optimization

Load times, rendering performance, Core Web Vitals, lazy loading, code splitting, minification, and performance budgets.

Key Concepts: LCP, FID, CLS, caching, compression, optimization techniques Reference: Performance & Optimization Reference

8. Accessibility

WCAG guidelines, ARIA roles and attributes, semantic HTML, screen reader compatibility, keyboard navigation, and inclusive design.

Key Concepts: ARIA, semantic markup, keyboard access, screen readers Reference: Accessibility Reference

9. Web Protocols & Standards

W3C specifications, WHATWG standards, ECMAScript versions, browser APIs, and web platform features.

Key Concepts: Standards organizations, specifications, compatibility Reference: Web Protocols & Standards Reference

10. Browsers & Engines

Chrome (Blink), Firefox (Gecko), Safari (WebKit), Edge, rendering engines, browser dev tools, and cross-browser compatibility.

Key Concepts: Rendering engines, browser differences, dev tools Reference: Browsers & Engines Reference

11. Development Tools

Version control (Git), IDEs, build tools, package managers, testing frameworks, CI/CD, and development workflows.

Key Concepts: Git, npm, webpack, testing, debugging, automation Reference: Development Tools Reference

12. Data Formats & Encoding

JSON, XML, Base64, character encodings (UTF-8, UTF-16), MIME types, and data serialization.

Key Concepts: JSON, character encoding, data formats, serialization Reference: Data Formats & Encoding Reference

13. Media & Graphics

Canvas, SVG, WebGL, image formats (JPEG, PNG, WebP), video/audio elements, and multimedia handling.

Key Concepts: Canvas API, SVG, image optimization, video/audio Reference: Media & Graphics Reference

14. Architecture & Patterns

MVC, SPA, SSR, CSR, PWA, JAMstack, microservices, and web application architecture patterns.

Key Concepts: Design patterns, architecture styles, rendering strategies Reference: Architecture & Patterns Reference

15. Servers & Infrastructure

Web servers, CDN, DNS, proxies, load balancing, SSL/TLS certificates, and deployment strategies.

Key Concepts: Server configuration, DNS, CDN, hosting, deployment Reference: Servers & Infrastructure Reference

Working with Web Terminology

Accurate Translation

When collaborators use web terminology, ensure accurate interpretation:

Assess Terminology Accuracy
  1. High confidence terms: Standard terms like "API", "DOM", "HTTP" - use as stated
  2. Ambiguous terms: Terms with multiple meanings (e.g., "Block" - CSS box model vs code block)
  3. Incorrect terms: Misused terminology - translate to correct equivalent
  4. Outdated terms: Legacy terms - update to modern equivalents
Common Terminology Issues
Collaborator SaysLikely MeansCorrect Implementation
"AJAX call"Asynchronous HTTP requestUse Fetch API or XMLHttpRequest
"Make it responsive"Mobile-friendly layoutUse media queries and responsive units
"Add SSL"Enable HTTPSConfigure TLS certificate
"Fix the cache"Update cache strategyAdjust Cache-Control headers
"Speed up the site"Improve performanceOptimize assets, lazy load, minify
Context-Aware Responses

Different contexts require different interpretations:

Frontend Context:

  • "Performance" → Client-side metrics (FCP, LCP, CLS)
  • "State" → Application state management (React, Vue, etc.)
  • "Routing" → Client-side routing (SPA navigation)

Backend Context:

  • "Performance" → Server response time, throughput
  • "State" → Session management, database state
  • "Routing" → Server-side route handling

DevOps Context:

  • "Performance" → Infrastructure scaling, load times
  • "Cache" → CDN caching, server-side caching
  • "Security" → SSL/TLS, firewalls, authentication

Step-by-Step Workflows

Workflow 1: Implement Web Feature from Requirements

When given web-related requirements:

  1. Identify the domain - Which of the 15 competency areas does this fall under?
  2. Consult relevant reference - Read the appropriate reference file for terminology and best practices
  3. Translate terminology - Convert colloquial terms to technical equivalents
  4. Apply web standards - Use W3C/WHATWG specifications as guidance
  5. Implement with best practices - Follow modern patterns and conventions
  6. Validate against standards - Check accessibility, performance, security
Example: "Make the form accessible"
  1. Domain: Accessibility (Competency #8)
  2. Reference: Accessibility Reference
  3. Translate: "Accessible" = WCAG compliant, screen reader friendly, keyboard navigable
  4. Standards: WCAG 2.1 Level AA
  5. Implement:
    • Add proper <label> elements
    • Include ARIA attributes where needed
    • Ensure keyboard navigation
    • Provide error messaging
    • Test with screen readers
  6. Validate: Run accessibility audit tools
Workflow 2: Debug Web Issues

When encountering web-related problems:

  1. Categorize the issue - Which layer (HTML, CSS, JS, Network, etc.)?
  2. Use browser dev tools - Inspect Elements, Network, Console, Performance tabs
  3. Check browser compatibility - Is this a cross-browser issue?
  4. Review relevant standards - What does the spec say should happen?
  5. Test hypothesis - Does fixing the root cause resolve the issue?
  6. Implement solution - Apply standards-compliant fix
Show full SKILL.md (730 more words)Show less
Workflow 3: Optimize Web Performance

When asked to improve performance:

  1. Measure baseline - Use Lighthouse, WebPageTest, or performance APIs
  2. Identify bottlenecks - Network, rendering, JavaScript execution?
  3. Apply targeted optimizations:
    • Network: Compression, CDN, caching headers
    • Rendering: Critical CSS, lazy loading, image optimization
    • JavaScript: Code splitting, tree shaking, minification
  4. Measure improvement - Compare metrics to baseline
  5. Iterate - Continue optimizing until performance budgets are met
Workflow 4: Implement Web Security

When implementing security features:

  1. Identify threats - XSS, CSRF, injection, MitM, etc.
  2. Apply defense in depth:
    • Transport: Use HTTPS with TLS 1.3
    • Headers: Set CSP, HSTS, X-Frame-Options
    • Input: Validate and sanitize all user input
    • Authentication: Use secure session management
    • Authorization: Implement proper access controls
  3. Test security - Use security scanning tools
  4. Monitor - Set up logging and alerting

Best Practices

Do's
  • ✅ Use semantic HTML elements (<article>, <nav>, <main>)
  • ✅ Follow W3C and WHATWG specifications
  • ✅ Implement progressive enhancement
  • ✅ Test across multiple browsers and devices
  • ✅ Optimize for Core Web Vitals (LCP, FID, CLS)
  • ✅ Make accessibility a priority from the start
  • ✅ Use modern JavaScript features (ES6+)
  • ✅ Implement proper error handling
  • ✅ Minify and compress production assets
  • ✅ Use HTTPS everywhere
  • ✅ Follow REST principles for APIs
  • ✅ Implement proper caching strategies
Don'ts
  • ❌ Use tables for layout (use CSS Grid/Flexbox)
  • ❌ Ignore accessibility requirements
  • ❌ Skip cross-browser testing
  • ❌ Serve unoptimized images
  • ❌ Mix HTTP and HTTPS content
  • ❌ Store sensitive data in localStorage
  • ❌ Ignore performance budgets
  • ❌ Use inline styles extensively
  • ❌ Forget to validate user input
  • ❌ Implement authentication without security review
  • ❌ Use deprecated APIs or features
  • ❌ Ignore browser console warnings

Common Web Development Patterns

Pattern 1: Progressive Enhancement

Start with basic HTML, enhance with CSS, add JavaScript functionality:

html
<!-- Base HTML (works without CSS/JS) -->
<form action="/submit" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Submit</button>
</form>
css
/* Enhanced styling */
form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
javascript
// Enhanced interactivity
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  await fetch('/api/submit', { /* ... */ });
});
Pattern 2: Responsive Design

Mobile-first approach with progressive enhancement:

css
/* Mobile-first base styles */
.container {
  padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}
Pattern 3: Accessible Component

Keyboard navigation, ARIA, semantic HTML:

html
<nav aria-label="Main navigation">
  <ul role="menubar">
    <li role="none">
      <a href="/" role="menuitem">Home</a>
    </li>
    <li role="none">
      <button
        role="menuitem"
        aria-expanded="false"
        aria-haspopup="true"
      >
        Products
      </button>
    </li>
  </ul>
</nav>
Pattern 4: Performance Optimization

Lazy loading, code splitting, and efficient loading:

html
<!-- Lazy load images -->
<img
  src="placeholder.jpg"
  data-src="high-res.jpg"
  loading="lazy"
  alt="Description"
>

<!-- Preload critical resources -->
<link rel="preload" href="critical.css" as="style">
<link rel="preconnect" href="https://api.example.com">

<!-- Async/defer non-critical scripts -->
<script src="analytics.js" async></script>
<script src="app.js" defer></script>

Troubleshooting

IssueLikely CauseSolution
CORS errorCross-origin request blockedConfigure CORS headers on server
Layout shiftImages without dimensionsAdd width/height attributes
Slow load timeUnoptimized assetsMinify, compress, lazy load
Accessibility audit failsMissing ARIA or semantic HTMLAdd labels, roles, and semantic elements
Mixed content warningHTTP resources on HTTPS pageUpdate all resources to HTTPS
JavaScript not workingBrowser compatibility issueUse polyfills or transpile with Babel
CSS not applyingSpecificity or cascade issueCheck selector specificity and order
Form not submittingValidation or event handling issueCheck validation rules and event listeners
API request failingNetwork, CORS, or auth issueCheck Network tab, CORS config, auth headers
Cache not updatingAggressive cachingImplement cache-busting or adjust headers

Advanced Techniques

1. Performance Monitoring

Implement Real User Monitoring (RUM):

javascript
// Measure Core Web Vitals
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('Performance metric:', {
      name: entry.name,
      value: entry.value,
      rating: entry.rating
    });
  }
});

observer.observe({ entryTypes: ['largest-contentful-paint', 'first-input', 'layout-shift'] });
2. Advanced Accessibility

Create custom accessible components:

javascript
class AccessibleTabs {
  constructor(element) {
    this.tablist = element.querySelector('[role="tablist"]');
    this.tabs = Array.from(this.tablist.querySelectorAll('[role="tab"]'));
    this.panels = Array.from(element.querySelectorAll('[role="tabpanel"]'));
    
    this.tabs.forEach((tab, index) => {
      tab.addEventListener('click', () => this.selectTab(index));
      tab.addEventListener('keydown', (e) => this.handleKeydown(e, index));
    });
  }
  
  selectTab(index) {
    // Deselect all tabs
    this.tabs.forEach(tab => {
      tab.setAttribute('aria-selected', 'false');
      tab.setAttribute('tabindex', '-1');
    });
    this.panels.forEach(panel => panel.hidden = true);
    
    // Select target tab
    this.tabs[index].setAttribute('aria-selected', 'true');
    this.tabs[index].setAttribute('tabindex', '0');
    this.tabs[index].focus();
    this.panels[index].hidden = false;
  }
  
  handleKeydown(event, index) {
    const { key } = event;
    let newIndex = index;
    
    if (key === 'ArrowRight') newIndex = (index + 1) % this.tabs.length;
    if (key === 'ArrowLeft') newIndex = (index - 1 + this.tabs.length) % this.tabs.length;
    if (key === 'Home') newIndex = 0;
    if (key === 'End') newIndex = this.tabs.length - 1;
    
    if (newIndex !== index) {
      event.preventDefault();
      this.selectTab(newIndex);
    }
  }
}
3. Modern CSS Techniques

Use modern CSS features for layouts:

css
/* Container queries (modern browsers) */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

/* CSS Grid with subgrid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.grid-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

/* CSS custom properties with fallbacks */
:root {
  --primary-color: #007bff;
  --spacing: 1rem;
}

.element {
  color: var(--primary-color, blue);
  padding: var(--spacing, 16px);
}
4. Security Headers

Implement comprehensive security headers:

javascript
// Express.js example
app.use((req, res, next) => {
  // Content Security Policy
  res.setHeader('Content-Security-Policy', 
    "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'");
  
  // Strict Transport Security
  res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains; preload');
  
  // XSS Protection
  res.setHeader('X-Content-Type-Options', 'nosniff');
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('X-XSS-Protection', '1; mode=block');
  
  // Referrer Policy
  res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
  
  next();
});

Reference Files

This skill includes 15 comprehensive reference files covering all aspects of web development:

  1. HTML & Markup - Semantic HTML, elements, attributes
  2. CSS & Styling - Selectors, layouts, responsive design
  3. JavaScript & Programming - ES6+, types, patterns
  4. Web APIs & DOM - Browser APIs, DOM manipulation
  5. HTTP & Networking - Protocols, headers, REST
  6. Security & Authentication - HTTPS, auth, security
  7. Performance & Optimization - Core Web Vitals, optimization
  8. Accessibility - WCAG, ARIA, inclusive design
  9. Web Protocols & Standards - W3C, WHATWG, specs
  10. Browsers & Engines - Rendering engines, compatibility
  11. Development Tools - Git, build tools, testing
  12. Data Formats & Encoding - JSON, encodings, formats
  13. Media & Graphics - Canvas, SVG, images, video
  14. Architecture & Patterns - MVC, SPA, SSR, patterns
  15. Servers & Infrastructure - Servers, CDN, deployment

Validation Checklist

Before considering web development complete:

  • HTML validates without errors (W3C validator)
  • CSS follows best practices and validates
  • JavaScript has no console errors
  • Accessibility audit passes (Lighthouse, axe)
  • Performance meets Core Web Vitals targets
  • Security headers are properly configured
  • Cross-browser testing completed
  • Responsive design works on all breakpoints
  • SEO meta tags are present and correct
  • Forms have proper validation and error handling
  • Images are optimized and have alt text
  • HTTPS is enforced
  • Caching strategy is implemented
  • Error handling covers edge cases
  • Code is minified and compressed for production

Summary

The Web Coder skill transforms you into an expert 10x engineer with comprehensive knowledge across all aspects of web development. By leveraging deep understanding of web standards, protocols, and best practices—organized into 15 core competencies—you can accurately translate requirements, implement modern web solutions, and communicate effectively about web concepts with collaborators of any expertise level.

Remember: Web development is multidisciplinary. Master the fundamentals, follow standards, prioritize accessibility and performance, and always test across browsers and devices.

© boshi-xixixi, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 16 other files (references) in .trae/Skills/.agents/skills/web-coder of boshi-xixixi/TraeSkill.

  • SKILL.md
  • references/accessibility.md
  • references/architecture-patterns.md
  • references/browsers-engines.md
  • references/css-styling.md
  • references/data-formats-encoding.md
  • references/development-tools.md
  • references/glossary.md
  • references/html-markup.md
  • references/http-networking.md
  • references/javascript-programming.md
  • references/media-graphics.md
  • references/performance-optimization.md
  • references/security-authentication.md
  • references/servers-infrastructure.md
  • references/web-apis-dom.md
  • references/web-protocols-standards.md

Open the folder on GitHubat commit 9cf38e6

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in boshi-xixixi/TraeSkill, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Web Coder next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Web Coder compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Web Coder this skillboshi-xixixi/TraeSkill2741 repos~5.2kAutomated safety check: PassMIT
Frontend Design Principlespretend1111/claude-desktop-app4941 repos~824Automated safety check: PassCustom licence
Shopify Liquid Themesbenjaminsehl/liquid-skills120—~2.9kAutomated safety check: PassNone
Create ComponentOrange-OpenSource/Orange-Boosted-Bootstrap222—~648Automated safety check: PassMIT
Salesforce Component Standardsgithub/awesome-copilot40k1 repos~2.4kAutomated safety check: PassMIT
Experience Lwc Security Validateforcedotcom/sf-skills1.1k—~2.6kAutomated safety check: PassApache-2.0

Similar skills

  • Frontend Design Principles

    pretend1111/claude-desktop-app

    Gives practical design rules for polished HTML, CSS and JavaScript interfaces and browser games, covering spacing, type, color, components, motion and responsive breakpoints.

    494 GitHub starsUsed in 1 repo~824 tokens
    Frontend & DesignAuto-check passed

  • Shopify Liquid Themes

    benjaminsehl/liquid-skills

    Generate Shopify Liquid theme code (sections, blocks, snippets) with correct schema JSON, LiquidDoc headers, translation keys, and CSS/JS patterns.

    120 GitHub stars~2.9k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Create Component

    Orange-OpenSource/Orange-Boosted-Bootstrap

    Step-by-step workflow for creating a new SCSS and/or JavaScript component in OUDS Web.

    222 GitHub stars~648 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Salesforce Component Standards

    github/awesome-copilot

    Official

    Quality standards for Salesforce Lightning Web Components (LWC), Aura components, and Visualforce pages.

    40k GitHub starsUsed in 1 repo~2.4k tokens
    Frontend & DesignAuto-check passed

  • Experience Lwc Security Validate

    forcedotcom/sf-skills

    Use this skill as THE specialized Lightning Web Security (LWS) validator for a Lightning Web Component bundle (.js, .ts, .html, .css, .js-meta.xml) — the canonical LWS/Product-Security review for…

    1.1k GitHub stars~2.6k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • MCP Development

    coollabsio/coolify

    A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.

    63k GitHub starsUsed in 1 repo~949 tokens
    Frontend & DesignAuto-check passed

More from boshi-xixixi/TraeSkill

All 16 skills in this repo

  • AI Team Orchestration

    boshi-xixixi/TraeSkill

    Bootstrap and run a multi-agent AI development team. An agent skill from boshi-xixixi/TraeSkill.

    274 GitHub stars~1.4k tokensUpdated 4 mo ago
    Auto-check passed

  • Arize Instrumentation

    boshi-xixixi/TraeSkill

    INVOKE THIS SKILL when adding Arize AX tracing or observability to an app for the first time, or when the user wants to instrument their LLM app or get started with LLM observability.

    274 GitHub stars~5.1k tokensUpdated 4 mo ago
    Auto-check: notes

  • Dotnet MCP Builder

    boshi-xixixi/TraeSkill

    Build Model Context Protocol (MCP) servers in C/.NET against the current ModelContextProtocol 1.x NuGet packages.

    274 GitHub stars~1.7k tokensUpdated 4 mo ago
    Auto-check passed

  • Skill Creator

    boshi-xixixi/TraeSkill

    当用户需要创建新 Skill 或更新现有 Skill 时使用。此 Skill 提供技能创建的完整工作流指导，包括需求分析、编写规范、工程化构建、质量评估和迭代优化。

    274 GitHub stars~3.9k tokensUpdated 4 mo ago
    Auto-check passed

  • Trae Project Setup

    boshi-xixixi/TraeSkill

    Trae 项目规范化配置专家。用于快速初始化 Trae 项目配置文件、生成项目规则、用户偏好设置和 Skill 模板。当用户需要：(1) 初始化新项目的 Trae 配置 (2) 生成 .trae 目录结构 (3) 创建 USERPREFERENCES.md 用户偏好文件 (4) 创建 projectrules.md 项目规则文件 (5) 创建新的 Skill 模板 时使用此 Skill。

    274 GitHub stars~708 tokensUpdated 4 mo ago
    Auto-check: notes

  • Winapp CLI

    boshi-xixixi/TraeSkill

    Windows App Development CLI (winapp) for building, packaging, signing, debugging, and UI-automating Windows applications.

    274 GitHub stars~1.9k tokensUpdated 4 mo ago
    Auto-check passed

Works with

Categories

Questions about Web Coder

What does Web Coder do?

Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards. Web Coder is an agent skill from boshi-xixixi/TraeSkill. Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards.

When should I use Web Coder?

Web Coder fits situations like: working with HTML; performance optimization; any web/internet concepts.

How do I install Web Coder in Claude Code?

Run `npx skills add boshi-xixixi/TraeSkill --skill web-coder -a claude-code`. Or copy the skill folder (.trae/Skills/.agents/skills/web-coder in boshi-xixixi/TraeSkill) into .claude/skills/web-coder in your project. Claude Code loads it when a task matches its description.

How do I install Web Coder in Codex?

Run `npx skills add boshi-xixixi/TraeSkill --skill web-coder -a codex`. Or copy the skill folder (.trae/Skills/.agents/skills/web-coder in boshi-xixixi/TraeSkill) into .agents/skills/web-coder in your project. Codex loads it when a task matches its description.

Can I use Web Coder in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add boshi-xixixi/TraeSkill --skill web-coder -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/web-coder, .gemini/skills/web-coder, .github/skills/web-coder and .opencode/skills/web-coder in your project.

What does Web Coder need to run?

SKILL.md names no scripts, command-line tools or credentials: Web Coder is instructions for the agent only.

Does Web Coder access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Web Coder safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Web Coder use?

Web Coder is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Web Coder use?

About 5.2k tokens (SKILL.md is roughly 21k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 54k tokens, read only when the agent opens those files.

What are the alternatives to Web Coder?

Skills that share tags, products or a category with Web Coder: Frontend Design Principles (pretend1111/claude-desktop-app, 494 stars), Shopify Liquid Themes (benjaminsehl/liquid-skills, 120 stars), Create Component (Orange-OpenSource/Orange-Boosted-Bootstrap, 222 stars) and Salesforce Component Standards (github/awesome-copilot, 40k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Web Coder?

boshi-xixixi (a GitHub user) maintains it in boshi-xixixi/TraeSkill, which has 274 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on May 12, 2026.

Source: boshi-xixixi/TraeSkill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.