skills.rest
safzanpirani
safzanpiraniCOMMUNITY
Explore all skills by this author →
Website𝕏@cheatyyyyGitHub

design-taste-frontend

Generate metric-based UI/UX designs with strict component architecture.

1|Updated Feb 1, 2026
Search Tags:#creative coding#performance optimization#ux design#frontend development#ui design
One-click install
npx skills add https://github.com/safzanpirani/pi-config --skill design-taste-frontend-safzanpirani
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/safzanpirani/pi-config/tree/main/skills/design-taste-frontend
Command: npx skills add https://github.com/safzanpirani/pi-config --skill design-taste-frontend-safzanpirani

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill solves the problem of generating high-quality, metric-based UI/UX designs that defy common AI-generated clichés, focusing on advanced architectural and styling conventions.

Core Features & Use Cases

  • Advanced Design Engineering: Enforces metric-based rules and strict component architecture.
  • Performance Guardrails: Implements performance optimizations and anti-emojis policy.
  • Creative Proactivity: Combats generic AI designs with advanced coding concepts.
  • Technical Reference: Provides a comprehensive guide to dial definitions and design principles.
  • AI TELLS: Outlines forbidden patterns and high-end inspiration for design excellence.
  • Creative Arsenal: Offers a library of advanced UI/UX concepts for memorable output.
  • Motion-Engine Bento Paradigm: Introduces a modern SaaS dashboard architecture with perpetual motion.
  • Final Pre-Flight Check: Evaluates code against a matrix of best practices.

Quick Start

Use the design-taste-frontend skill to generate a high-agency frontend design with these parameters: design-variance=8, motion-intensity=6, visual-density=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 generate high-end UI/UX designs that avoid common AI-generated clichés?▼

To generate high-end UI/UX designs avoiding common AI clichés, apply metric-based rules and strict component architecture for frontend development. This enforces advanced design engineering and performance guardrails to produce sophisticated digital interfaces.

What are the best practices for frontend performance optimization in modern SaaS dashboards?▼

Frontend performance optimization in modern SaaS dashboards requires implementing performance guardrails and a motion-engine bento paradigm. This architecture approach ensures perpetual motion while maintaining strict metric-based design principles and visual density.

Does this UI design approach enforce strict rules against using emojis and generic patterns?▼

Yes, this UI design approach enforces an anti-emojis policy and explicitly outlines forbidden AI patterns. It evaluates code against a matrix of best practices during a final pre-flight check to eliminate generic AI designs.

How do I configure design variance and motion intensity for frontend development?▼

To configure design variance and motion intensity for frontend development, specify parameters like design-variance=8, motion-intensity=6, and visual-density=4. These metrics dictate the creativity and architectural styling of the generated interface.

When should I use metric-based design principles for creative coding?▼

Use metric-based design principles for creative coding when you need high-agency frontend designs with precision and flair. It is essential for high-end digital interface design requiring advanced architectural conventions and performance optimization.

Related Skills

Explore More Design & Creative Skills→
billydeeii136billydeeii136

design-taste-frontend

Enforce design variance, motion intensity, and visual density metrics for premium digital interfaces.

Community
Advanced
emilneuraz-aiemilneuraz-ai

web-design-guidelines

Audit UI code against Web Interface Guidelines and report findings in file:line format.

Community
Intermediate
yrlanrteixeirayrlanrteixeira

design-taste-frontend

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

Community
Advanced
Lyiu-10Lyiu-10

design-taste-frontend

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

Community
Advanced