How does it handle animations?

The skill prioritizes high-impact motion design, utilizing CSS-only solutions for simple effects and libraries like Framer Motion for complex, staggered reveals and micro-interactions.

Does it support modern JavaScript frameworks?

Yes, it is optimized for creating functional components in React and Vue, as well as standard HTML/CSS/JS, ensuring production-ready code quality.

What makes this skill different from standard Claude coding?

This skill specifically rejects generic 'AI-style' designs, such as standard system fonts and cliched color schemes, in favor of bold, intentional, and memorable aesthetic directions like brutalism or retro-futurism.

Can I use this for design system planning?

No, this is an implementation-focused skill. For design system planning, palette selection, or high-level style exploration, the 'ui-ux-pro-max' skill is recommended.

Frontend Design

Name: Frontend Design
Author: Brite-Nites

byBrite-Nites

0•

デザインツール

Builds distinctive, production-grade frontend interfaces with bold aesthetic choices and meticulous attention to detail.

The Frontend Design skill empowers Claude to move beyond generic web layouts by implementing highly stylized, production-ready frontend code. It focuses on creating memorable user interfaces—ranging from brutalist minimalism to maximalist chaos—using custom typography, advanced motion libraries, and unconventional spatial compositions. Unlike standard AI-generated code, this skill prioritizes intentionality and artistic direction, translating requirements into functional React, Vue, or HTML/CSS components that avoid 'AI slop' and maintain a unique, high-end brand identity.

主な機能

010 GitHub stars

02Curation of distinctive typography and non-generic font pairings

03Sophisticated visual effects like grain overlays, noise textures, and gradient meshes

04Advanced motion design using CSS and libraries like Framer Motion

05Custom spatial compositions including grid-breaking and asymmetric layouts

06Implementation of production-grade HTML, CSS, and React/Vue code

ユースケース

01Creating interactive web components that require complex animations and micro-interactions

02Developing specialized dashboards with retro-futuristic or industrial themes

03Building high-end marketing landing pages with a unique editorial aesthetic

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add brite-nites/britenites-claude-plugins frontend-design

For use in Claude.ai and ChatGPT

Download Skill