--- 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 ` ``` **Critical details:** - The `

Page Title...<style amp-boilerplate>...</style>

``` ## 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 `` tag ### NOT Allowed - `@import` inside `