skills.rest
Aytsuu
AytsuuCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-taste-frontend-v1

Generate frontend designs with predefined typography, color, layout, and motion parameters.

Updated May 28, 2026
Search Tags:#UI/UX#performance optimization#Framer Motion#frontend design#micro-interactions#high-agency#design engineering
One-click install
npx skills add https://github.com/Aytsuu/codemini --skill design-taste-frontend-v1-aytsuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend-v1
Source: https://github.com/Aytsuu/codemini/tree/main/.agents/skills/taste-skill-v1
Command: npx skills add https://github.com/Aytsuu/codemini --skill design-taste-frontend-v1-aytsuu

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill unit addresses the challenge of creating visually striking, high-agency frontend designs that adhere to strict design engineering directives, ensuring consistency and quality in UI/UX.

Core Features & Use Cases

  • Baseline Configuration: Provides a standard set of design parameters for variance, motion, and visual density.
  • Design Engineering Directives: Offers rules for typography, color calibration, layout diversification, and more to combat common AI design biases.
  • Creative Proactivity: Implements advanced concepts like liquid glass, magnetic micro-physics, and perpetual micro-interactions for engaging UI experiences.
  • Performance Guardrails: Ensures efficient and accessible design practices, including DOM cost optimization and hardware acceleration guidance.
  • Technical Reference: Provides detailed definitions for design variance, motion intensity, and visual density levels.
  • AI TELLS: Outlines forbidden patterns and high-end inspiration for creating premium UIs.
  • Creative Arsenal: Offers a library of advanced concepts for UI/UX design, including hero paradigms, navigation, layout, cards, scroll-animations, galleries, media, typography, micro-interactions, and effects.
  • Motion-Engine Bento Paradigm: Describes the "Bento 2.0" architecture and motion philosophy for modern SaaS dashboards and feature sections.
  • Final Pre-Flight Check: Ensures code adheres to best practices and performance criteria.

Quick Start

Use the design-taste-frontend-v1 skill to generate a new high-agency frontend design with the desired design variance, motion intensity, and visual density settings.

Frequently Asked Questions about design-taste-frontend-v1

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

FAQPage Schema
How do I generate high-agency frontend designs with strict UI/UX rules?▼

High-agency frontend designs are generated by applying predefined design parameters for typography, color, layout, and interactive elements to ensure consistency and quality in UI/UX workflows.

What are micro-interactions in frontend design and how do I add them?▼

Micro-interactions are advanced interactive elements like magnetic micro-physics and perpetual animations. You add them by applying creative proactivity directives that engage users without violating performance guardrails.

How do I optimize frontend design performance for DOM cost and hardware acceleration?▼

Frontend design performance is optimized by enforcing strict performance guardrails that include DOM cost optimization and hardware acceleration guidance, ensuring efficient and accessible UI practices.

Can I use Framer Motion for micro-interactions in modern SaaS dashboards?▼

Framer Motion can be used to implement the Motion-Engine Bento Paradigm, which provides a motion philosophy and architecture specifically designed for modern SaaS dashboards and feature sections.

How do I avoid common AI design biases when creating UI layouts?▼

AI design biases are avoided by following strict design engineering directives that enforce rules for typography, color calibration, and layout diversification, alongside avoiding forbidden patterns outlined in AI TELLS.

What is the Bento 2.0 architecture for frontend UI design?▼

Bento 2.0 architecture is a motion-engine paradigm describing layout and motion philosophy for modern SaaS dashboards, utilizing predefined visual density and motion intensity settings for premium UIs.

Related Skills

Explore More Design & Creative Skills→
dylantarredylantarre
38

animation-principles

Map Disney's 12 animation principles to UI motion guidelines.

Community
Basic
Selfdb-ioSelfdb-io

frontend-design

Generate production-grade frontend interfaces with CSS variables and design tokens.

Community
Basic
Cobalt-MoneyCobalt-Money
7

emil-design-eng

Encode design engineering principles for UI polish and animation.

Official
Advanced
jeannotlemaire-uxjeannotlemaire-ux

design-taste-frontend-v1

Preserve v1 taste-skill behavior with design and engineering directives.

Community
Advanced