web-conventions
starsforks
How to install web-conventions?
adambien/airails/web-conventions
$npx -y skills add AdamBien/airails --skill web-conventionsGeneric, composable web platform conventions — semantic HTML, accessibility, modern CSS, custom-property design tokens, and Baseline browser-support policy that apply across all web frontends (static sites, web component SPAs). Meant to be composed with context-specific skills (e
SKILL.md
| 1 | Apply all rules below strictly to any HTML and CSS you write, generate, or review. |
| 2 | |
| 3 | ## Scope |
| 4 | |
| 5 | - Platform-level rules for HTML and CSS only — semantics, accessibility, styling, theming, browser-support policy. |
| 6 | - JavaScript policy, architecture, state management, routing, dependencies, project structure, and verification loops are **not** in this skill — see the context-specific skills `web-static` (no-JavaScript static sites) and `web-components` (web component SPAs). |
| 7 | - Responsive strategy (media queries vs container queries) is stack-specific — the composed skill decides. |
| 8 | - When a composed skill specifies a rule, the composed skill wins; this skill is the fallback baseline. |
| 9 | |
| 10 | ## Guiding Principles |
| 11 | |
| 12 | - web standards and web platform first |
| 13 | - minimal external dependencies — every dependency must justify its existence |
| 14 | - progressive enhancement over JavaScript-first design |
| 15 | |
| 16 | ## HTML Rules |
| 17 | |
| 18 | - semantic elements over generic `<div>`/`<span>` — use `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`, `<figure>`, `<time>`, `<address>` |
| 19 | - one `<main>` per page |
| 20 | - proper heading hierarchy (h1 → h2 → h3, no skipping) |
| 21 | - `lang` attribute on `<html>` |
| 22 | - `alt` on all images (empty `alt=""` for decorative) |
| 23 | - `aria-label` on `<nav>` when multiple navs exist |
| 24 | - `<label>` associated with every form input |
| 25 | - skip link for keyboard users |
| 26 | - use `<a>` for navigation, not buttons |
| 27 | - use `<br>` only for line breaks in content, never for spacing |
| 28 | |
| 29 | ## Form Rules |
| 30 | |
| 31 | - use the semantically correct input type — `email`, `url`, `tel`, `password`, `search`, `number`, `date`, `time`, `range`, `file`, `checkbox`, `radio` — never `type="text"` plus JavaScript re-implementation; the type alone provides the right mobile keyboard, native widget, and built-in validation (all Widely Available) |
| 32 | - exception: `<input type="color">` is Baseline Limited — do not use it; fall back to a text input with a `pattern` for hex colors |
| 33 | - declare constraints in markup: `required`, `pattern`, `min`/`max`/`step`, `minlength`/`maxlength` — built-in validation is the first line of defense, JavaScript only for rules markup cannot express (Constraint Validation API is Widely Available) |
| 34 | - `autocomplete` on every field with a well-known meaning (`name`, `email`, `street-address`, `current-password`, …) — autofill is both UX and accessibility |
| 35 | - `inputmode` only when no dedicated input type fits (Widely Available) |
| 36 | - `placeholder` is a hint, never a substitute for a `<label>` |
| 37 | - group related controls with `<fieldset>`/`<legend>` |
| 38 | - give every `<button>` inside a form an explicit `type` — the default is `submit`, which makes stray buttons submit the form |
| 39 | - style validation states with `:user-valid`/`:user-invalid` (Widely Available since 2026-05), not `:valid`/`:invalid` — the `:user-*` pseudo-classes wait for user interaction instead of flagging pristine fields |
| 40 | |
| 41 | ## Accessibility Rules |
| 42 | |
| 43 | - WCAG AA color contrast minimum (4.5:1) |
| 44 | - always maintain visible `:focus-visible` indicators |
| 45 | - every interactive element reachable and operable by keyboard |
| 46 | - include `prefers-reduced-motion: reduce` and `prefers-color-scheme: dark` media queries |
| 47 | |
| 48 | ## CSS Rules |
| 49 | |
| 50 | - all CSS in separate `.css` files — no inline styles |
| 51 | - use logical properties (`margin-block`, `padding-inline`, `inline-size`, `block-size`) |
| 52 | - use modern features: CSS nesting, container queries, cascade layers, subgrid, `oklch()` colors, the `:has()` selector — subject to the Baseline policy below |
| 53 | - use `clamp()` for fluid typography |
| 54 | - prefer `gap` over margins for spacing in flex/grid layouts |
| 55 | |
| 56 | ## Scrolling |
| 57 | |
| 58 | - use CSS scroll snap (`scroll-snap-type`, `scroll-snap-align`) for carousels, galleries, and section-based scrolling — never JavaScript scroll hijacking (scroll snap is Baseline Widely Available) |
| 59 | - pair scroll snap with `scroll-padding` on the container so snapped content clears sticky headers |
| 60 | - apply `scroll-behavior: smooth` only inside `@media (prefers-reduced-motion: no-preference)` |
| 61 | |
| 62 | ## Design |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
