skills.rest
Oatse
OatseCOMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend

Generates React and Tailwind frontend code following metric-driven design rules and anti-generic UI constraints.

Updated May 23, 2026
Search Tags:#frontend#react#design system#next.js#tailwind css#ui design#framer motion
One-click install
npx skills add https://github.com/Oatse/CWE-Automation --skill design-taste-frontend-oatse
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/Oatse/CWE-Automation/tree/main/.agents/skills/design-taste-frontend
Command: npx skills add https://github.com/Oatse/CWE-Automation --skill design-taste-frontend-oatse

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLMs produce statistically generic frontend code: centered heroes, purple gradients, Inter font, three-column card rows, and missing loading or error states. This Skill enforces engineered design rules so generated interfaces look intentionally designed rather than AI-default. ## Core Features & Use Cases - Bias-Corrected Design Rules: Bans common AI tells such as neon glows, pure black, Inter font, generic names, and 3-column card layouts, replacing them with calibrated typography, color, and layout directives. - Configurable Design Dials: Drives output through three tunable baselines (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) that control asymmetry, animation depth, and information density. - Architecture & Performance Guardrails: Enforces React Server Component boundaries, Tailwind v3/v4 version checks, dependency verification against package.json, hardware-accelerated animations, and isolated client components for perpetual motion. - Use Case: Ask for a SaaS dashboard and receive a Bento-grid layout with spring-physics micro-interactions, skeleton loaders, empty states, and mobile-safe responsive fallbacks instead of a generic card page. ## Quick Start Ask the AI to build a React dashboard or landing page and it will apply these design rules, motion specs, and architecture constraints automatically.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema
How do I make AI-generated UI look less generic?▼

Apply explicit bias-correction rules: ban default patterns like centered heroes, Inter font, purple gradients, and 3-column card rows, then enforce asymmetric layouts, calibrated accent colors, and distinctive fonts such as Geist or Satoshi. This Skill encodes those rules as mandatory generation constraints.

How to configure design variance and motion intensity?▼

Set the three baseline dials at the top of the Skill: DESIGN_VARIANCE (1-10) controls layout asymmetry, MOTION_INTENSITY (1-10) controls animation depth, and VISUAL_DENSITY (1-10) controls spacing and data packing. You can also override them per request in your prompt.

Does it work with Tailwind CSS v3 and v4?▼

Yes, but it checks package.json first and locks syntax to the installed version. For v4 projects it forbids the legacy tailwindcss PostCSS plugin and requires @tailwindcss/postcss or the Vite plugin instead.

Can I use Framer Motion with Next.js Server Components?▼

Yes, but interactive animated components must be extracted into isolated leaf components with 'use client' at the top. Server Components render only static layouts, and perpetual animations must be memoized in their own client components to avoid re-rendering parents.

Why does the Skill ban h-screen for hero sections?▼

h-screen causes layout jumping on mobile browsers like iOS Safari because the viewport height changes when browser chrome hides. The Skill mandates min-h-[100dvh] for full-height sections to keep layouts stable across devices.

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

Use Framer Motion for UI and Bento-grid interactions by default. Reserve GSAP or Three.js exclusively 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.

Related Skills

Explore More Design & Creative Skills→
zaid-khan-codezaid-khan-code
3

shadcn-setup

Configure shadcn/ui and Tailwind CSS v4 for Next.js and React projects.

Community
Advanced
igoor-noprofitigoor-noprofit
8

always-test-frontend-changes

Test Vue frontend changes in a browser before confirming they work.

Official
Basic
asmortongptasmortongpt

visual-testing

Automate Playwright visual regression, accessibility, and performance checks across browsers.

Community
Advanced
rierino-openrierino-open
1

component-builder

Generates React editor components for the Rierino low-code page builder.

Official
Intermediate