soft

Auto-load

Attaches itself automatically when a prompt matches.

High-end agency-tier visual design that feels expensive. Apple-esque / Linear-tier soft UI with premium fonts, heavy whitespace, ultra-diffuse shadows, nested double-bezel cards, squircle radii, and fluid spring-physics motion. For premium consumer, SaaS, and agency sites that need to look like a $150k build.

Scaffolds

react

vanilla

Source

Adapted from leonxlnx/taste-skill (MIT), adapted for Codebase scaffolds

Instructions

The full instruction set the agent receives when this skill is active.

Soft / High-End Agency UI

Layer this on top of frontend-design. Dials around VARIANCE 7-8, MOTION 6-7, DENSITY 3. The target is haptic depth and cinematic spatial rhythm, not "template with nice fonts." Never ship the same layout/aesthetic twice in a row.

Banned here (stricter than the base skill)

Generic 1px solid gray borders and harsh dark shadows (shadow-md, rgba(0,0,0,0.3)).
Edge-to-edge sticky navbars glued to the very top (float them instead).
Symmetrical 3-column Bootstrap grids without big whitespace gaps.
linear / ease-in-out transitions and instant state changes.

Pick one vibe + one layout (vary per build)

Vibe: (a) Ethereal Glass for SaaS/AI: OLED black #050505, faint radial mesh orbs, vantablack cards with backdrop-blur-2xl and white/10 hairlines, wide grotesk type. (b) Editorial Luxury for lifestyle/agency: warm cream #FDFBF7 or deep espresso, high-contrast type, a 0.03 film-grain overlay. (c) Soft Structuralism for consumer/health: silver-grey or white, massive bold grotesk, floating components with very diffuse ambient shadows.

Layout: asymmetric bento (mixed col-span), z-axis cascade (slightly overlapping/rotated cards), or editorial split (massive type left, interactive cards right). Each MUST collapse to single-column w-full px-4 below 768px and drop rotations/overlaps (they break touch targets). Use min-h-[100dvh], never h-screen.

The double-bezel (the signature move)

Premium cards/images/containers look like machined hardware, not flat rectangles:

Outer shell: wrapper with a faint bg (bg-white/5 or bg-black/5), a hairline ring (ring-1 ring-black/5 or border border-white/10), small padding (p-1.5/p-2), large radius (rounded-[2rem]).
Inner core: the content container, its own bg, an inner highlight (shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]), and a concentric smaller radius (rounded-[calc(2rem-0.375rem)]).

Buttons (island architecture)

Primary CTAs are full pills (rounded-full px-6 py-3). A trailing arrow never sits naked next to the label: nest it in its own circular wrapper (w-8 h-8 rounded-full bg-black/5 dark:bg-white/10 flex items-center justify-center) flush with the right padding. On hover, active:scale-[0.98] and the inner icon circle translates diagonally (group-hover:translate-x-1 group-hover:-translate-y-[1px]).

Spacing & fonts

Double standard padding: py-24 to py-40. Let it breathe.
Premium fonts via next/font on scaffold-next (Geist, Sora, Plus Jakarta Sans, Clash Display if bundled). On scaffold-react use a strong system stack (no runtime web-font fetch in preview). Inter/Roboto/Arial are banned here.

Motion (spring physics, not eases)

Custom cubic-beziers only, e.g. duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]. Floating glass nav (mt-6 mx-auto w-max rounded-full); hamburger morphs fluidly to an X; mobile menu opens as a backdrop-blur-3xl overlay with staggered link reveals (translate-y-12 opacity-0 -> in, delay-100/150/200).
Scroll entry: heavy fade-up translate-y-16 blur-md opacity-0 -> translate-y-0 blur-0 opacity-100 over 800ms+ via whileInView / IntersectionObserver (never a scroll listener).
GPU-safe: only transform/opacity; backdrop-blur only on fixed/sticky elements; grain/noise on a fixed inset-0 pointer-events-none layer only.