web-coder
Automates web UI implementation with a focus on type safety, accessibility, and performance.
Install
mkdir -p .claude/skills/web-coder && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/10260" && unzip -o skill.zip -d .claude/skills/web-coder && rm skill.zipInstalls to .claude/skills/web-coder
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use when: implementing frontend web apps with HTML, CSS, TypeScript, React, accessibility, responsive layout, or performance concerns.Key capabilities
- →Implement React components with TypeScript
- →Apply mobile-first CSS layouts
- →Ensure accessible UI with proper labels and focus states
- →Maintain contrast and responsive design
- →Perform build verification
How it works
The tool applies frontend implementation standards including type safety, mobile-first CSS, and accessibility patterns. It requires verification via build commands and browser checks.
Inputs & outputs
When to use web-coder
- →Build responsive UI components
- →Implement accessible React interfaces
- →Improve frontend performance
About this skill
フロントエンド実装スキル
github/awesome-copilot の web-coder を参考にした、Webフロントエンド実装向けの軽量スキルです。
- 既存の構成、命名、スタイル方針を先に確認する
- React + TypeScriptでは型安全にし、不要な
anyや大きな抽象化を避ける - CSSはモバイルファーストで、はみ出し、折り返し、タップしやすさを優先する
- UIは意味のあるHTML、ラベル、フォーカス状態、十分なコントラストを保つ
- アニメーションや装飾は、デモの理解を助ける最小限にする
- 変更後は
npm run buildと主要画面のブラウザ確認を行う
When not to use it
- →When avoiding type-safe code or large abstractions
Prerequisites
Limitations
- →Requires existing style and naming conventions to be checked first
How it compares
This approach enforces specific frontend quality standards like mobile-first CSS and accessibility patterns during the coding process instead of as a post-development step.
Compared to similar skills
web-coder side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| web-coder (this skill) | 0 | 3mo | No flags | Beginner |
| web-coder | 0 | 5mo | No flags | Advanced |
| accessibility-compliance | 45 | 2mo | No flags | Intermediate |
| js-hoist-regexp | 1 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
web-coder
Bonzokoles
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 terminolo
accessibility-compliance
wshobson
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.
js-hoist-regexp
TheOrcDev
Hoist RegExp creation outside render or memoize with useMemo(). Apply when using regular expressions in React components or frequently called functions.
harden
Aixbox
Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.
frontend-developer
sickn33
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
frontend-ui-engineering
charlieviettq
Build and refine web UI—component structure, responsive layout, design tokens, state, and accessibility. Use for feature UI work beyond WCAG checks alone.