Is this skill compatible with modern frameworks?

While framework-agnostic, it focuses on high-fidelity output for any web project, prioritizing modular components, clean state logic, and CSS excellence.

What are the core animation principles used?

The skill follows a 12-principle framework where motion must be physics-based (using springs), continuous (morphing states instead of cutting), and meaningful to the user narrative.

Does it include accessibility and performance checks?

Yes, it includes built-in heuristic analysis tools (ux-audit.js) to verify color contrast, spacing consistency, and compliance with design tokens.

Why is the Cyberpunk aesthetic prohibited?

To ensure professional and distinctive results, the skill avoids 'Cyberpunk' clichés like neon glows and matrix rain, which are often markers of low-effort AI generation.

How does this skill avoid a generic 'AI' look?

It enforces a strict mandate against overused system fonts, predictable purple gradients, and generic templates, requiring context-specific character and original design choices.

Elite Frontend Design

Name: Elite Frontend Design
Author: xenitV1

byxenitV1

•

202

•

デザインツール

Builds high-fidelity, production-grade web interfaces using advanced UI/UX psychology and physics-based motion principles.

The Frontend Design skill transforms Claude into a senior UI architect focused on creating distinctive, bespoke user interfaces that transcend generic AI-generated aesthetics. By enforcing a strict 'Anti-AI Aesthetic Mandate,' it avoids overused design patterns in favor of original, high-performance layouts. The skill integrates cognitive load management, physics-based animation frameworks, and advanced CSS composition to deliver professional-grade frontends that prioritize human-centric storytelling and intuitive interaction.

主な機能

01Heuristic UX auditing for accessibility and cognitive load management

02Anti-AI Aesthetic Mandate to ensure unique, non-generic visual identities

03Physics-based spring animation and continuous motion storytelling

04Integrated TDD and performance optimization for production-ready code

05Advanced CSS art composition using LCH materials and geometric patterns

06202 GitHub stars

ユースケース

01Refactoring generic UI components into immersive, high-performance layouts

02Implementing complex micro-interactions and physics-based state transitions

03Developing a unique, high-fidelity brand identity for a new web application

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xenitv1/claude-code-maestro frontend-design

For use in Claude.ai and ChatGPT

Download Skill