Which tech stack does this skill support?

It is optimized for React and Next.js using Tailwind CSS (v3/v4), Framer Motion, and high-quality icon libraries like Phosphor or Radix.

What makes this skill different from default Claude behavior?

This skill overrides Claude's statistical bias toward generic layouts (like 3-column cards or the Inter font) and enforces professional design engineering rules and unique aesthetics.

Does it handle mobile responsiveness?

Absolutely. It enforces strict mobile-first rules, viewport stability using dynamic viewport units (dvh), and layout fallbacks to prevent horizontal scrolling and layout breakage.

High-Agency Frontend Architect

Name: High-Agency Frontend Architect
Author: CarlosCondor

byCarlosCondor

0•

Herramientas de Diseño

Transforms standard AI-generated code into premium, production-grade frontend interfaces by overriding default LLM design biases and enforcing strict UI/UX engineering principles.

The design-taste-frontend skill acts as a Senior UI/UX Engineer layer for Claude, specifically engineered to combat the 'generic AI look' often found in LLM-generated code. It implements a sophisticated framework based on adjustable metrics—Design Variance, Motion Intensity, and Visual Density—to ensure interfaces are distinctive, performant, and accessible. By enforcing strict rules on typography, color calibration, and component architecture, it enables developers to generate high-end React and Next.js applications that follow professional design systems and modern performance best practices.

Características Principales

01Metric-based design system with adjustable variance, motion, and density controls

02Automated dependency verification to ensure 3rd-party libraries are installed before use

03Hardware-accelerated animation patterns using Framer Motion and CSS transforms

040 GitHub stars

05Anti-Slop logic that bans common AI design clichés like 'Inter' font and 'AI Purple' gradients

06Strict React/Next.js architecture enforcement including RSC safety and interactive isolation

Casos de Uso

01Creating creative brand landing pages with asymmetric layouts and cinematic motion effects

02Developing high-end SaaS dashboards that require complex data density and professional typography

03Standardizing component libraries across teams to ensure performance-first CSS and accessible UI patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add carloscondor/carloscondor-landing design-taste-frontend

For use in Claude.ai and ChatGPT

Características Principales

01Metric-based design system with adjustable variance, motion, and density controls

02Automated dependency verification to ensure 3rd-party libraries are installed before use

03Hardware-accelerated animation patterns using Framer Motion and CSS transforms

040 GitHub stars

05Anti-Slop logic that bans common AI design clichés like 'Inter' font and 'AI Purple' gradients

06Strict React/Next.js architecture enforcement including RSC safety and interactive isolation

Casos de Uso

01Creating creative brand landing pages with asymmetric layouts and cinematic motion effects

02Developing high-end SaaS dashboards that require complex data density and professional typography

03Standardizing component libraries across teams to ensure performance-first CSS and accessible UI patterns