skills.rest
EliasOulkadi
EliasOulkadiCOMMUNITY
Explore all skills by this author →
𝕏@EliasOulkadiGitHub

taste-soft

Enforce premium typography, spacing, shadows, and motion rules in web UI designs.

110|14|Updated May 12, 2026
Search Tags:#ui design#tailwind#ux#motion design#responsive layout#visual polish#premium branding
One-click install
npx skills add https://github.com/EliasOulkadi/shokunin --skill taste-soft-eliasoulkadi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: taste-soft
Source: https://github.com/EliasOulkadi/shokunin/tree/main/.pack/skills/taste-soft
Command: npx skills add https://github.com/EliasOulkadi/shokunin --skill taste-soft-eliasoulkadi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It fixes generic, “AI-cheap” UI output by enforcing premium visual rules for typography, spacing, shadows, structure, and motion so the result feels agency-grade and cohesive.

Core Features & Use Cases

  • Premium visual system: Applies Apple-esque/Linear-tier constraints (allowed fonts/icons, banned defaults, double-bezel card architecture) to produce consistently expensive-looking layouts.
  • Cohesive archetype engine: Forces deliberate selection of exactly one vibe and one layout archetype to avoid mixed styles and repetitive templates.
  • Motion with guardrails: Defines fluid motion choreography using custom easing, GPU-safe transforms/opacity, scroll reveals via IntersectionObserver, and mandatory prefers-reduced-motion handling.

Quick Start

Ask your AI to design a luxury, premium landing page that uses the Ethereal Glass vibe with the Asymmetrical Bento layout, includes double-bezel card structure, magnetic pill CTAs, fluid detached nav, IntersectionObserver scroll entry animations, and respects prefers-reduced-motion.

Frequently Asked Questions about taste-soft

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make AI-generated landing pages look premium and avoid cheap default UI patterns?▼

To make landing pages look premium, enforce strict visual rules for typography, spacing, shadows, and motion that ban default AI-cheap UI patterns. This approach replaces generic templates with agency-grade, cohesive aesthetics using deliberate vibe and layout archetype selection.

What is a double-bezel card architecture in premium UI design?▼

Double-bezel card architecture is a premium structural design rule that nests visual layers to create depth and an expensive feel. It eliminates flat, generic component defaults by enforcing consistent, high-end visual hierarchy across responsive breakpoints.

How do I add scroll reveal animations that respect prefers-reduced-motion accessibility?▼

Add scroll reveal animations using IntersectionObserver to trigger GPU-safe transforms and opacity changes. You must implement mandatory prefers-reduced-motion handling to disable or simplify fluid choreography for users requesting less motion.

Can I use Tailwind to build luxury agency-style website components?▼

Yes, you can use Tailwind to build luxury agency-style website components by applying premium visual constraints. Enforce allowed fonts, banned layout defaults, and custom motion easing to ensure the utility-first output feels cohesive and expensive.

What is the best way to ensure consistent visual polish across responsive breakpoints?▼

The best way to ensure consistent visual polish across responsive breakpoints is to enforce a single layout archetype and a cohesive vibe. Apply premium typography, spacing, and shadow rules uniformly to avoid mixed styles and repetitive templates.

Related Skills

Explore More Design & Creative Skills→
tgautiertgautier
2

css-responsive

Standardize mobile-first responsive CSS with Tailwind v4 breakpoints and typography.

Community
Advanced
otto-poblyshotto-poblysh

high-end-visual-design

Generate premium UI layouts with double-bezel containers and cinematic motion.

Community
Advanced
gajjalaashok75-UIgajjalaashok75-UI
2

cinematic-scroll

Build cinematic scroll choreography with GSAP ScrollTrigger timelines and smooth pinning.

Community
Advanced
stacksjsstacksjs
2

stacks-design-soft

Enforce a premium soft aesthetic preset for Stacks UI designs.

Official
Advanced