design-taste-frontend

Generate React and Tailwind CSS landing page code from user briefs.

Updated May 6, 2026

Search Tags:#design #ui #accessibility #frontend #react #tailwind

Ready to run

npx skills add https://github.com/johan-Rm/agents --skill design-taste-frontend-johan-rm

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/johan-Rm/agents/tree/main/skills/design-taste-frontend
Command: npx skills add https://github.com/johan-Rm/agents --skill design-taste-frontend-johan-rm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill prevents the generation of generic, templated, or low-quality frontend code by enforcing strict design discipline, aesthetic intent, and accessibility standards.

Core Features & Use Cases

Brief Inference: Analyzes user requirements to determine the appropriate design system and aesthetic direction before writing code.
Design Engineering: Enforces layout, typography, and color consistency rules to ensure professional-grade output.
Use Case: Use this skill when building a landing page or portfolio to ensure the result avoids common AI-generated design clichés like purple gradients or generic card layouts.

Quick Start

Activate the design-taste-frontend skill and provide a brief for your new landing page to receive a design read and implementation plan.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema

How do I generate high-quality React code for a landing page without generic AI design clichés?▼

To generate high-quality React code without generic AI design clichés, provide a project brief to this skill to infer aesthetic intent and enforce strict constraints on typography, color, and layout.

What is the best way to ensure accessibility in frontend Tailwind CSS components?▼

The best way to ensure accessibility in frontend Tailwind CSS components is applying design engineering principles that enforce accessibility standards and visual consistency during code generation.

How do I build a professional portfolio with Tailwind CSS that avoids templated layouts?▼

To build a professional portfolio with Tailwind CSS that avoids templated layouts, supply a brief to this skill to enforce professional-grade component architecture and strict design discipline.

Can I use this to infer design systems for React frontend projects?▼

Yes, you can infer design systems for React frontend projects by analyzing user requirements to determine the appropriate aesthetic direction before writing any code.

Why does my generated frontend UI look generic and lack visual consistency?▼

Your generated frontend UI looks generic and lacks visual consistency because it lacks enforced design engineering principles that prevent low-quality outputs like purple gradients or generic card layouts.