Which frameworks and libraries are supported?

The skill is framework-agnostic and works with HTML/CSS/JS, React, Vue, and popular motion libraries like Framer Motion or GSAP.

How do I specify a design style?

You can request a specific tone like 'minimalist', 'brutalist', or 'editorial', or let the skill choose a conceptual direction based on your project's purpose.

Can I use this for production-level applications?

Yes, the skill emphasizes production-grade, functional code that focuses on performance, meticulous detail, and visual impact.

How does this skill differ from standard AI code generation?

It specifically avoids generic 'AI slop' by forcing the AI to commit to a bold aesthetic direction and unique typography rather than defaulting to system fonts and standard color palettes.

Frontend Design & UI Aesthetics

Name: Frontend Design & UI Aesthetics
Author: guaderrama

byguaderrama

0•

デザインツール

Generates distinctive, production-grade frontend interfaces that avoid generic AI aesthetics through intentional design choices and high-quality code.

The Frontend Design skill empowers Claude to move beyond 'AI slop' by implementing bold, memorable, and production-ready frontend interfaces. It guides the AI to adopt specific design philosophies—ranging from brutalist minimalism to maximalist chaos—ensuring that every component, landing page, and dashboard features unique typography, sophisticated motion effects, and intentional spatial compositions. By prioritizing characterful font choices and complex CSS/JS interactions, this skill transforms standard functional requirements into visually striking digital experiences that feel genuinely designed rather than templated.

主な機能

01Unique spatial layouts with grid-breaking and asymmetric designs

020 GitHub stars

03Production-grade React, Vue, and CSS-only animations

04Atmospheric backgrounds using gradient meshes, noise textures, and grain overlays

05Intentional aesthetic direction selection (Brutalist, Luxury, Retro-futuristic, etc.)

06Advanced typography and distinctive custom font pairing

ユースケース

01Building high-end luxury brand landing pages with refined typography

02Creating brutalist developer dashboards with raw, industrial aesthetics

03Developing playful, interactive UI components with complex motion paths

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add guaderrama/cabo-health-ai frontend-design

For use in Claude.ai and ChatGPT

Download Skill