Run any Skill in Manus with one click

static-web-development

Stars3

Forks0

UpdatedJuly 14, 2026 at 14:36

Expert knowledge in HTML, CSS, responsive design, CSS Grid, Flexbox, modern layout techniques, and semantic markup. Triggers on keywords like "html", "css", "layout", "responsive", "grid", "flexbox", "semantic", "accessibility markup", "forms".

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

The-Skyy-Rose-Collection-LLC

The-Skyy-Rose-Collection-LLC/DevSkyy

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

Static Web Development

Master modern HTML, CSS, and layout techniques for building accessible, responsive, and performant static web pages.

When to Use This Skill

Activate when working on:

HTML structure and semantic markup
CSS layouts (Grid, Flexbox, positioning)
Responsive design and media queries
Form design and validation
CSS animations and transitions
Typography and spacing systems
Print stylesheets
Static site generation

Modern HTML

Semantic Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="SkyyRose - Where Love Meets Luxury">
  <title>SkyyRose | Luxury Fashion Jewelry</title>

  <!-- Open Graph -->
  <meta property="og:title" content="SkyyRose Luxury Jewelry">
  <meta property="og:description" content="Handcrafted luxury fashion jewelry">
  <meta property="og:image" content="https://skyyrose.co/og-image.jpg">
  <meta property="og:type" content="website">

  <!-- Fonts self-hosted, zero CDN — preload the critical face -->
  <link rel="preload" as="font" type="font/woff2" href="/assets/fonts/archivo-latin.woff2" crossorigin>

  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <header role="banner">
    <nav role="navigation" aria-label="Main navigation">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/collections">Collections</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main role="main">
    <article>
      <header>
        <h1>Signature Collection</h1>
        <time datetime="2026-02-06">February 6, 2026</time>
      </header>

      <section>
        <h2>Product Details</h2>
        <p>Handcrafted with precision...</p>
      </section>
    </article>
  </main>

  <aside role="complementary">
    <h2>Related Products</h2>
    <!-- Related content -->
  </aside>

  <footer role="contentinfo">
    <p>&copy; 2026 SkyyRose LLC. All rights reserved.</p>
  </footer>
</body>
</html>

Accessible Forms

<form action="/checkout" method="post" novalidate>
  <fieldset>
    <legend>Shipping Information</legend>

    <div class="form-group">
      <label for="full-name">
        Full Name <span aria-label="required">*</span>
      </label>
      <input
        type="text"
        id="full-name"
        name="full_name"
        required
        aria-required="true"
        aria-describedby="name-error"
        autocomplete="name"
      >
      <span id="name-error" class="error" aria-live="polite"></span>
    </div>

    <div class="form-group">
      <label for="email">Email Address <span aria-label="required">*</span></label>
      <input
        type="email"
        id="email"
        name="email"
        required
        aria-required="true"
        aria-describedby="email-error email-hint"
        autocomplete="email"
        inputmode="email"
      >
      <span id="email-hint" class="hint">We'll never share your email</span>
      <span id="email-error" class="error" aria-live="polite"></span>
    </div>

    <div class="form-group">
      <label for="phone">Phone Number</label>
      <input
        type="tel"
        id="phone"
        name="phone"
        autocomplete="tel"
        inputmode="tel"
        pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
        placeholder="555-555-5555"
      >
    </div>
  </fieldset>

  <button type="submit">Place Order</button>
</form>

Modern CSS

CSS Custom Properties (Variables)

:root {
  /* SkyyRose Brand Colors */
  --color-primary: #B76E79;
  --color-primary-hover: #A65E69;
  --color-secondary: #2C2C2C;
  --color-accent: #E8C5A5;

  /* Typography */
  --font-heading: 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Transitions */
  --transition-fast: 150ms ease-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 600ms cubic-bezier(0.43, 0.13, 0.23, 0.96);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Borders */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 1rem;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #C98090;
    --color-secondary: #F5F5F5;
  }
}

CSS Grid Layouts

/* Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  padding: var(--spacing-xl);
}

/* Responsive: 1 column on mobile, 2 on tablet, 3+ on desktop */
@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

/* Collection Page Layout */
.collection-layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: var(--spacing-xl);
}

.collection-header { grid-area: header; }
.collection-sidebar { grid-area: sidebar; }
.collection-content { grid-area: content; }
.collection-footer { grid-area: footer; }

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
  .collection-layout {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

Flexbox Patterns

/* Centered Container */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Space Between (Header Layout) */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
}

/* Auto-Wrapping Row */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

/* Column with Equal Spacing */
.vertical-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Stretch Last Item */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.sidebar > :last-child {
  flex-grow: 1;
}

Responsive Design

/* Mobile-First Approach */
.hero {
  padding: var(--spacing-lg);
  font-size: var(--font-size-base);
}

/* Tablet */
@media (min-width: 768px) {
  .hero {
    padding: var(--spacing-xl);
    font-size: var(--font-size-lg);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .hero {
    padding: var(--spacing-2xl);
    font-size: var(--font-size-xl);
  }
}

/* Large Desktop */
@media (min-width: 1440px) {
  .hero {
    max-width: 1400px;
    margin: 0 auto;
    font-size: var(--font-size-2xl);
  }
}

/* Container Queries (Modern) */
.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

CSS Animations

/* Smooth Hover Effects */
.product-card {
  transition: transform var(--transition-base);
}

.product-card:hover {
  transform: translateY(-8px);
}

/* Fade In Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn var(--transition-slow) ease-out;
}

/* Shimmer Loading Effect */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 2000px 100%;
  animation: shimmer 2s linear infinite;
}

/* Rose Gold Gradient */
.rose-gold-shimmer {
  background: linear-gradient(
    90deg,
    #B76E79 0%,
    #E8C5A5 50%,
    #B76E79 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

Typography

/* Responsive Typography */
html {
  font-size: 16px;
}

@media (min-width: 768px) {
  html {
    font-size: 18px;
  }
}

@media (min-width: 1024px) {
  html {
    font-size: 20px;
  }
}

/* Fluid Typography */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Body Copy */
p {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-secondary);
  max-width: 65ch; /* Optimal reading length */
}

/* Luxury Serif Headings */
.luxury-heading {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  color: var(--color-primary);
  letter-spacing: 0.05em;
}

Performance

Critical CSS

<head>
  <!-- Inline critical CSS -->
  <style>
    /* Above-the-fold styles only */
    body { margin: 0; font-family: system-ui; }
    .hero { min-height: 100vh; display: flex; }
  </style>

  <!-- Preload fonts -->
  <link rel="preload" href="/assets/fonts/archivo-latin.woff2" as="font" type="font/woff2" crossorigin>

  <!-- Async load non-critical CSS -->
  <link rel="stylesheet" href="/style.css" media="print" onload="this.media='all'">
</head>

Modern Image Formats

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img
    src="product.jpg"
    alt="SkyyRose Signature Necklace"
    width="800"
    height="600"
    loading="lazy"
    decoding="async"
  >
</picture>

Print Stylesheets

@media print {
  /* Hide non-essential elements */
  header, footer, nav, .sidebar, .ads {
    display: none;
  }

  /* Optimize for print */
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }

  /* Prevent page breaks inside elements */
  .product-card, figure, blockquote {
    page-break-inside: avoid;
  }

  /* Add URLs to links */
  a[href]::after {
    content: " (" attr(href) ")";
  }

  /* Show all images */
  img {
    max-width: 100% !important;
  }
}

SkyyRose-Specific Patterns

Luxury Card Design

.luxury-product-card {
  background: #fff;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: all var(--transition-base);
}

.luxury-product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.luxury-product-card__image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.luxury-product-card__content {
  padding: var(--spacing-lg);
}

.luxury-product-card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.luxury-product-card__price {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-secondary);
}

Rose Gold Accents

.rose-gold-accent {
  border-left: 4px solid var(--color-primary);
  padding-left: var(--spacing-md);
}

.rose-gold-underline {
  position: relative;
  display: inline-block;
}

.rose-gold-underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

Accessibility

/* Focus visible for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Skip to main content */
.skip-to-main {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-to-main:focus {
  top: 0;
}

/* Visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .product-card {
    border: 2px solid currentColor;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

References

See references/ for detailed guides:

css-grid-guide.md - Complete CSS Grid reference
flexbox-patterns.md - Common Flexbox layouts
responsive-design.md - Mobile-first techniques
typography-system.md - Typographic scales and rhythm
accessibility-checklist.md - HTML/CSS accessibility

Examples

See examples/ for working implementations:

product-grid.html - CSS Grid product layout
luxury-card.html - SkyyRose card design
responsive-nav.html - Mobile-friendly navigation
accessible-form.html - Complete accessible form
print-styles.html - Print-optimized page

name	Static Web Development
description	Expert knowledge in HTML, CSS, responsive design, CSS Grid, Flexbox, modern layout techniques, and semantic markup. Triggers on keywords like "html", "css", "layout", "responsive", "grid", "flexbox", "semantic", "accessibility markup", "forms".
version	1.0.0

static-web-development

More from this repository

More from this repository

Static Web Development

When to Use This Skill

Modern HTML

Semantic Structure

Accessible Forms

Modern CSS

CSS Custom Properties (Variables)

CSS Grid Layouts

Flexbox Patterns

Responsive Design

CSS Animations

Typography

Performance

Critical CSS

Modern Image Formats

Print Stylesheets

SkyyRose-Specific Patterns

Luxury Card Design

Rose Gold Accents

Accessibility

References

Examples

Static Web Development

When to Use This Skill

Modern HTML

Semantic Structure

Accessible Forms

Modern CSS

CSS Custom Properties (Variables)

CSS Grid Layouts

Flexbox Patterns

Responsive Design

CSS Animations

Typography

Performance

Critical CSS

Modern Image Formats

Print Stylesheets

SkyyRose-Specific Patterns

Luxury Card Design

Rose Gold Accents

Accessibility

References

Examples