AgentSkillsCN

web-presentation

用于静态幻灯片演示文稿项目的 HTML/CSS/JS 规则。

SKILL.md
--- frontmatter
name: web-presentation
description: "HTML/CSS/JS rules for the static slide deck project."

Web Presentation Skill

Rules:

  • •HTML: semantic elements only; headings strictly ordered; labels descriptive; no inline handlers/styles.
  • •HTML: skip link for keyboard users; ARIA live region for announcements; descriptive aria-labels on buttons.
  • •HTML: font-display=swap; meta description; images with loading="lazy".
  • •CSS: styles.css only; variables for tokens; no unused selectors; no deprecated/prefixed features.
  • •CSS: :focus-visible with clear outlines; prefers-reduced-motion support; touch targets minimum 44px.
  • •JS: addEventListener only; no inline handlers; batch DOM writes; handle missing nodes.
  • •JS: touch/swipe gestures; URL hash navigation; ARIA live updates on slide changes.
  • •A11y: prefer native controls; keep keyboard navigation intact.
  • •Slides: 10 per deck; 1 headline + 2-3 sentences; 1 image + visible credit (original URL + author/host).
  • •Slides: no eyebrow labels; include a link back to index.html in deck header.
  • •Slides: source links open in a new tab with rel="noopener".
  • •Layout: two-column on desktop, stacked on mobile.