skills.rest
ruskibeats
ruskibeatsCOMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend

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

Updated May 15, 2026
Search Tags:#UI/UX design#component architecture#high-agency#metric-based#CSS hardware acceleration
One-click install
npx skills add https://github.com/ruskibeats/t1d --skill design-taste-frontend-ruskibeats
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/ruskibeats/t1d/tree/main/.agents/skills-archive/design-taste-frontend
Command: npx skills add https://github.com/ruskibeats/t1d --skill design-taste-frontend-ruskibeats

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, tailwindcss, framer-motion, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of designing UI/UX that goes beyond default LLM biases, emphasizing metric-based rules, strict component architecture, and CSS hardware acceleration.

Core Features & Use Cases

  • Metric-Based Design: Enforces design variance, motion intensity, and visual density to create high-agency interfaces.
  • Component Architecture: Strictly adheres to dependency verification, framework & interactivity, state management, and styling policies.
  • Anti-Emoji Policy: Ensures clean, professional code and content by banning emojis and enforcing icon use.
  • Responsiveness & Spacing: Standardizes breakpoints, viewport stability, and grid layouts for reliable structures.
  • Design Engineering Directives: Corrects LLM biases with deterministic typography, color calibration, layout diversification, and materiality rules.
  • Creative Proactivity: Implements "Liquid Glass" effects, magnetic micro-physics, perpetual micro-interactions, and layout transitions for engaging UI experiences.
  • Performance Guardrails: Ensures DOM cost optimization, hardware acceleration, and z-index restraint for smooth performance.
  • Technical Reference: Provides detailed dial definitions for design variance, motion intensity, and visual density levels.
  • AI TELLS: Outlines forbidden patterns and creative arsenal for high-end UI inspiration.
  • Motion-Engine Bento Paradigm: Offers a comprehensive guide for modern SaaS dashboard design with perpetual motion and micro-animations.
  • Final Pre-Flight Check: Ensures code evaluation against a matrix for global state, mobile layout, full-height sections, animations, and more.

Quick Start

Use the design-taste-frontend skill to create a high-agency UI/UX design with a design variance of 8, motion intensity of 6, and visual density of 4.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema
How do I enforce metric-based design rules and component architecture in React and Tailwind CSS?▼

Metric-based design rules in React and Tailwind CSS are enforced by applying strict component architecture, deterministic typography, color calibration, and layout diversification to correct default LLM biases and ensure high-agency UI structures.

What is CSS hardware acceleration and how does it optimize UI performance in Framer Motion?▼

CSS hardware acceleration optimizes UI performance in Framer Motion by offloading animations to the GPU, ensuring DOM cost optimization, z-index restraint, and smooth perpetual micro-interactions within high-agency interfaces.

How do I eliminate default LLM biases when generating UI/UX component code?▼

Eliminate default LLM biases when generating UI/UX component code by applying deterministic typography, color calibration, layout diversification, and an anti-emoji policy that enforces icon use for clean, professional frontend outputs.

Does this UI/UX design approach work without Framer Motion or Tailwind CSS dependencies?▼

This UI/UX design approach requires Framer Motion and Tailwind CSS dependencies to implement advanced UI effects, magnetic micro-physics, and strict styling policies for high-agency SaaS dashboard designs.

How do I standardize responsiveness and spacing for modern SaaS dashboard layouts?▼

Standardize responsiveness and spacing for modern SaaS dashboard layouts by enforcing standardized breakpoints, viewport stability, and grid layouts, followed by a final pre-flight check evaluating mobile layout and full-height sections.

What are the limitations of using high visual density and motion intensity in frontend design?▼

Limitations of high visual density and motion intensity in frontend design include increased DOM cost and potential performance bottlenecks, which require strict performance guardrails and hardware acceleration to maintain smooth UI experiences.

Related Skills

Explore More Design & Creative Skills→
TKlerxTKlerx

design-taste-frontend

Implement frontend UI/UX with React, Next.js, Tailwind CSS, and Framer Motion.

Community
Advanced
nazrulsoftwaredevnazrulsoftwaredev

motion-ui

Implement accessible UI motion patterns in React and Next.js with motion/react.

Community
Advanced
Himanshu040604Himanshu040604

design-taste-frontend

Generate React dashboards with metric-based design rules and hardware acceleration.

Community
Advanced
secondskysecondsky
204

aceternity-ui

Provide animated React components for Next.js applications with Tailwind CSS and Framer Motion.

Community
Advanced