skills.rest
Javeria-Javaid
Javeria-JavaidCOMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend

Generates React and Tailwind frontend interfaces with calibrated typography, color, layout, and motion rules.

3|Updated Jul 17, 2026
Search Tags:#frontend#react#design system#ui design#tailwind#responsive layout#framer motion
One-click install
npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill design-taste-frontend-javeria-javaid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore/tree/main/Users/Javeria/Desktop/Alkhidmat_foundation_lahore/.agents/skills/design-taste-frontend
Command: npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill design-taste-frontend-javeria-javaid

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLM-generated frontend code often falls into generic patterns like centered heroes, purple gradients, overused cards, missing loading states, and fragile mobile layouts. This Skill enforces senior-level design judgment so generated UI avoids these clichés and follows consistent, production-minded conventions. ## Core Features & Use Cases - Design Bias Correction: Bans common AI tells such as Inter font, neon glows, pure black, 3-column card rows, and generic placeholder names or data. - Configurable Design Dials: Drives output through DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY levels that control layout asymmetry, animation depth, and spacing density. - Framework Guardrails: Enforces React/Next.js RSC safety, Tailwind v3/v4 version checks, dependency verification, min-h-[100dvh] viewport stability, and Framer Motion performance isolation. - Use Case: Ask for a SaaS dashboard bento grid and receive components with spring-physics micro-interactions, skeleton loading states, and asymmetric layouts that collapse cleanly on mobile. ## Quick Start Use the design-taste-frontend skill to build a responsive pricing page with an asymmetric hero and animated bento feature grid.

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 design constraints: ban default fonts like Inter in favor of Geist or Satoshi, limit accents to one desaturated color, avoid centered heroes and 3-column card rows, and require loading, empty, and error states in every component.

How to add animations to React components without hurting performance?▼

Use Framer Motion's useMotionValue and useTransform instead of useState for continuous animations, animate only transform and opacity, and isolate perpetual loops in memoized client components. Never animate top, left, width, or height.

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

Yes, but you must check package.json first and never mix syntax versions. For Tailwind v4, use @tailwindcss/postcss or the Vite plugin instead of the tailwindcss PostCSS plugin.

Why does my full-height hero section jump on mobile Safari?▼

The h-screen utility uses 100vh, which changes as mobile browser chrome appears and disappears. Use min-h-[100dvh] instead so the section tracks the dynamic viewport height and stays stable.

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

Use Framer Motion for UI and bento interactions, and reserve GSAP or Three.js for isolated full-page scrolltelling or canvas backgrounds. Never mix them in the same component tree, and wrap GSAP or Three.js logic in useEffect cleanup blocks.

Related Skills

Explore More Design & Creative Skills→
aashahinaashahin

aceternity-ui

Install and configure animated React components for Next.js via the shadcn CLI.

Community
Intermediate
vercel-labsvercel-labs
1.5k

vercel

Emulate the Vercel REST API locally with npx.

Official
Intermediate
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
cano721cano721

figma

Translate Figma designs into React and Tailwind UI components.

Community
Advanced