skills.rest
Sajra12
Sajra12COMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend-v1

Configure frontend design variance and architecture conventions for SaaS dashboards.

Updated Aug 23, 2026
Search Tags:#performance optimization#UI development#frontend design#design engineering#SaaS dashboard
One-click install
npx skills add https://github.com/Sajra12/MKT --skill design-taste-frontend-v1-sajra12
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend-v1
Source: https://github.com/Sajra12/MKT/tree/main/higado-graso/.agents/skills/design-taste-frontend-v1
Command: npx skills add https://github.com/Sajra12/MKT --skill design-taste-frontend-v1-sajra12

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill preserves the original V1 taste-skill's behavior, allowing for exact backward compatibility, especially for projects relying on its precise functionalities.

Core Features & Use Cases

  • Design Variance Configuration: Customizable baseline design variance settings for consistency across generations.
  • Architecture Conventions: Adherence to structural constraints like dependency verification, framework, interactivity, state management, styling policy, anti-emoji, responsiveness, and icons.
  • Design Engineering Directives: Rules for typography, color calibration, layout diversification, materiality, shadows, and interactive UI states.
  • Creative Proactivity: Advanced coding concepts for UI aesthetics like liquid glass, magnetic micro-physics, perpetual micro-interactions, layout transitions, and staggered orchestration.
  • Performance Guardrails: Optimizations for DOM cost, hardware acceleration, and z-index management.
  • Technical Reference: Detailed guidelines for design variance, motion intensity, visual density, and AI tells.
  • Creative Arsenal: High-end UI inspirations for navigation, layout, cards, scroll-animations, galleries, typography, and micro-interactions.
  • Motion-Engine Bento Paradigm: Modern SaaS dashboard architecture and motion philosophy with a focus on high-end aesthetics and performance.
  • Final Pre-Flight Check: Ensures global state use, mobile layout collapse, safe full-height sections, cleanup functions, empty/error states, cards isolation, and CPU-heavy animation isolation.

Quick Start

To use the design-taste-frontend-v1 skill, set your desired baseline configuration and run the skill with your specific project requirements.

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 optimize SaaS dashboard performance with Framer Motion and GSAP?▼

Optimize SaaS dashboard performance by enforcing hardware acceleration, managing DOM cost, and isolating CPU-heavy animations. This approach maintains high-end UI/UX aesthetics without degrading frontend rendering speed.

What are the best practices for high-agency frontend design engineering?▼

High-agency frontend design engineering requires strict architecture conventions for typography, color calibration, and materiality. It also involves creative proactivity like liquid glass effects and magnetic micro-physics to elevate UI aesthetics.

Does this frontend design skill work without Tailwind CSS?▼

No, this frontend design skill requires Tailwind CSS to execute its high-agency design tasks. It also depends on Framer Motion and GSAP to implement the required motion philosophy and interactive UI states.

How do I configure design variance for consistent UI development?▼

You configure design variance by setting customizable baseline configurations before running your project. This ensures consistent visual density and motion intensity across all generated frontend components and layouts.

What is a Motion-Engine Bento Paradigm in SaaS dashboard architecture?▼

A Motion-Engine Bento Paradigm is a modern SaaS dashboard architecture focusing on high-end aesthetics and performance. It integrates staggered orchestration and layout transitions to create a sophisticated visual experience.

Why do my frontend animations cause layout transitions to fail on mobile?▼

Frontend animations fail on mobile when pre-flight checks for mobile layout collapse and safe full-height sections are skipped. Properly isolating CPU-heavy animations and managing global state prevents these interactive UI failures.

Related Skills

Explore More Software Engineering Skills→
novskidevnovskidev
2

frontend-ui-animator

Analyze, plan, and implement UI animations in Next.js, Tailwind, and React projects.

Community
Advanced
stevenmunozstevenmunoz

deploy-function

Deploy Firebase Cloud Functions with pre-deploy validation and post-deploy health checks.

Community
Advanced
TW-NLPTW-NLP
91

web-artifacts-builder

Create interactive HTML artifacts from React projects with Tailwind CSS and shadcn/ui.

Community
Advanced
moonshineTPmoonshineTP

taste-skill-v1

Generate React or Next.js frontend designs with adjustable variance and Tailwind CSS.

Community
Advanced