How does this skill avoid 'AI slop' in frontend designs?

The skill enforces specific 'Anti-Slop' rules that prohibit overused AI aesthetics like purple-to-blue gradients, generic Inter font pairings, and perfectly symmetric layouts, instead favoring bold typographic choices and asymmetric compositions.

Does this skill provide actual code or just design advice?

It provides real, working, production-grade code implemented with exceptional attention to aesthetic details, micro-interactions, and professional component architecture.

What technology stack does the Frontend Design skill prefer?

It prioritizes a modern stack including React, Tailwind CSS, shadcn/ui for components, Framer Motion for animations, and Recharts or Tremor for data visualization.

Can I use this for building accessible web applications?

Yes, the skill emphasizes the use of accessible primitives like Radix UI and Headless UI to ensure that high-quality visual design doesn't come at the cost of inclusivity.

Frontend Design

Name: Frontend Design
Author: duyet

byduyet

•

Design Tools

Creates distinctive, production-grade frontend interfaces with high design quality and custom aesthetics that avoid generic AI patterns.

The Frontend Design skill empowers Claude Code to build sophisticated, high-fidelity user interfaces by applying professional design systems and advanced React architecture. It moves beyond standard 'AI slop' by enforcing strict rules for typography, layout asymmetry, and color theory while prioritizing modern libraries like shadcn/ui, Radix UI, and Framer Motion. Whether you are building complex data dashboards or creative landing pages, this skill provides the creative direction and technical constraints necessary to produce code that looks hand-crafted and ready for production.

Key Features

01First-class support for shadcn/ui and Radix UI component architectures.

022 GitHub stars

03Integrated guidance for Framer Motion animations and tactile micro-interactions.

04Anti-slop design rules for typography, color palettes, and layout hierarchy.

05Strategic aesthetic selection from minimal to brutalist or neo-brutalist styles.

06Advanced React patterns including compound components and render props.

Use Cases

01Building a unique, high-conversion landing page with distinctive typography and layout.

02Developing a complex SaaS dashboard using Recharts and shadcn/ui with custom theming.

03Refactoring generic component libraries into a maintainable, composition-based design system.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add duyet/claude-plugins frontend-design

For use in Claude.ai and ChatGPT

Download Skill