skills.rest
Yjj0333
Yjj0333COMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend-v1

Generates React and Next.js frontend code following opinionated design, motion, and typography rules.

Updated Aug 26, 2026
Search Tags:#frontend#react#next.js#tailwind css#animation#ui design#framer motion
One-click install
npx skills add https://github.com/Yjj0333/skills-manager-backup --skill design-taste-frontend-v1-yjj0333
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend-v1
Source: https://github.com/Yjj0333/skills-manager-backup/tree/main/design-taste-frontend-v1
Command: npx skills add https://github.com/Yjj0333/skills-manager-backup --skill design-taste-frontend-v1-yjj0333

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated frontend code often looks generic, with clichéd layouts, default fonts, purple gradients, and missing interaction states. This Skill enforces a strict set of design engineering rules so generated React/Next.js interfaces look distinctive, polished, and production-consistent. ## Core Features & Use Cases - Design Baseline Dials: Configurable DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY levels (default 8/6/4) that drive layout asymmetry, animation richness, and information density. - Anti-Slop Rules: Bans Inter font, purple/blue AI gradients, centered heroes, 3-column card rows, emojis, generic names, and fake data, while mandating premium fonts (Geist, Satoshi, Cabinet Grotesk) and realistic content. - Motion & Bento Specs: Prescribes Framer Motion spring physics, perpetual micro-interactions, staggered reveals, and a 5-card Bento dashboard paradigm with strict performance guardrails (transform/opacity only, isolated client components). - Use Case: Ask for a SaaS dashboard landing page and receive Next.js code with asymmetric layouts, liquid glass cards, magnetic buttons, skeleton loading states, and mobile-safe responsive fallbacks. ## Quick Start Ask the AI to build a modern SaaS dashboard landing page using this design skill's baseline configuration.

Frequently Asked Questions about design-taste-frontend-v1

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

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

Apply explicit design constraints: ban default fonts like Inter, limit accent colors to one desaturated hue, forbid centered hero layouts, and require asymmetric grids. This Skill encodes those rules as mandatory directives for React and Tailwind output.

How to add animations in React without hurting performance?▼

Animate only transform and opacity properties, never top, left, width, or height. Use Framer Motion's useMotionValue and useTransform for cursor-tracking effects instead of useState, and isolate perpetual animations in memoized client components.

Does this work with both Tailwind CSS v3 and v4?▼

Yes, but the Skill requires checking package.json first to lock the version. For v4 projects it forbids the tailwindcss PostCSS plugin and mandates @tailwindcss/postcss or the Vite plugin instead.

Can I use Framer Motion together with GSAP or Three.js?▼

Not in the same component tree. The Skill defaults to Framer Motion for UI and bento interactions, reserving GSAP and Three.js exclusively for isolated full-page scrolltelling or canvas backgrounds wrapped in useEffect cleanup blocks.

Why does h-screen cause layout jumps on mobile?▼

Mobile browsers like iOS Safari resize the viewport when toolbars show or hide, making h-screen unstable. The Skill mandates min-h-[100dvh] for full-height hero sections to prevent layout jumping.

What are the limitations of this design skill?▼

It is a prompt-instruction skill with no executable scripts, so it guides code generation rather than running builds or tests. It also targets React/Next.js with Tailwind specifically and does not cover other frameworks.

Related Skills

Explore More Design & Creative Skills→
secondskysecondsky
204

aceternity-ui

Provide animated React components for Next.js applications with Tailwind CSS and Framer Motion.

Community
Advanced
Prathmesh2000Prathmesh2000
1

performance-tester

Automate API and UI performance testing with k6 and Lighthouse CI.

Community
Advanced
amanpal3amanpal3
1

brand-identity

Enforces brand design tokens, tech stack rules, and voice guidelines when generating UI and copy.

Community
Basic
syncfusionsyncfusion

syncfusion-vue-common

Consolidate shared utilities for Syncfusion Vue components.

Official
Intermediate