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".
Scanned 9/11/2026
Install to Claude Code
Skills Directorynpx -y skills add SkyyRoseLLC/DevSkyy --skill static-web-development --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Static Web Development?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/skyyrosellc-static-web-development)More formats (shields.io, HTML) on the badges 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
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
```html
<!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>© 2026 SkyyRose LLC. All rights reserved.</p>
</footer>
</body>
</html>
```
### Accessible Forms
```html
<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)
```css
: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
```css
/* 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
```css
/* 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
```css
/* 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
```css
/* 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
```css
/* 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
```html
<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
```html
<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
```css
@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
```css
.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
```css
.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
```css
/* 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
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
