メニュー
Web frontend development: HTML5, CSS3, SCSS, Tailwind, accessibility, and performance. Use when working on full web frontend projects, choosing between CSS approaches, or auditing accessibility/performance.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | web-frontend |
| description | Web frontend development: HTML5, CSS3, SCSS, Tailwind, accessibility, and performance. Use when working on full web frontend projects, choosing between CSS approaches, or auditing accessibility/performance. |
<header>, <nav>, <main>, <section>, <article>, <footer><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="UTF-8"> and descriptive <title>alt attributes. Decorative images use alt="".<label> elementsloading="lazy" on below-fold imagesrole="banner", role="navigation", role="main"@media breakpoints at 480px, 768px, 1024px--var) for theme colors, spacing, and typographyrem/em over px for typography and spacingdisplay: grid for layouts, flexbox for components!important. Use specificity instead.prefers-color-scheme: dark media query + CSS variables$variables for colors, spacing, breakpoints@mixin for repeated patterns (e.g., media queries, button styles)sm:, md:, lg:, xl:dark: prefix with class strategytailwind.config.js under extend@apply in component classes sparingly - prefer compositionoutline: none without replacement).sr-only class for visually hidden labelsaria-label on icon-only buttons and linksaria-expanded on toggle elementsrole="status" or aria-live for dynamic content updatesrel="preload" for critical fonts and above-fold imagesdefer or asynccontain: layout style paint for off-screen contentGodot 4.x engine with GDScript, MVC architecture, headless testing, JSON configs, and performance patterns (MultiMesh, flow-field, decoupled simulation). Use when working on .gd files, Godot projects, game development with Godot 4, or any task involving the Godot engine CLI, project structure, GDScript coding conventions, Godot 4.x version-specific syntax, or game architecture patterns.
Concatenate many files in a directory into a single markdown document when the user asks to read, analyze, scan, load, dump, audit, concatenate, or merge many files in a project or folder at once. Triggers on phrases like "read all files", "analyze the project", "load every file", "concatenate files in folder X", "give me everything in src/", "audit the code", or wants to understand an entire codebase as a whole. Specifically when 5 or more files would otherwise need to be read individually.
Git + GitHub CLI workflow for solo projects. Conventional Commits, branch naming, destructive-command safety rails, and the merge/PR/keep/discard decision. Use when committing, branching, merging, rebasing, pushing, opening a PR, running git status/log/diff, or using the gh CLI for issues/PRs/CI runs.
Pine Script v6 for TradingView .pine files: indicators and strategies. Use when adding inputs (input.int, input.source, input.float, input.color, input.session), plots, signals, alerts, requests (request.security), tables, labels, lines, or any feature to a .pine file, or when discussing TradingView indicators, strategies, performance, common Pine Script v6 issues, or the AFTC coding standards (color.new with RGB, camelCase with boolean prefixes, 80-char section separators, START/END markers). Content targets Pine Script v6 specifically - Pine Script v5 has different syntax for some features.
Angular framework with standalone components, signals, the new control flow syntax, and the ng CLI. Use when working with Angular, ng generate, signals, inject(), or standalone components in .ts files.
Bash shell scripting conventions, shebang, error handling, and quoting. Use when writing or editing .sh files, scripts with