メニュー
Use when designing or coding a new interface that needs a distinctive aesthetic direction, when reviewing visuals for hierarchy/brand alignment, or when an existing UI feels generic ("AI slop") and needs production-grade visual polish.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when work context must transfer to another session or person. Triggers: create a handoff, hand off this work, summarize context for the next session, prepare a handoff.
Use when a result, experiment, or analysis must be reproducible by others or by a future session. Triggers: make this reproducible, capture provenance, pin the environment for this result, why can't I reproduce X.
Use when research or scientific code must be trustworthy — verifiably correct, regression-safe, and numerically stable. Triggers: harden this code, is this numerically correct, add regression tests vs known results, make the research code robust.
Use when an approved implementation plan (a docs/rse/specs/plan-*.md file) exists and the next step is writing the code. Triggers: implement the plan, execute the plan, start building, run the plan.
Use when an existing implementation plan needs changes before or during execution. Triggers: update the plan, change the plan, add a phase, revise scope, incorporate experiment results.
Use when a feature, refactor, or multi-file change needs to be designed before coding. Triggers: plan X, design the implementation, how should we build X, create an implementation plan.
| name | visual-design |
| description | Use when designing or coding a new interface that needs a distinctive aesthetic direction, when reviewing visuals for hierarchy/brand alignment, or when an existing UI feels generic ("AI slop") and needs production-grade visual polish. |
| metadata | {"references":["references/aesthetic-principles.md","references/brand-alignment.md","references/visual-hierarchy.md"]} |
npx pa11y <url> — zero contrast failures (WCAG AA: 4.5:1 body, 3:1 large text).prefers-reduced-motion disables non-essential animation.| Tone | Use for | Signal moves |
|---|---|---|
| Brutally minimal | Dev tools, SaaS | Mono type, hairline borders, no shadows |
| Luxury/refined | Premium retail | Serif display, restrained palette, generous whitespace |
| Editorial | Content, blogs | Dramatic type contrast, asymmetric grid, large imagery |
| Playful | Consumer, kids | Rounded shapes, bouncy easing, oversized elements |
| Retro-futurist | Creative agency | Neon accents, dark base, geometric shapes, scanlines |
| Organic | Wellness, food | Earth tones, hand-drawn marks, textured backgrounds |
| Brutalist/raw | Art, counter-culture | Exposed structure, system fonts used ironically |
| Industrial | Dashboards | Dense info, mono type, muted colors, grid-heavy |
| Maximalist | Fashion, entertainment | Mixed media, clashing palettes, controlled chaos |
| Glassmorphism | Modern SaaS | Frosted blur over vibrant backgrounds |
| Swiss | Corporate, institutional | Grid precision, Akzidenz-style type, clean geometry |
Full library + when-not-to-use guidance: aesthetic-principles.md.
<section class="hero">
<p class="kicker">Issue 14 — Winter</p>
<h1 class="title">The <em>Quiet</em> Architecture<br/>of Better Tools</h1>
<p class="dek">A field report on craft software, written by the people who use it daily.</p>
<a class="cta" href="/read">Read the issue →</a>
</section>
<style>
:root {
--ink: #111; --paper: #f5f1ea; --accent: #c2410c; --rule: #111;
--serif: "Tiempos Headline", "Cormorant Garamond", Georgia, serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
}
.hero { background: var(--paper); color: var(--ink); padding: clamp(3rem, 8vw, 8rem) clamp(1.5rem, 6vw, 6rem); border-bottom: 2px solid var(--rule); }
.kicker { font: 500 .8rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 2rem; }
.title { font: 600 clamp(2.5rem, 7vw, 6rem)/0.95 var(--serif); letter-spacing: -0.02em; max-width: 14ch; margin: 0 0 1.5rem; }
.title em { color: var(--accent); font-style: italic; }
.dek { font: 400 1.125rem/1.5 var(--serif); max-width: 48ch; margin-bottom: 2.5rem; }
.cta { font: 500 .9rem/1 var(--mono); border-bottom: 1px solid currentColor; padding-bottom: 2px; text-decoration: none; color: var(--ink); }
.cta:hover { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
.title { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(1rem); } }
}
</style>
import { motion } from "motion/react";
export function FeatureRow({ items }: { items: { title: string; body: string }[] }) {
return (
<ul className="grid gap-12 md:grid-cols-3">
{items.map((it, i) => (
<motion.li key={it.title}
initial={{ opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-10%" }}
transition={{ delay: i * 0.08, duration: 0.5, ease: [0.2, 0.7, 0.2, 1] }}>
<h3 className="font-serif text-2xl">{it.title}</h3>
<p className="text-neutral-600">{it.body}</p>
</motion.li>
))}
</ul>
);
}