Which CSS frameworks are supported?

The skill is optimized for Tailwind CSS, CSS Modules, and animation libraries like Framer Motion or GSAP.

Does it include icon recommendations?

It recommends modern, lightweight icon sets like Lucide React and Remix Icon while specifically advising against outdated libraries for better performance.

How does this differ from standard AI-generated code?

Unlike generic outputs, this skill enforces specific aesthetic directions like Neo-Brutalism and provides detailed motion/typography guidance to avoid the 'AI slop' look.

Can I use it to refactor my existing UI?

Yes, you can provide existing code snippets and use the skill to transform them into specific professional styles such as Minimalist or Cyberpunk.

UI Design Core

Name: UI Design Core
Author: Protagonistss

byProtagonistss

0•

Design Tools

Generates high-end, production-grade UI components and layouts while intentionally avoiding generic AI design patterns.

UI Design Core is a specialized Claude Code skill designed to elevate frontend development by implementing sophisticated design systems and unique aesthetic directions. It moves beyond standard, repetitive AI-generated looks by applying principles like Brutalism, Glassmorphism, and editorial layouts, ensuring that code output features refined typography, motion-rich interactions, and purposeful depth. It provides developers with immediate access to professional-grade styling strategies, anti-pattern checks, and modern tech stack recommendations including Tailwind CSS and Framer Motion to create interfaces that stand out.

Key Features

01Typography & Motion Optimization (Cubic-bezier curves and professional font pairing)

02Anti-Pattern Prevention (Eliminates generic gradients and boring shadows)

030 GitHub stars

04Instant Layout Refactoring (Converts basic skeletons into high-impact visuals)

05Advanced Aesthetic Direction (Brutalism, Glassmorphism, Neo-Brutalism, Editorial)

06Modern Tech Stack Integration (Tailwind CSS, Framer Motion, and Lucide Icons)

Use Cases

01Refactoring existing generic UI components into premium, editorial-style interfaces.

02Rapidly prototyping a high-conversion landing page with a distinct visual identity.

03Enforcing design consistency and professional UX patterns across a new web application.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add protagonistss/ithinku-plugins ui-design-core

For use in Claude.ai and ChatGPT

Download Skill