一键在 Manus 中运行任何 Skill

开始使用

web-static

星标26

分支9

更新时间2026年5月10日 16:51

Build modern static websites using semantic HTML and CSS without external dependencies or build systems

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

AdamBien

AdamBien/airails

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Hard Constraints

No JavaScript — no <script> tags, no inline event handlers, no .js files
No external dependencies — no frameworks, libraries, CDNs, or package managers
No build systems — no transpilation, bundling, preprocessing, Sass, Less, or Tailwind
No inline styles — all CSS in separate .css files
Baseline 2025 — only use CSS features widely available across modern browsers

HTML Rules

Semantic elements over generic <div>/<span> — use <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <time>, <address>
One <main> per page
Proper heading hierarchy (h1 → h2 → h3, no skipping)
lang attribute on <html>
alt on all images (empty alt="" for decorative)
aria-label on <nav> when multiple navs exist
<label> associated with every form input
Skip link for keyboard users
Use <a> for navigation, not buttons
Use <br> only for line breaks in content, never for spacing

CSS Rules

Use CSS custom properties for theming (--color-primary, --spacing-unit, etc.)
Use logical properties (margin-block, padding-inline, inline-size, block-size)
Mobile-first responsive design with min-width breakpoints
Use modern features: CSS nesting, container queries, cascade layers, subgrid, oklch() colors
Use clamp() for fluid typography
Prefer gap over margins for spacing in flex/grid layouts
Include prefers-reduced-motion: reduce and prefers-color-scheme: dark media queries
Use content-visibility: auto for off-screen sections
WCAG AA color contrast minimum (4.5:1)
Always maintain visible :focus-visible indicators
Use @supports for feature detection when applying Baseline Newly Available features, providing a graceful fallback for older browsers
When recommending a newer CSS feature, cite its Baseline status (Widely Available, Newly Available, or Limited) so the reader can judge browser support

CSS Reset Baseline

Every project starts with:

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; }

Interactive Patterns (CSS-Only)

When interactivity is needed, use these approaches — never JavaScript:

Accordion: <details>/<summary>
Modal: :target pseudo-class with anchor links
Tabs: hidden radio buttons with :checked + sibling selectors
Dropdown menu: :hover + :focus-within
Mobile hamburger: hidden checkbox with :checked + sibling selectors
Form styling: appearance: none to customize native controls

Performance

loading="lazy" on below-fold images
<picture> with WebP sources for responsive images
Preload critical CSS and fonts
contain: layout style paint on repeated components

Project Structure

project/
├── index.html
├── css/
│   └── style.css
├── images/
├── fonts/
└── icons/

For small sites, a flat structure (HTML + single style.css + images/) is acceptable.

What NOT to Do

Do not use tables for layout
Do not use <br> for spacing
Do not use non-semantic <div> when a semantic element exists
Do not use onclick or any inline event handlers
Do not add JavaScript for interactions achievable with CSS
Do not use CSS frameworks or preprocessors

同仓库更多 Skills

同仓库

sbce

AdamBien/airails

Spec-driven BCE workflow where one capability spec equals one business component (same name) and the spec is the boundary contract. Invoked as `/sbce new|apply <capability-or-feature>` (or by intent), it drives declare → converge; the stack's own test loop is the oracle for "done". `new` accepts a BC name or a natural-language feature description that may decompose into one or several BCs (new or existing). Stack-neutral — composes with `/bce` and a stack skill (`/java-cli-app`, `/microprofile-server`, `/web-components`, …) for code shape and verification. Use when authoring or converging a capability spec, declaring a feature as one or more BCs, mapping a spec to a BC, or running `/sbce new`, `/sbce apply`. Triggers on "SBCE", "capability spec", "spec-driven BCE", "declare a feature", "spec to BC", "converge to spec", "/sbce new", "/sbce apply".

2026-06-2526

java-cli-script

AdamBien/airails

Create zero-dependency, single-file executable Java scripts for system-wide use via PATH. Use when asked to create a single-file Java shell script, system utility, PATH-installed Java tool, or shebang-launched Java program without the .java extension. Triggers on "Java script", "Java utility", "PATH script", "system script", or requests for single-file Java programs installed in /usr/local/bin or similar PATH directories. Not for multi-file Java applications — use java-cli-app for those.

2026-06-2326

microprofile-server

AdamBien/airails

Architecture and coding rules for long-running Java MicroProfile / Jakarta EE server applications — BCE layering, business components (BC), JAX-RS resources, CDI, JSON-P, testing (unit/integration/system), and Maven project structure. Use when creating, generating, scaffolding, writing, or reviewing code, resources, entities, boundaries, or business components in MicroProfile server projects. Not for serverless deployments.

2026-06-2226

web-components

AdamBien/airails

Architecture and coding rules for single-page applications using web components, BCE layering, lit-html templating, Redux Toolkit state management, and client-side routing. Web standards and web platform first, minimal external dependencies. Use when creating, scaffolding, generating, writing, or reviewing web component applications, custom elements, state management, client-side routing, or frontend BCE architecture. Not for server-side rendering or framework-heavy applications.

2026-06-2226

enterprisifier

AdamBien/airails

Deliberately overengineer code by adding as many patterns, indirections, modules, anti-corruption layers, abstractions, and encapsulations as possible. Zero dependency on implementation. Use when asked to overengineer, enterprisify, enterprise-ify, abstract, add layers, add patterns, or make code "production-ready" in the most excessive way. Triggers on "enterprisify this", "overengineer this", "enterprise-ify", "add all the patterns", "make it abstract", "add indirection", "wrap this properly", or when maximum abstraction is requested for comedic or educational purposes.

2026-06-2126

AdamBien/airails

Build Java 25+ projects with zb (Zero Dependencies Builder). Use when compiling, building, packaging, or running Java projects that have no external dependencies. Triggers on "build with zb", "zb build", "compile and package", "create executable JAR", or when a .zb configuration file is present in the project. Not for projects requiring Maven/Gradle dependency management.

2026-06-2126

name	web-static
description	Build modern static websites using semantic HTML and CSS without external dependencies or build systems
argument-hint	[description of the website or page to build]

Build or maintain a static website using $ARGUMENTS. Apply all rules below strictly.

Hard Constraints

No JavaScript — no <script> tags, no inline event handlers, no .js files
No external dependencies — no frameworks, libraries, CDNs, or package managers
No build systems — no transpilation, bundling, preprocessing, Sass, Less, or Tailwind
No inline styles — all CSS in separate .css files
Baseline 2025 — only use CSS features widely available across modern browsers

HTML Rules

Semantic elements over generic <div>/<span> — use <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <time>, <address>
One <main> per page
Proper heading hierarchy (h1 → h2 → h3, no skipping)
lang attribute on <html>
alt on all images (empty alt="" for decorative)
aria-label on <nav> when multiple navs exist
<label> associated with every form input
Skip link for keyboard users
Use <a> for navigation, not buttons
Use <br> only for line breaks in content, never for spacing

CSS Rules

Use CSS custom properties for theming (--color-primary, --spacing-unit, etc.)
Use logical properties (margin-block, padding-inline, inline-size, block-size)
Mobile-first responsive design with min-width breakpoints
Use modern features: CSS nesting, container queries, cascade layers, subgrid, oklch() colors
Use clamp() for fluid typography
Prefer gap over margins for spacing in flex/grid layouts
Include prefers-reduced-motion: reduce and prefers-color-scheme: dark media queries
Use content-visibility: auto for off-screen sections
WCAG AA color contrast minimum (4.5:1)
Always maintain visible :focus-visible indicators
Use @supports for feature detection when applying Baseline Newly Available features, providing a graceful fallback for older browsers
When recommending a newer CSS feature, cite its Baseline status (Widely Available, Newly Available, or Limited) so the reader can judge browser support

CSS Reset Baseline

Every project starts with:

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; }

Interactive Patterns (CSS-Only)

When interactivity is needed, use these approaches — never JavaScript:

Accordion: <details>/<summary>
Modal: :target pseudo-class with anchor links
Tabs: hidden radio buttons with :checked + sibling selectors
Dropdown menu: :hover + :focus-within
Mobile hamburger: hidden checkbox with :checked + sibling selectors
Form styling: appearance: none to customize native controls

Performance

loading="lazy" on below-fold images
<picture> with WebP sources for responsive images
Preload critical CSS and fonts
contain: layout style paint on repeated components

Project Structure

project/
├── index.html
├── css/
│   └── style.css
├── images/
├── fonts/
└── icons/

For small sites, a flat structure (HTML + single style.css + images/) is acceptable.

What NOT to Do

Do not use tables for layout
Do not use <br> for spacing
Do not use non-semantic <div> when a semantic element exists
Do not use onclick or any inline event handlers
Do not add JavaScript for interactions achievable with CSS
Do not use CSS frameworks or preprocessors