skills.rest
yrlanrteixeira
yrlanrteixeiraCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-taste-frontend

Apply UI/UX design guidelines to React, Next.js, and Tailwind CSS interfaces.

Updated Mar 21, 2026
Search Tags:#performance#React#Next.js#Tailwind CSS#UI/UX design#design engineering#high-end interfaces
One-click install
npx skills add https://github.com/yrlanrteixeira/landcraft --skill design-taste-frontend-yrlanrteixeira
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/yrlanrteixeira/landcraft/tree/main/.agents/skills/design-taste-frontend
Command: npx skills add https://github.com/yrlanrteixeira/landcraft --skill design-taste-frontend-yrlanrteixeira

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, next.js, tailwindcss, phosphor-icons/react, radix-ui/react-icons, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a set of guidelines and tools to create high-quality, professional UI/UX interfaces, overcoming common design pitfalls and ensuring consistency across applications.

Core Features & Use Cases

  • Design Variance Control: Enforce consistent design variance across interfaces.
  • Baseline Configuration: Set standard configurations for design elements like motion intensity and visual density.
  • Architecture & Conventions: Establish structural constraints for dependency verification, framework selection, and state management.
  • Styling Policy: Implement Tailwind CSS for styling and enforce version lock to maintain consistency.
  • Anti-Emoji Policy: Avoid emojis in code and content, replacing them with high-quality icons or SVGs.
  • Responsiveness & Spacing: Standardize breakpoints and layout containers for better user experience.
  • Icon Usage: Use specific icon libraries and standardize stroke widths.
  • Design Engineering Directives: Implement advanced design rules for typography, color calibration, layout diversification, and more.
  • Creative Proactivity: Implement high-end coding concepts for "Liquid Glass" effects, magnetic micro-physics, and micro-interactions.
  • Performance Guardrails: Apply guidelines for DOM cost, hardware acceleration, and z-index restraint.
  • Technical Reference: Provide definitions for design variance, motion intensity, visual density, and more.
  • AI TELLS: Avoid common AI design signatures for a premium, non-generic output.
  • Creative Arsenal: Offer inspiration for advanced UI concepts, animations, and more.
  • Motion-Engine Bento Paradigm: Utilize "Bento 2.0" architecture and motion philosophy for modern SaaS dashboards.
  • Landing Page Engineering: Provide additional constraints for hero sections, navigation, WhatsApp integration, and more.
  • Final Pre-Flight Check: Evaluate code against a matrix for global state, layout collapse, full-height sections, animations, empty states, and more.

Quick Start

Use the design-taste-frontend skill to generate a high-end UI/UX design for a new product landing page.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema
How do I create high-end UI/UX interfaces with React and Next.js without generating generic AI designs?▼

To create high-end UI/UX interfaces without generic AI designs, apply strict design engineering guidelines that enforce design variance control, motion intensity baselines, and avoid common AI TELLS. This ensures premium, professional output and consistency across your application.

What is the best way to manage styling and responsiveness for a Next.js landing page?▼

The best way to manage styling and responsiveness for a Next.js landing page is implementing Tailwind CSS with a version lock, standardizing layout breakpoints, and applying landing page engineering constraints for hero sections and navigation to ensure a consistent user experience.

Can I use custom SVGs instead of emojis for professional interface design?▼

Yes, you can and should use custom SVGs or high-quality icons instead of emojis for professional interface design. An anti-emoji policy enforces the use of specific icon libraries like Phosphor and Radix UI with standardized stroke widths to maintain visual integrity.

Does this design engineering approach support advanced UI concepts like liquid glass effects and micro-interactions?▼

Yes, this design engineering approach supports advanced UI concepts by providing a creative arsenal and proactive directives. It enables the implementation of liquid glass effects, magnetic micro-physics, and the Motion-Engine Bento Paradigm for modern SaaS dashboards.

How do I ensure performance guardrails are met when building complex Tailwind CSS interfaces?▼

To ensure performance guardrails are met when building complex Tailwind CSS interfaces, apply strict guidelines for DOM cost reduction, hardware acceleration, and z-index restraint. A final pre-flight check evaluates code against matrices for layout collapse, animations, and empty states.

Why do I need Phosphor and Radix UI dependencies for my React design system?▼

You need Phosphor and Radix UI dependencies for your React design system to standardize icon usage and ensure consistent visual density. These libraries provide the high-quality SVGs and structural components required to replace emojis and maintain professional design variance.

Related Skills

Explore More Design & Creative Skills→
Chinmay-23-cpuChinmay-23-cpu

design-taste-swiss-system

Generate Swiss-style UI/UX designs with Tailwind CSS and React or Next.js.

Community
Advanced
PoorRicanPoorRican

using-nautilus-trader

Guide NautilusTrader strategy development, backtesting, and live trading deployment.

Community
Advanced
AlfxjxAlfxjx

design-taste-frontend

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

Community
Advanced
zmsqnfl-commitszmsqnfl-commits
1

design-taste-frontend

Enforce bias-aware design rules for typography, color, motion, and layout in React/Next.js projects.

Community
Advanced