Is this compatible with Next.js App Router?

Yes, it enforces strict React Server Component (RSC) safety, ensuring interactivity is isolated in client-side leaf components while layouts remain static for performance.

Can I adjust the level of animation or layout complexity?

Absolutely. You can set DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY on a scale of 1-10 to move from 'Symmetrical/Static' to 'Asymmetric/Cinematic' outputs.

How does this skill prevent 'generic' AI designs?

It implements 'Anti-Slop' rules that ban common AI signatures like the 'Lila' purple aesthetic, standard Inter fonts, and repetitive 3-column card layouts, forcing unique and professional alternatives.

Does it handle mobile responsiveness automatically?

Yes, it includes critical safeguards like 'Viewport Stability' (using min-h-[100dvh]) and aggressive mobile fallbacks for asymmetric grid layouts to prevent layout breakage.

High-Agency Frontend Architect

Name: High-Agency Frontend Architect
Author: cskwork

bycskwork

0•

디자인 도구

Enforces premium UI/UX standards and production-grade frontend patterns to eliminate generic AI design biases.

This skill transforms Claude into a senior UI/UX engineer by overriding the statistical biases that lead to 'generic' AI-generated interfaces. It utilizes a system of variable baseline configurations—Design Variance, Motion Intensity, and Visual Density—to drive layout logic and component architecture. From enforcing strict React Server Component (RSC) safety and Tailwind CSS version locking to implementing 'Liquid Glass' refraction and hardware-accelerated animations, this skill ensures that every frontend output is mathematically precise, performant, and visually distinct from standard 'startup slop' aesthetics.

주요 기능

010 GitHub stars

02Dynamic control over UI variance, motion intensity, and visual density metrics

03Anti-bias rules that ban 'AI purple', generic placeholders, and overused card layouts

04Performance-first animation logic using Framer Motion and hardware-accelerated transforms

05Mandatory dependency verification and installation prompts for 3rd party libraries

06High-end typography standards using premium sans-serif pairings like Geist and Satoshi

사용 사례

01Architecting scalable Next.js applications with strict separation of server and client components

02Building high-density SaaS dashboards that require complex data visualization and minimal padding

03Creating unique, asymmetric marketing landing pages that avoid standard three-column templates

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cskwork/claude-minimal-plugin taste-skill

For use in Claude.ai and ChatGPT

주요 기능

010 GitHub stars

02Dynamic control over UI variance, motion intensity, and visual density metrics

03Anti-bias rules that ban 'AI purple', generic placeholders, and overused card layouts

04Performance-first animation logic using Framer Motion and hardware-accelerated transforms

05Mandatory dependency verification and installation prompts for 3rd party libraries

06High-end typography standards using premium sans-serif pairings like Geist and Satoshi

사용 사례

01Architecting scalable Next.js applications with strict separation of server and client components

02Building high-density SaaS dashboards that require complex data visualization and minimal padding

03Creating unique, asymmetric marketing landing pages that avoid standard three-column templates