skills.rest
MANR255926
MANR255926COMMUNITY
Explore all skills by this author →
𝕏@Allyan255926GitHub

design-taste-frontend

Generates React and Tailwind frontend interfaces following metric-based design rules and motion specifications.

Updated Aug 31, 2026
Search Tags:#frontend#react#dashboard#tailwind css#animation#ui design#framer motion
One-click install
npx skills add https://github.com/MANR255926/GARAGE --skill design-taste-frontend-manr255926
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/MANR255926/GARAGE/tree/main/.agents/skills/ui-taste
Command: npx skills add https://github.com/MANR255926/GARAGE --skill design-taste-frontend-manr255926

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLMs produce generic, clichéd frontend code with predictable layouts, default fonts, and static states. This Skill enforces engineered design rules that override those biases, producing distinctive, production-grade UI code. ## Core Features & Use Cases - Bias-Corrected Design Rules: Bans common AI patterns like Inter font, purple gradients, centered heroes, and 3-column card layouts, enforcing asymmetric grids and calibrated color palettes. - Tunable Design Dials: Configures DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY levels (1-10) that drive layout, animation, and spacing decisions across all generated components. - Motion & Bento Specifications: Provides Framer Motion spring physics, perpetual micro-interactions, staggered orchestration, and five Bento grid card archetypes for SaaS dashboards. - Use Case: Ask for a SaaS analytics dashboard and receive a Next.js interface with a Bento grid, infinite-loop status indicators, skeleton loading states, and mobile-safe responsive fallbacks. ## Quick Start Use the design-taste-frontend skill to build a React dashboard with a Bento grid layout and animated status cards.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema
How do I generate a non-generic React dashboard UI?▼

Define DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY levels, then apply the Bento grid archetypes with Framer Motion spring physics. Avoid default card layouts by using border-based grouping and asymmetric grids instead.

What fonts should I use instead of Inter for premium UI?▼

Use Geist, Outfit, Cabinet Grotesk, or Satoshi for display and body text. For dashboards, pair Geist with Geist Mono or Satoshi with JetBrains Mono, and never use serif fonts on software interfaces.

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

Yes, but you must check package.json first since v4 syntax differs from v3. For v4 projects, use @tailwindcss/postcss or the Vite plugin instead of the tailwindcss PostCSS plugin.

Why should I avoid h-screen for hero sections?▼

The h-screen utility causes layout jumping on mobile browsers like iOS Safari due to dynamic viewport heights. Use min-h-[100dvh] instead for stable full-height sections across devices.

Can I mix Framer Motion with GSAP in the same component?▼

No, never mix GSAP or ThreeJS with Framer Motion in the same component tree. Use Framer Motion for UI interactions and reserve GSAP or ThreeJS for isolated scrolltelling or canvas backgrounds with useEffect cleanup.

How do I animate magnetic buttons without performance issues?▼

Use Framer Motion's useMotionValue and useTransform outside the React render cycle instead of useState. This prevents re-render loops and performance collapse on mobile devices during continuous cursor tracking.

Related Skills

Explore More Design & Creative Skills→
PP-NamiasPP-Namias
2

frontend-design

Build React UI components with Tailwind CSS and Framer Motion.

Community
Intermediate
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
asmortongptasmortongpt

visual-testing

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

Community
Advanced
d0d012d0d012
9

figma-design

Extract tokens, styles, and constraints from Figma design files.

Community
Advanced