メニュー
Use when designing/implementing UI with Tailwind CSS (layout, typography, responsive, theming, component patterns). Includes quick recipes and conventions for clean, consistent web design.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, footer reveals, and immersive preloaders. Use when analyzing or building premium editorial scroll experiences, sticky project stacks, kinetic typography, or section-by-section storytelling.
Create premium cinematic web motion systems with GSAP, ScrollTrigger, and Lenis. Use for luxury editorial websites, creative studio portfolios, Awwwards-style interactions, smooth scroll reveals, staggered text, parallax, pinned sections, magnetic hover states, custom cursors, and mouse-reactive layered movement.
Create subtle editorial word-by-word text reveal animations where each word fades and rises into place once it enters the viewport. Use for premium portfolio headlines, hero copy, section intros, and short marketing text that needs a cinematic staggered reveal with IntersectionObserver or in-view detection.
Create a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering. Use when a page needs an atmospheric near-black dither field, broad organic waves or cloud masses, and restrained gray-white highlights behind framed UI, hero content, or data overlays.
Create a globe-like 3D particle visualization with a dense luminous spherical core and thinner orbital ring or flattened disc. Use when a design needs a premium planetary, orbital, synthesized data-globe effect rendered with real WebGL/Three.js particles, not generic starfields or full page layout changes.
Apply diagonal-cut corners and chamfered edges to buttons, cards, panels, and container shells. Use when a design needs precise geometric framing, sci-fi UI surfaces, clipped-corner controls, or engineered sharp containers instead of rounded pills or plain rectangles.
| name | tailwindcss |
| description | Use when designing/implementing UI with Tailwind CSS (layout, typography, responsive, theming, component patterns). Includes quick recipes and conventions for clean, consistent web design. |
class="flex gap-4 p-6 bg-zinc-950 text-white"sm: md: lg: xl: etc.hover:, focus:, active:, disabled:, group-hover:, peer-checked:w-[42rem], bg-[#0b1220], translate-y-[3px]dark: with class-based strategy@apply for small reusable patterns (avoid overuse)"text-" + color) unless safelisted.@apply and losing the utility-first benefitsclsx/cva when needed.<button class="inline-flex items-center justify-center rounded-xl px-5 py-3
bg-indigo-600 text-white font-medium
hover:bg-indigo-500 active:bg-indigo-700
focus:outline-none focus:ring-2 focus:ring-indigo-400/60">
Get started
</button>
<section class="mx-auto max-w-6xl px-6 py-16">
<div class="grid gap-10 lg:grid-cols-2 lg:items-center">
<div>
<h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">
Ship a beautiful site fast.
</h1>
<p class="mt-4 text-zinc-600">
Tailwind helps you move quickly without fighting CSS.
</p>
</div>
<div class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm">
<!-- media -->
</div>
</div>
</section>
Prefer mapping:
const toneClass = {
success: "bg-emerald-600",
danger: "bg-rose-600",
info: "bg-sky-600",
}[tone];