Which frameworks does this skill support?

The skill is framework-agnostic and can generate high-quality code for React, Vue, vanilla HTML/CSS, and modern styling libraries like Tailwind or Motion.

What makes this skill different from standard Claude output?

It explicitly avoids 'AI slop' by prioritizing bold aesthetic choices, unique typography, and non-standard layouts over generic, predictable templates.

How does it handle typography and font selection?

It bypasses overused system fonts like Inter or Arial in favor of characterful display and body font pairings that give the interface a bespoke, designed feel.

Can I use this for production-level applications?

Yes, the skill is designed to produce production-grade, functional code with a focus on both aesthetic detail and technical best practices.

Frontend Design Expert

Name: Frontend Design Expert
Author: nguyendinhquocx

bynguyendinhquocx

0•

デザインツール

Creates distinctive, production-grade frontend interfaces with high design quality and custom aesthetics.

This skill empowers Claude to move beyond generic AI-generated layouts by implementing bold, intentional design directions for web components, landing pages, and applications. It guides the creation of polished code using sophisticated typography, unique color palettes, and advanced CSS/JS animations while adhering to production-grade standards. Whether building a minimalist dashboard or a maximalist portfolio, this skill ensures every interface feels bespoke, memorable, and professionally crafted by avoiding common 'AI slop' patterns.

主な機能

01Develops production-ready, functional code for React, Vue, and vanilla HTML/CSS environments

02Creates advanced CSS and Motion library animations for high-impact micro-interactions

03Implements sophisticated typography and distinctive font pairings beyond system defaults

04Avoids generic AI aesthetics through intentional design thinking and bold art direction

050 GitHub stars

06Generates cohesive, custom color themes and atmospheric backgrounds with grain and gradients

ユースケース

01Building high-conversion landing pages with unique visual identities and memorable layouts

02Developing custom React components with complex animations and polished interactions

03Styling dashboards and web applications to feel premium, professional, and visually distinct

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nguyendinhquocx/code-ai frontend-design

For use in Claude.ai and ChatGPT

主な機能

01Develops production-ready, functional code for React, Vue, and vanilla HTML/CSS environments

02Creates advanced CSS and Motion library animations for high-impact micro-interactions

03Implements sophisticated typography and distinctive font pairings beyond system defaults

04Avoids generic AI aesthetics through intentional design thinking and bold art direction

050 GitHub stars

06Generates cohesive, custom color themes and atmospheric backgrounds with grain and gradients

ユースケース

01Building high-conversion landing pages with unique visual identities and memorable layouts

02Developing custom React components with complex animations and polished interactions

03Styling dashboards and web applications to feel premium, professional, and visually distinct