taste-skill

Generates React and Tailwind UI code following anti-generic design rules and motion specifications.

Updated Mar 28, 2026
One-click install
npx skills add https://github.com/po4yka/blog --skill taste-skill-po4yka
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: taste-skill
Source: https://github.com/po4yka/blog/tree/main/.claude/skills/taste-skill
Command: npx skills add https://github.com/po4yka/blog --skill taste-skill-po4yka

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLMs default to generic, clichéd UI patterns such as centered heroes, purple gradients, Inter font, and three-column card rows. This Skill enforces a rule-based design system that overrides those biases to produce distinctive, production-grade frontend code. ## Core Features & Use Cases - Bias-Correction Design Rules: Bans common AI tells (neon glows, pure black, generic names, Unsplash links) and enforces deterministic typography, single-accent color calibration, and asymmetric layouts. - Configurable Design Dials: Drives output through three tunable variables (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) that control layout asymmetry, animation depth, and information density. - Motion & Bento Architecture: Specifies Framer Motion spring physics, perpetual micro-interactions, staggered orchestration, and a five-card Bento grid paradigm for SaaS dashboards, with strict performance guardrails (transform/opacity only, isolated client components). - Use Case: Ask for a landing page or dashboard and receive React/Tailwind code with split-screen heroes, magnetic buttons, skeleton loading states, and mobile-safe responsive fallbacks instead of generic centered layouts. ## Quick Start Use the taste-skill to build a React dashboard with a bento grid layout, spring-based micro-animations, and a single emerald accent color.

Frequently Asked Questions about taste-skill

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

FAQPage Schema
How do I avoid generic AI-generated UI designs in React?

Apply bias-correction rules that ban common AI patterns: no centered heroes, no purple gradients, no Inter font, and no three-column card rows. Use asymmetric layouts, a single desaturated accent color, and fonts like Geist, Satoshi, or Cabinet Grotesk instead.

How to animate React components without hurting performance?

Animate only transform and opacity properties, never top, left, width, or height. Use Framer Motion's useMotionValue and useTransform outside the React render cycle for continuous animations, and isolate perpetual loops in memoized client components.

Does this work with both Tailwind CSS v3 and v4?

Yes, but the configuration differs by version. Check package.json first: for v4 do not use the tailwindcss plugin in postcss.config.js; use @tailwindcss/postcss or the Vite plugin instead, and avoid v4 syntax in v3 projects.

Why use min-h-[100dvh] instead of h-screen for hero sections?

h-screen causes layout jumping on mobile browsers like iOS Safari because it ignores the dynamic viewport. min-h-[100dvh] tracks the actual visible viewport height, preventing content shifts when browser chrome appears or hides.

When should I use GSAP or Three.js instead of Framer Motion?

Use Framer Motion for UI and bento interactions by default. Reserve GSAP ScrollTrigger or Three.js for isolated full-page scrolltelling or canvas backgrounds, wrapped in useEffect cleanup blocks, and never mix them with Framer Motion in the same component tree.