Frontend Design

概要

This skill empowers Claude to build memorable, professional-grade web interfaces and applications using modern frameworks like Next.js, Tailwind CSS, and Radix UI. It prioritizes intentional design thinking, guiding the creation of unique aesthetic directions ranging from brutalist minimalism to bold maximalism while avoiding overused 'AI slop' patterns. By providing specific guidance on typography, motion, and spatial composition, it ensures that generated code is not only visually striking but also performance-optimized, accessible, and follows best practices for the Next.js App Router architecture.

主な機能

• Sophisticated typography guidelines for distinctive font pairings and optimization
• Best practices for Next.js App Router and Server/Client component separation
• Accessible component architecture using Radix UI primitives and Tailwind CSS
• 1 GitHub stars
• Design thinking framework for choosing bold, memorable aesthetic directions
• Implementation patterns for orchestrated motion and high-impact micro-interactions

ユースケース

• Developing complex, interactive web components with professional-grade animations
• Building a unique brand landing page that requires a non-generic, high-end visual identity
• Refining an existing Next.js application with polished UI/UX and consistent design systems