taste

Configure UI/UX design guidelines for typography, color, layout, and motion.

Updated Apr 1, 2026
One-click install
npx skills add https://github.com/aarushlohit/TheRocketProject --skill taste-aarushlohit
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: taste
Source: https://github.com/aarushlohit/TheRocketProject/tree/main/rocket/external/shokunin/.pack/skills/taste
Command: npx skills add https://github.com/aarushlohit/TheRocketProject --skill taste-aarushlohit

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill unit provides a comprehensive set of guidelines and best practices for UI/UX design, helping designers create high-quality digital interfaces.

Core Features & Use Cases

  • Design Variance and Motion Intensity: Offers configurable settings for design variance and motion intensity to cater to different project needs.
  • Typography and Color Calibration: Provides specific guidelines for typography, color calibration, and the use of colors in design.
  • Layout Diversification and Materiality: Recommends layout diversification techniques and materiality and shadows for better design.
  • Interactive UI States: Defines best practices for interactive UI states, including loading, empty, error, and success states.
  • Performance Guardrails: Ensures that the design follows performance guardrails like GPU-safe animations and reduced motion preferences.
  • Technical Reference: Offers detailed technical references for design variance, motion intensity, visual density, and AI tells.

Quick Start

Use the taste skill to generate a design brief for a new project with high design variance and fluid motion intensity.

Frequently Asked Questions about taste

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

FAQPage Schema
What are the best practices for configuring UI design variance and motion intensity?

UI design variance and motion intensity are configured using specific guidelines that cater to different project needs, ensuring fluid interactions while maintaining performance guardrails like GPU-safe animations and reduced motion preferences.

How do I calibrate typography and color for UI/UX design guidelines?

Typography and color calibration for UI/UX design involves applying specific guidelines for font selection and color usage, ensuring visual consistency and materiality through calibrated shadows and layout diversification techniques.

Can I use these UI/UX design guidelines with Tailwind CSS and Framer Motion?

Yes, these UI/UX design guidelines require knowledge of design principles and tools like Tailwind CSS, Framer Motion, and CSS Grid to effectively implement layout diversification and motion intensity configurations.

What are the recommended interactive UI states for handling loading and error conditions?

Recommended interactive UI states define best practices for loading, empty, error, and success conditions, ensuring robust interface design that handles performance guardrails and visual density effectively.

How do I generate a design brief with high design variance and fluid motion intensity?

You can generate a design brief with high design variance and fluid motion intensity by applying the Skill's configurable settings, leveraging technical references for visual density and AI tells to guide the process.

Why do my UI animations fail performance guardrails and how can I fix them?

UI animations fail performance guardrails when not optimized for GPU-safe rendering and reduced motion preferences; applying the Skill's technical references ensures motion intensity adheres to performance constraints.