Can I use this for production applications?

Yes, the skill focuses on generating production-grade, functional code that adheres to technical constraints and performance best practices while maintaining high design standards.

How does this skill avoid generic AI aesthetics?

The skill is programmed to explicitly avoid 'AI slop' like Inter font and purple gradients, instead prioritizing bold typography, unique layouts, and specific aesthetic themes like brutalism or luxury minimalism.

Which frameworks does the Frontend Design skill support?

It is optimized for modern web development including HTML/CSS/JS, React, Vue, and specialized libraries like Motion for advanced animations.

Does it include support for animations?

Absolutely. It emphasizes sophisticated motion design, using CSS-only solutions for standard web projects and libraries like Motion for React-based applications.

Frontend Design

Name: Frontend Design
Author: dbalanco

bydbalanco

0•

Design Tools

Generates distinctive, production-grade frontend interfaces that prioritize high-quality aesthetics over generic AI-generated patterns.

The Frontend Design skill transforms Claude into a sophisticated UI/UX engineer capable of building memorable web components and applications. By moving beyond 'AI slop' aesthetics like overused system fonts and standard layouts, this skill implements bold design thinking across typography, motion, and spatial composition. It allows developers to specify extreme aesthetic directions—ranging from brutalist to luxury refined—ensuring that the resulting React or Vue code is not only production-ready but also visually striking and unique to the project's brand identity.

Key Features

01Advanced Typography: Prioritizes characterful font pairings and custom type scales over generic system fonts.

02Intentional Aesthetic Direction: Choose from diverse styles like brutalist, minimal, or retro-futuristic to ensure brand-specific UI.

03Creative Spatial Layouts: Utilizes grid-breaking elements, asymmetry, and intentional negative space for modern compositions.

04Production-Grade Code: Generates clean, functional, and accessible code compatible with modern frameworks like Next.js 15.

05Sophisticated Motion: Implements high-impact CSS animations and Motion library effects for delightful user interactions.

060 GitHub stars

Use Cases

01Developing custom component libraries with unique visual identities and micro-interactions.

02Prototyping experimental web interfaces with complex textures, gradients, and motion design.

03Building high-end SaaS landing pages that require a premium, non-generic look and feel.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dbalanco/perseon-marketplace frontend-design

For use in Claude.ai and ChatGPT

Key Features

01Advanced Typography: Prioritizes characterful font pairings and custom type scales over generic system fonts.

02Intentional Aesthetic Direction: Choose from diverse styles like brutalist, minimal, or retro-futuristic to ensure brand-specific UI.

03Creative Spatial Layouts: Utilizes grid-breaking elements, asymmetry, and intentional negative space for modern compositions.

04Production-Grade Code: Generates clean, functional, and accessible code compatible with modern frameworks like Next.js 15.

05Sophisticated Motion: Implements high-impact CSS animations and Motion library effects for delightful user interactions.

060 GitHub stars

Use Cases

01Developing custom component libraries with unique visual identities and micro-interactions.

02Prototyping experimental web interfaces with complex textures, gradients, and motion design.

03Building high-end SaaS landing pages that require a premium, non-generic look and feel.