skills.rest
FrekiManagarm
FrekiManagarmCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-taste-frontend

Enforce deterministic typography, color calibration, and layout rules for React/Next.js interfaces.

Updated Feb 24, 2026
Search Tags:#frontend architecture#react#design systems#ui design#tailwindcss#motion design#ux states
One-click install
npx skills add https://github.com/FrekiManagarm/dunlo --skill design-taste-frontend-frekimanagarm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/FrekiManagarm/dunlo/tree/main/.agents/skills/design-taste-frontend
Command: npx skills add https://github.com/FrekiManagarm/dunlo --skill design-taste-frontend-frekimanagarm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents generic, cliché-prone UI output by enforcing a strict, metric-driven frontend design system and interaction engineering rules.

Core Features & Use Cases

  • Architecture & Framework Guardrails: Enforces React/Next.js conventions, Server vs Client Component separation, and isolated interactive leaf components to keep performance predictable.
  • Design Engineering Bias Correction: Calibrates typography, density, spacing, and palette constraints while actively avoiding common LLM UI failure modes (center bias, oversaturated accents, card overuse, etc.).
  • Interaction & Motion Discipline: Implements loading/empty/error states and advanced micro-interactions using safe motion practices (e.g., Framer Motion rules) for tactile, non-generic UX.
  • Bento-Style Premium UI Patterns: Guides “Bento 2.0” layout archetypes and perpetual micro-interactions to produce high-end dashboard/feature sections.

Quick Start

Use this skill to generate a premium dashboard feature section that follows its baseline design variance, includes loading/empty/error states, and applies bias-corrected typography, spacing, and motion rules without using banned aesthetics.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema
How do I build premium React dashboards without generic LLM UI bias?▼

Build premium React dashboards by applying strict, metric-driven frontend design rules that enforce deterministic typography, color calibration, and layout diversification to actively avoid common LLM failure modes like center bias and oversaturated accents.

What are the best practices for implementing loading, empty, and error states in Next.js?▼

Implement loading, empty, and error states in Next.js by isolating interactive leaf components and applying motion performance guardrails to ensure predictable UX and Server Component-safe structure.

How do I structure React Server and Client Components for interactive bento grids?▼

Structure React bento grids by separating Server vs Client Components and isolating interactive leaf components to keep performance predictable while applying Bento 2.0 layout archetypes.

Does this UI design approach work with TailwindCSS and Framer Motion?▼

Yes, the UI design approach uses Tailwind-first styling and applies safe motion practices, including Framer Motion rules, to create tactile, non-generic micro-interactions.

Why does my AI generated frontend UI look cliché and how do I fix it?▼

AI generated frontend UI looks cliché due to uncorrected LLM biases like card overuse and poor density; fix it by enforcing strict design engineering bias correction rules for typography, spacing, and palette constraints.

When should I avoid using bento grid layouts for my React dashboard?▼

Avoid using bento grid layouts when your React dashboard requires non-feature section architectures, as these premium patterns are specifically guided for high-end dashboard and feature sections.

Related Skills

Explore More Design & Creative Skills→
ECFN15ECFN15

design-taste-frontend

Plan and enforce bias-aware frontend architectures for React/Next.js projects.

Community
Advanced
ClinscottClinscott

design-taste-frontend

Enforces metric-based rules and component architecture for React/Next.js frontend code with Tailwind styling.

Community
Advanced
ruskibeatsruskibeats

design-taste-frontend

Design React UI/UX with metric-based rules and CSS hardware acceleration.

Community
Advanced
AlfxjxAlfxjx

design-taste-frontend

Enforce metric-based UI/UX rules and optimize frontend design for React or Next.js projects.

Community
Advanced