Can it improve the 'feel' of an existing application?

Yes, it is designed to study existing patterns and then apply 'designer-level' refinements like better spatial composition, micro-interactions, and visual textures.

Does it use standard system fonts like Arial or Inter?

No, it specifically avoids generic system fonts in favor of distinctive typographic pairings that give the interface a unique and premium feel.

How does this skill handle design without mockups?

It utilizes a structured process to define a specific aesthetic direction—such as industrial, luxury, or playful—based on the project's purpose and audience before any code is written.

Which frameworks are supported by the frontend-ui-ux skill?

The skill is framework-agnostic and can implement designs using HTML/CSS/JS, React, Vue, Angular, and modern libraries like Framer Motion.

Frontend UI/UX Specialist

Name: Frontend UI/UX Specialist
Author: nikhillinit

bynikhillinit

0•

デザインツール

Crafts distinctive, production-grade frontend interfaces with a focus on high-end aesthetics and intentional user experiences.

The frontend-ui-ux skill transforms Claude into a designer-developer hybrid capable of building sophisticated web interfaces from scratch, even without existing mockups. It moves beyond generic UI kits to implement bold aesthetic directions—ranging from brutalist to luxury—using refined typography, intentional motion, and meticulous spatial compositions. By prioritizing pixel-perfect execution and production-grade code, this skill ensures that every frontend component is not just functional but visually striking and emotionally engaging for the end user.

主な機能

01Visual atmosphere enhancement using textures, grain overlays, and layered transparencies

02Automated aesthetic direction selection (Minimalist, Maximalist, Retro-futuristic, etc.)

03Production-ready implementation across React, Vue, Angular, and Vanilla JS

04Advanced typographic pairing and custom CSS variable-based color systems

05High-impact motion design including staggered reveals and scroll-triggered effects

060 GitHub stars

ユースケース

01Building a brand-new landing page or dashboard without pre-made design files

02Refactoring existing UI to improve spacing, color harmony, and visual hierarchy

03Implementing complex micro-interactions and animations to increase user engagement

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nikhillinit/updog_restore frontend-ui-ux

For use in Claude.ai and ChatGPT

主な機能

01Visual atmosphere enhancement using textures, grain overlays, and layered transparencies

02Automated aesthetic direction selection (Minimalist, Maximalist, Retro-futuristic, etc.)

03Production-ready implementation across React, Vue, Angular, and Vanilla JS

04Advanced typographic pairing and custom CSS variable-based color systems

05High-impact motion design including staggered reveals and scroll-triggered effects

060 GitHub stars

ユースケース

01Building a brand-new landing page or dashboard without pre-made design files

02Refactoring existing UI to improve spacing, color harmony, and visual hierarchy

03Implementing complex micro-interactions and animations to increase user engagement