skills.rest
timikalo7
timikalo7COMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend-v1

Generates premium React and Next.js frontend interfaces with enforced design rules and motion patterns.

Updated Jun 9, 2026
Search Tags:#react#design system#next.js#tailwind css#frontend design#framer motion#ui generation
One-click install
npx skills add https://github.com/timikalo7/Execute --skill design-taste-frontend-v1-timikalo7
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend-v1
Source: https://github.com/timikalo7/Execute/tree/main/.claude/skill-library/taste-skill-v1
Command: npx skills add https://github.com/timikalo7/Execute --skill design-taste-frontend-v1-timikalo7

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLM-generated frontend code tends to fall into generic, clichéd patterns: centered heroes, purple gradients, Inter font, three-column card rows, and static UIs with no loading or error states. This Skill enforces a strict set of design engineering rules so generated React/Next.js interfaces look distinctive, polished, and production-grade. ## Core Features & Use Cases - Design Bias Correction: Bans common AI tells (Inter font, neon glows, pure black, generic names like "John Doe", Unsplash links) and enforces deterministic typography, single-accent color calibration, and asymmetric layouts. - Tunable Design Dials: Three global variables (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) drive layout asymmetry, animation intensity, and information density across all generated components. - Motion & Bento Specs: Provides Framer Motion spring physics, perpetual micro-interactions, staggered orchestration, and a 5-card Bento grid paradigm for SaaS dashboards, with strict performance guardrails (transform/opacity only, isolated client components). - Use Case: Ask for a SaaS landing page or analytics dashboard and receive Tailwind-styled Next.js code with split-screen heroes, magnetic buttons, skeleton loaders, and empty/error states instead of a generic centered template. ## Quick Start Ask the agent to build a React dashboard or landing page and it will apply these design rules, motion specs, and anti-cliché constraints to the generated code.

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 React UI look less generic?▼

Apply explicit design constraints: ban default fonts like Inter in favor of Geist or Satoshi, limit accents to one desaturated color, forbid centered hero layouts, and require loading, empty, and error states. This Skill encodes those rules as enforced generation directives.

How to add animations to React components with Framer Motion?▼

Use spring physics (stiffness 100, damping 20), layout and layoutId props for shared element transitions, and staggerChildren for list reveals. Animate only transform and opacity, and isolate perpetual loops in memoized client components to protect performance.

Can I use Tailwind CSS v4 syntax in a v3 Next.js project?▼

No. Tailwind v4 syntax and config differ from v3, so check package.json first. For v4, use @tailwindcss/postcss or the Vite plugin instead of the tailwindcss PostCSS plugin; mixing versions causes build failures.

Why does my mobile hero section jump on iOS Safari?▼

Using h-screen for full-height sections causes layout jumps because mobile browser chrome changes the viewport height. Use min-h-[100dvh] instead, which tracks the dynamic viewport height and keeps the layout stable.

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

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

Related Skills

Explore More Design & Creative Skills→
sliecsliec

prd-doc-writer

Writes PRD documents through staged user confirmations with ASCII wireframes and Mermaid diagrams.

Community
Advanced
apireaisecurityapireaisecurity

uat-visual-regression

Detects visual UI regressions by comparing screenshots across routes and breakpoints.

Community
Advanced
DonTiziDonTizi
2

security-audit

Scan codebases for secrets, OWASP risks, and vulnerable dependencies.

Community
Advanced
Manish-Let-It-BeManish-Let-It-Be
1

design-taste-frontend-v1

Provide the exact v1 design-taste frontend UI and configurations.

Community
Intermediate