⏳ This skill is pending AI review.

Scores will appear once the review pipeline completes.

version unknown

dope-skills-amp-web-dev

mrrobot4ever@mrrobot4ever⭐ 0 stars· last commit 6mo ago· 0 open issues

Build valid Google AMP pages with modern design aesthetics -- frosted glass, neon glows, gradients, shimmer animations, responsive layouts. Use when asked to create a landing page, marketing page, product page, or any web page that must be valid AMP. Covers AMP boilerplate, allowed CSS techniques, AMP components, responsive design, and deployment to GitHub Pages with custom domains. Triggers on "AMP page", "AMP landing page", "AMP website", "Google AMP", "valid AMP", "amp web dev".

Choose how to use this skill

You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.

1. Native installer

This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.

Do not guess an installer command or replace an existing version without reviewing the diff.

2. Complete package recommended

Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.

No complete ProSkills package is published for this listing yet.

3. Prompt-only

Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.

Need only the instruction file?

Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.

No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.

—/10

// RATINGS

⭐GitHub Stars
⭐ 0 on GitHubGitHub ↗

New / niche

🟢ProSkills Score
—
📍

Not yet listed on ClawHub or SkillsMP

// README

Dope Skills - AMP Web Dev

An OpenClaw agent skill for building valid Google AMP pages with modern, premium design aesthetics.

What It Does

Guides an AI agent through building production-ready AMP pages with:

  • Valid AMP boilerplate (exact official spec)
  • Frosted glass cards, neon glow effects, gradient text
  • Shimmer animations on buttons (pure CSS)
  • Responsive two-column/one-column layouts
  • FAQ accordions with animated carets
  • GitHub Pages deployment with custom domains

Why AMP

AMP pages load instantly, are eligible for Google's AMP cache, and rank well in mobile search. The constraints (no JS, 75KB CSS limit) force clean, performant code.

Usage with OpenClaw

cd ~/.openclaw/workspace/skills
git clone https://github.com/mrrobot4ever/dope-skills-amp-web-dev.git

Then tell your agent: "Build me an AMP landing page" and describe what you want.

Documentation

FilePurpose
SKILL.mdComplete AMP development guide -- boilerplate, CSS rules, components, design patterns, deployment
references/lessons-learned.mdValidation pitfalls and fixes from production

License

MIT

// HOW IT'S BUILT

// FILES

2 files shipped with this skill. Inline text is the catalog copy. The upstream link is the source repository.

  • SKILL.md7.8 KBupstream ↗
    ---
name: dope-skills-amp-web-dev
description: Build valid Google AMP pages with modern design aesthetics -- frosted glass, neon glows, gradients, shimmer animations, responsive layouts. Use when asked to create a landing page, marketing page, product page, or any web page that must be valid AMP. Covers AMP boilerplate, allowed CSS techniques, AMP components, responsive design, and deployment to GitHub Pages with custom domains. Triggers on "AMP page", "AMP landing page", "AMP website", "Google AMP", "valid AMP", "amp web dev".
---

# Dope Skills - AMP Web Dev

Build production-ready, valid Google AMP pages with modern premium design.

## What is AMP

AMP (Accelerated Mobile Pages) is a web framework that enforces performance constraints:
- No custom JavaScript
- CSS limited to 75KB in a single `<style amp-custom>` block
- Images use `<amp-img>` instead of `<img>`
- Interactivity via AMP components only
- Boilerplate code must match the official spec exactly

The tradeoff: you lose JavaScript flexibility but gain guaranteed fast load times and eligibility for Google's AMP cache/search features.

## AMP Boilerplate (MUST BE EXACT)

This boilerplate must appear in the `<head>` of every AMP page. It must match character-for-character. Do not modify it. Do not reformat it. Copy-paste it exactly.

```html
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
```

**Critical details:**
- The `<noscript>` tag must be on the SAME LINE as the closing `</style>` tag -- no whitespace between them
- ALL vendor prefixes must be present: `-webkit-`, `-moz-`, `-ms-`, `-o-`
- The noscript style must include `-ms-animation:none`
- Missing ANY prefix = invalid AMP

## Required Head Structure

```html
<!doctype html>
<html amp lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <title>Page Title</title>
  <meta name="description" content="Page description">
  <link rel="canonical" href="https://yourdomain.com/">
  <!-- Google Fonts: use <link>, NEVER @import -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap">
  <!-- AMP boilerplate (exact copy from above) -->
  <style amp-boilerplate>...</style><noscript><style amp-boilerplate>...</style></noscript>
  <!-- AMP JS -->
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!-- AMP components (only include what you use) -->
  <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
  <!-- All custom CSS in one block -->
  <style amp-custom>
    /* Your CSS here -- max 75KB */
  </style>
</head>
```

## CSS Rules for AMP

### Allowed
- All standard CSS properties
- CSS Grid and Flexbox
- CSS custom properties (variables)
- `@keyframes` animations
- `@media` queries
- Pseudo-elements (`::before`, `::after`)
- `calc()`, `min()`, `max()`, `clamp()`
- `linear-gradient`, `radial-gradient`
- `backdrop-filter: blur()`
- `box-shadow`, `text-shadow`
- `transition` properties
- Google Fonts via `<link>` tag

### NOT Allowed
- `@import` inside `<style amp-custom>` (use `<link>` tag instead)
- `!important` qualifier
- More than 75,000 bytes of CSS
- Multiple `<style amp-custom>` blocks
- Inline styles on elements ARE allowed but count toward the limit
- `behavior:` or `-moz-binding:` properties
- `filter:` on the `<html>` or `<body>` elements

### Common Gotcha
`@import url('https://fonts.googleapis.com/...')` inside `<style amp-custom>` is the #1 AMP validation error. It causes a "CSS syntax error" that can cascade and also flag the boilerplate as malformed.

### Best Practice: Inline Font Declarations

Do NOT use an external `<link>` tag for Google Fonts -- it creates a render-blocking request (Lighthouse flags ~790ms penalty).

Instead, inline `@font-face` declarations directly in `<style amp-custom>`. This is allowed -- it's `@import` that's banned, not `@font-face`.

```css
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
```

**Key details:**
- Only include the `latin` unicode-range subset (skip cyrillic, greek, vietnamese) to save CSS bytes
- Add one `@font-face` per weight you use (400, 500, 600, 700, 800, 900)
- Fetch the CSS from Google Fonts to get the correct woff2 URLs: `curl -s -A 'Mozilla/5.0' 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap'`

### Font Preloading

Add a `<link rel="preload">` in the `<head>` to eliminate the critical request chain (font download waiting on CSS parse):

```html
<link rel="preload" href="https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2" as="font" type="font/woff2" crossorigin>
```

The browser starts downloading the font immediately, in parallel with parsing. By the time the `@font-face` declaration is reached, the font is already downloaded.

## AMP Components Quick Reference

Include the script tag in `<head>` for each component you use.

| Component | Use Case | Script |
|-----------|----------|--------|
| amp-img | All images (required) | Built-in |
| amp-accordion | FAQ sections, expandable content | amp-accordion-0.1.js |
| amp-carousel | Image/card carousels | amp-carousel-0.2.js |
| amp-form | Email capture, contact forms | amp-form-0.1.js |
| amp-fit-text | Auto-sizing text | amp-fit-text-0.1.js |
| amp-video | Self-hosted video | Built-in |
| amp-youtube | YouTube embeds | amp-youtube-0.1.js |
| amp-analytics | Google Analytics | amp-analytics-0.1.js |
| amp-sidebar | Mobile navigation drawer | amp-sidebar-0.1.js |

### amp-img (replaces all `<img>` tags)
```html
<!-- Fixed size -->
<amp-img src="image.webp" width="200" height="182" alt="Description" layout="fixed"></amp-img>

<!-- Responsive (fills container width) -->
<amp-img src="image.jpg" width="720" height="1280" alt="Description" layout="responsive"></amp-img>

<!-- Fill parent container -->
<amp-img src="bg.jpg" layout="fill" alt="Background"></amp-img>
```

### amp-accordion (FAQ sections)

**Important:** CSS `::after` pseudo-elements on `<h4>` do NOT work reliably inside amp-accordion. AMP's internal component structure overrides the header layout. Use inline `<span>` elements instead.

```html
<amp-accordion animate>
  <section>
    <h4><span class="faq-q"><span>Question text</span><span class="faq-caret">&#9662;</span></span></h4>
    <div class="answer">Answer text</div>
  </section>
</amp-accordion>
```

**FAQ caret styling (using inline spans, NOT pseudo-elements):**
```css
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.faq-caret {
  color: #999;
  font-size: 18px;
  flex-shrink: 0;
  margin-left: 16px;
  transition: transform 0.2s;
}
amp-accordion section[expanded] .faq-caret {
  transform: rotate(180deg);
}
```

## Design Patterns (AMP-Safe)

### Frosted Glass Cards
```css
.card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255
  • README.mdupstream ↗

    Contents are not inlined in the catalog. Open the upstream file.

Plain-text copy, no login: /skill-bundles/mrrobot4ever-dope-skills-amp-web-dev.md

// REPO STATS

0 stars
0 open issues
Last commit: 6mo ago

// SHARE

Share on XShare on LinkedIn