skills.rest
JBonfim
JBonfimCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-taste-frontend

Enforce typography, color, and layout rules for React or Next.js interfaces.

Updated May 15, 2026
Search Tags:#react#design systems#nextjs#tailwindcss#framer motion#ui engineering#ux states
One-click install
npx skills add https://github.com/JBonfim/skill-developer --skill design-taste-frontend-jbonfim
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/JBonfim/skill-developer/tree/main/.agents/skills/design-taste-frontend
Command: npx skills add https://github.com/JBonfim/skill-developer --skill design-taste-frontend-jbonfim

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents generic, biased, and inconsistent frontend UI by enforcing strict typography, layout, motion, and component architecture guidelines tuned for premium React/Next.js interfaces.

Core Features & Use Cases

  • Bias-correct design engineering: Applies deterministic typography scales, calibrated single-accent color policy, and anti-generic layout rules to avoid common LLM UI clichés.
  • RSC-safe architecture & interaction isolation: Enforces Server Components by default and isolates interactive motion/glass features into leaf Client Components when needed.
  • Production-grade UI states: Requires complete loading, empty, and error experiences plus tactile :active feedback using consistent patterns.
  • Premium motion & performance guardrails: Uses Framer Motion principles for high-agency choreography while restricting costly animations and preventing GPU/layout thrash.

Quick Start

Use design-taste-frontend to generate a premium React or Next.js page layout with consistent typography, bias-correct spacing, and fully implemented loading, empty, and error states.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema
How do I prevent generic, biased UI patterns in React and Next.js interfaces?▼

Prevent generic UI patterns in React and Next.js by enforcing deterministic typography scales, calibrated single-accent color policies, and strict layout rules to achieve premium, bias-correct frontend interfaces.

How do I isolate interactive motion and glass effects in Next.js Server Components?▼

Isolate interactive motion and glass effects in Next.js by enforcing RSC-safe architecture by default and confining Framer Motion interactions into leaf Client Components when needed.

Why do my frontend layouts break with unstable full-height components and GPU thrash?▼

Unstable full-height layouts and GPU thrash occur from unoptimized animations; prevent them by applying performance guardrails that restrict costly Framer Motion choreography and ban unstable full-height layout patterns.

Does Tailwind CSS support deterministic typography scales and calibrated accent colors?▼

Tailwind CSS supports deterministic typography scales and calibrated accent colors by enforcing strict styling constraints, producing bias-correct spacing and consistent single-accent color calibration across SaaS interfaces.

What is the best way to implement complete loading, empty, and error UX states in a SaaS dashboard?▼

Implement complete loading, empty, and error UX states in a SaaS dashboard by enforcing production-grade UI state cycles with tactile :active feedback using consistent frontend patterns.

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
PaldomPaldom
11

vercel-react-best-practices

Apply Vercel best practices to React and Next.js performance.

Community
Advanced
aberrantCodeaberrantCode
1

design-taste-frontend

Generate production-ready React and Next.js component architecture with Tailwind and Framer Motion.

Community
Advanced
Lyiu-10Lyiu-10

design-taste-frontend

Enforce premium design rules and anti-slop guardrails for React and Next.js frontends.

Community
Advanced