skills.rest
mycelium-hq
mycelium-hqOFFICIAL
Explore all skills by this author →
GitHub

frontend-taste

Codify frontend design taste for React, Next.js, Tailwind, and Framer Motion workflows.

31|20|Updated Apr 9, 2026
Search Tags:#frontend#guidelines#ui-design#design-audit#design-taste#motion-principles
One-click install
npx skills add https://github.com/mycelium-hq/ai-brain-starter --skill frontend-taste-mycelium-hq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-taste
Source: https://github.com/mycelium-hq/ai-brain-starter/tree/main/skills/frontend-taste
Command: npx skills add https://github.com/mycelium-hq/ai-brain-starter --skill frontend-taste-mycelium-hq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend design often drifts when AI generates UI components. The Frontend Taste Engine codifies a reusable taste framework to keep outputs aligned with established design standards, reducing visual glitches and inconsistent experiences.

Core Features & Use Cases

  • Prescriptive design guidance for typography, color, motion, and component conventions across React/Next.js/Tailwind/Framer Motion stacks.
  • Audit-ready references to the impeccable substrate and taste principles to maintain brand and product alignment.
  • Use Case: When drafting a hero, dashboard, or UI component, run this skill to enforce hero discipline, motion language, and consistent surface treatment.

Quick Start

Import this skill as the frontend-taste layer and run a design audit on the current UI prompts to enforce hero discipline and motion principles.

Frequently Asked Questions about frontend-taste

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

FAQPage Schema
How do I maintain consistent UI design when generating React components with AI?▼

Frontend design taste prevents visual drift in AI-generated UI by codifying rules for typography, color, and motion, ensuring consistent component outputs across your React and Next.js workflows.

What is frontend design taste and how does it enforce anti-slop rules?▼

Frontend design taste is a prescriptive framework that codifies design standards to prevent visual glitches. It enforces anti-slop rules and motion principles through audit-ready references for impeccable UI outputs.

How do I run a design audit on Tailwind and Framer Motion UI components?▼

Run a design audit by importing the frontend-taste layer into your workflow. This enforces hero discipline, motion language, and consistent surface treatment for Tailwind and Framer Motion components.

Does this design taste framework work for dashboards and hero sections at scale?▼

Yes, the design taste framework works for dashboards and hero sections at scale. It provides prescriptive guidance for component conventions and surface treatment to maintain brand alignment across AI-generated interfaces.

Can I use this to fix typography and color inconsistencies in Next.js applications?▼

Yes, you can use this to fix typography and color inconsistencies in Next.js applications. It applies prescriptive design guidance and guardrails to maintain consistent visual standards across your stack.

Related Skills

Explore More Design & Creative Skills→
deomiarndeomiarn

animation-library

Implement UI animations with Framer Motion, CSS, and scroll-triggered effects.

Community
Intermediate
captain-corgicaptain-corgi

frontend-design-pro

Generate production-ready HTML/CSS/JS interfaces with matched Unsplash or Pexels images.

Community
Advanced
LeonxlnxLeonxlnx
74.5k

design-taste-frontend

Enforce frontend design guardrails for React and Next.js UI generation.

Community
Advanced
AshesOfTheUndeadAshesOfTheUndead

luxury

Provide design-system guidelines for implementing a dark aesthetic in Roblox UI development.

Community
Intermediate