skills.rest
batdorj-s
batdorj-sCOMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend-v1

Generate React or Next.js frontend designs with Tailwind CSS and enforced architectural rules.

Updated Jul 5, 2026
Search Tags:#react#tailwind css#ui design#frontend design#design variance#visual density#motion intensity
One-click install
npx skills add https://github.com/batdorj-s/tlj --skill design-taste-frontend-v1-batdorj-s
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend-v1
Source: https://github.com/batdorj-s/tlj/tree/main/.agents/skills/design-taste-frontend-v1
Command: npx skills add https://github.com/batdorj-s/tlj --skill design-taste-frontend-v1-batdorj-s

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenge of creating consistent, high-quality frontend designs by providing precise control over design variables and ensuring adherence to best practices.

Core Features & Use Cases

  • Design Variance Control: Adjust parameters like design variance, motion intensity, and visual density to influence the overall aesthetic of the design.
  • Architecture & Convention Enforcement: Enforce strict architectural rules and conventions for dependencies, framework usage, state management, and styling.
  • Bias Correction: Implement engineered rules to combat LLM biases in UI design, ensuring premium interfaces.
  • Creative Proactivity: Leverage advanced coding concepts for anti-slop implementation, including liquid glass refraction, magnetic micro-physics, and perpetual micro-interactions.
  • Performance Guardrails: Ensure optimal performance with guidelines on DOM cost, hardware acceleration, and z-index restraint.
  • Technical Reference: Provide detailed definitions for design variance, motion intensity, and visual density levels, along with forbidden patterns and high-end inspiration.
  • Creative Arsenal: Offer a library of advanced concepts for UI inspiration, including hero paradigms, navigation, layout, cards, scroll-animations, galleries, typography, micro-interactions, and effects.

Quick Start

Use the design-taste-frontend-v1 skill to generate a high-agency design with design variance set to 8, motion intensity to 6, and visual density to 4.

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 create visually striking React frontend designs with precise control over visual density and motion?▼

To create visually striking React frontend designs with precise control, you can use this Skill to adjust design variance, motion intensity, and visual density parameters. It enforces strict architectural rules and bias correction to ensure premium, high-agency interfaces.

What is the best way to prevent generic LLM UI designs when generating Tailwind CSS components?▼

The best way to prevent generic LLM UI designs in Tailwind CSS components is by applying engineered bias correction rules. This Skill enforces anti-slop implementation and uses a creative arsenal of advanced concepts like liquid glass refraction and magnetic micro-physics.

Can I use this frontend design Skill with frameworks other than Next.js or React?▼

No, you cannot use this frontend design Skill with other frameworks. It strictly requires React or Next.js and Tailwind CSS to enforce its architectural conventions, manage state, and apply styling.

How do I ensure optimal performance when implementing advanced micro-interactions in React?▼

To ensure optimal performance with advanced micro-interactions in React, this Skill provides performance guardrails. It enforces guidelines on DOM cost, hardware acceleration, and z-index restraint to prevent UI lag.

What technical references are available for defining motion intensity and design variance levels?▼

Technical references for motion intensity and design variance levels include detailed definitions for each parameter, forbidden patterns, and high-end inspiration. It offers a library covering hero paradigms, navigation, layouts, and scroll-animations.

Related Skills

Explore More Design & Creative Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Set up shadcn/ui components, forms, and dark mode in Next.js projects.

Community
Intermediate
s1366560s1366560
5

web-artifacts-builder

Create multi-component HTML artifacts with React, TypeScript, Vite, and Tailwind CSS.

Community
Advanced
ayofemiadeayofemiade

animation-designer

Create web animations and transitions using Framer Motion and CSS.

Community
Advanced
aaronbassettaaronbassett
4

flutter-core:flutter-ui-widgets

Provide a structured library of Flutter UI widgets for consistent layouts.

Community
Intermediate