Complete AI TrainingYourJobSkills for your job

Skills / frontend

design-taste-frontend

Use when building high-agency frontend interfaces with strict design taste, calibrated color, responsive layout, and motion rules.

IT & Software DevelopmentDesign & UXdesignfrontendreactui

High-Agency Frontend Skill

When to Use

  • Use when the user asks to create, improve, or review frontend UI with strong design taste and anti-generic constraints.
  • Use when React, Next.js, Tailwind, motion, component states, typography, spacing, color, or responsive behavior need senior-level design judgment.
  • Use when the output must override common LLM UI biases such as centered heroes, purple gradients, card overuse, poor states, and fragile layouts.

Example

User request:

Review this interface with @design-taste-frontend, identify the highest-impact design problems, and propose an implementation-ready improvement.

Limitations

  • This skill provides frontend design and implementation guidance; it does not replace project-specific product requirements, accessibility review, or user testing.
  • Verify framework versions, installed dependencies, responsive behavior, and build output in the target repository before treating generated UI as production-ready.
  • Do not force these design rules when the existing product, brand system, or platform conventions require a different visual direction.

1. ACTIVE BASELINE CONFIGURATION

  • DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)
  • MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics)
  • VISUAL_DENSITY: 4 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)

AI Instruction: The standa

Subscribers only

The full skill, its 1 bundled files and every download is included with every paid Complete AI plan.

Details

SourceLeonxlnx/taste-skill
License
Risk labelsafe ("critical" means the skill may run commands or touch files — read before use)
FilesSKILL.md
Added2026-04-17

Related skills

anti-ui-slop

Stop coding agents from shipping generic UI. Extend the product's design system, use UIZZE evidence only when useful, cover required states, and inspect the rendered result.

astro

Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.

chat-widget

Build a real-time support chat system with a floating widget for users and an admin dashboard for support staff. Use when the user wants live chat, customer support chat, real-time messaging, or in-app support.

chrome-extension-developer

Expert in building Chrome Extensions using Manifest V3. Covers background scripts, service workers, content scripts, and cross-context communication.

design-it

Routes frontend design tasks to 48 specific UI styles. Triggers for websites, app screens, or UI components requesting a specific aesthetic.

emil-design-eng

Use when designing or reviewing polished product UI with Emil Kowalski-inspired animation, interaction, and component craft guidance.