メニュー
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".
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Have two genuinely different models (a Claude model, e.g. Fable, and Codex/OpenAI) debate a plan before anything gets built — one drafts, the other challenges, capped at 3 rounds, then the strongest coding model actually executes the converged plan and the planner reviews the real result. Use for any task where a wrong plan is expensive to discover late (rigging/animation work, architecture decisions, migrations) — not for small, obviously-correct changes.
Have two genuinely different models (a Claude model, e.g. Fable, and Codex/OpenAI) debate a plan before anything gets built — one drafts, the other challenges, capped at 3 rounds, then the strongest coding model actually executes the converged plan and the planner reviews the real result. Use for any task where a wrong plan is expensive to discover late (rigging/animation work, architecture decisions, migrations) — not for small, obviously-correct changes.
Specialized architect for building augmented reality, 3D, and immersive shopping experiences — across ANY output format (React JSX, standalone HTML/CSS/JS, WordPress/WooCommerce PHP, Python backends, or any other language). Use this skill whenever the user mentions: 3D product viewers, virtual try-on, AR fitting rooms, immersive brand showrooms, 3D collection environments, interactive drop pages, Three.js, React Three Fiber, A-Frame, model-viewer, WebXR, GSAP cinematic scroll, Lottie animations, spatial UI, parallax 3D scenes, or any request to make shopping feel like an experience rather than a webpage. Always use this skill even if the request seems simple — immersive experiences require specialized architecture that generic frontend patterns cannot match. This skill extends frontend-design with deep 3D and AR expertise; load frontend-design alongside it for complete visual design guidance.
Luxury streetwear design taste for SkyyRose surfaces — visual hierarchy, restraint, materials, motion, and imagery treatment. Use for any visual design, review, or elevation work on skyyrose.co or the DevSkyy dashboard. Replaces the lost high-end-visual-design / design-taste-frontend / image-taste-frontend skills.
The SkyyRose flagship theme's own engineering doctrine (wordpress-theme/skyyrose-flagship/) -- not a generic WordPress reference, a stack-specific one built around this brand's actual collections, visual canon, and production pipeline. Covers block/template development, WooCommerce integration, the vanilla three.js mascot and immersive worlds, and the quality gates that keep a luxury storefront feeling luxury. Use for any task touching the theme's PHP, the .min build pipeline, WooCommerce REST/webhooks, or the site's Three.js scenes.
Automate WordPress and WooCommerce operations via REST API. Use when managing products, orders, content, or site configuration programmatically. Triggers on requests to create/update products, manage inventory, generate Elementor layouts, handle WooCommerce orders, or automate any WordPress operations. Includes Elementor JSON generation patterns for skyyrose.co.
| 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 |
Master modern HTML, CSS, and layout techniques for building accessible, responsive, and performant static web pages.
Activate when working on:
<!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>
<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>
: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;
}
}
/* 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;
}
}
/* 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;
}
/* 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;
}
}
/* 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;
}
/* 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;
}
<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>
<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>
@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;
}
}
.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-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));
}
/* 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;
}
}
See references/ for detailed guides:
css-grid-guide.md - Complete CSS Grid referenceflexbox-patterns.md - Common Flexbox layoutsresponsive-design.md - Mobile-first techniquestypography-system.md - Typographic scales and rhythmaccessibility-checklist.md - HTML/CSS accessibilitySee examples/ for working implementations:
product-grid.html - CSS Grid product layoutluxury-card.html - SkyyRose card designresponsive-nav.html - Mobile-friendly navigationaccessible-form.html - Complete accessible formprint-styles.html - Print-optimized page