Does it include accessibility considerations?

Yes, while prioritizing high-end aesthetics, the skill guides Claude to maintain technical constraints including performance, responsive layout, and web accessibility standards.

How does this skill avoid generic 'AI-looking' designs?

The skill explicitly rejects common defaults like Inter fonts, system gradients, and predictable layouts, instead enforcing specific aesthetic styles like brutalism, luxury-refined, or editorial design.

What kind of visual effects can I expect?

You can expect advanced techniques like grain overlays, gradient meshes, custom cursors, staggered reveal animations, and sophisticated motion sequences.

Can I use this with modern frameworks like React or Vue?

Yes, the skill is framework-agnostic and generates production-ready code for HTML/CSS, React, Vue, and other modern frontend libraries.

Frontend Design

Name: Frontend Design
Author: clsandoval

byclsandoval

0•

디자인 도구

Generates distinctive, production-grade frontend interfaces that avoid generic AI aesthetics through bold design choices and precise implementation.

This skill empowers Claude to move beyond standard component patterns and 'AI slop' by applying professional design thinking to frontend development tasks. It guides the creation of high-fidelity web interfaces using custom typography, advanced spatial compositions, and sophisticated motion effects. Whether building a minimalist landing page or a maximalist dashboard, the skill ensures code is visually striking, technically sound, and tailored to a specific aesthetic vision rather than defaulting to overused industry trends like standard system fonts or predictable color palettes.

주요 기능

01Sophisticated Visual Textures (Gradient meshes, noise, and grain overlays)

02Advanced Typography Selection and Font Pairing Strategies

03Aesthetic Direction Commitments (Minimalist, Maximalist, Retro-futuristic, etc.)

040 GitHub stars

05High-Impact Motion and CSS-driven Micro-interactions

06Non-Standard Spatial Layouts and Grid-Breaking Compositions

사용 사례

01Building a unique brand landing page that stands out from industry competitors.

02Developing high-end web components with custom animations and polished UI details.

03Prototyping distinctive design systems that move beyond standard UI framework patterns.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add clsandoval/monorepo frontend-design

For use in Claude.ai and ChatGPT

주요 기능

01Sophisticated Visual Textures (Gradient meshes, noise, and grain overlays)

02Advanced Typography Selection and Font Pairing Strategies

03Aesthetic Direction Commitments (Minimalist, Maximalist, Retro-futuristic, etc.)

040 GitHub stars

05High-Impact Motion and CSS-driven Micro-interactions

06Non-Standard Spatial Layouts and Grid-Breaking Compositions

사용 사례

01Building a unique brand landing page that stands out from industry competitors.

02Developing high-end web components with custom animations and polished UI details.

03Prototyping distinctive design systems that move beyond standard UI framework patterns.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add clsandoval/monorepo frontend-design

For use in Claude.ai and ChatGPT