Can this skill work with my existing UI library?

Yes, it is designed to work within the token systems of popular libraries like shadcn/ui, MUI, or Ant Design, adding unique aesthetic layers on top.

What frameworks are supported by the Frontend Design skill?

The skill supports React, Vue, Svelte, and standard HTML/CSS/JS, defaulting to self-contained code if no framework is specified.

Is the generated frontend code accessible?

Yes, the skill maintains an accessibility baseline that includes high contrast ratios, semantic HTML, and focus-visible states for interactive elements.

How does it ensure the design isn't generic?

The skill follows strict anti-patterns that forbid overused fonts like Inter or Roboto and generic 'SaaS-blue' color schemes, opting for intentional design choices.

Does it handle mobile responsiveness?

By default, the skill uses a mobile-first responsive approach using CSS media queries or framework-specific utilities.

Frontend Design

Name: Frontend Design
Author: wunki

bywunki

•

Design Tools

Designs and builds distinctive, production-grade frontend interfaces with high aesthetic intentionality and custom styling.

The Frontend Design skill empowers Claude to move beyond generic, AI-generated layouts by applying specific, high-end aesthetic directions to web interfaces. It is designed for developers who need to build visually striking landing pages, dashboards, or interactive components from scratch, or substantially redesign existing UIs for a more polished look. By prioritizing unique typography, intentional motion, and sophisticated color palettes while avoiding overused 'SaaS' design tropes, this skill ensures that every output is professional, responsive, and accessible.

Key Features

01Executes custom aesthetic directions such as editorial brutalism or refined minimalism to avoid generic AI looks.

02Generates production-ready code for React, Vue, Svelte, or vanilla HTML/CSS with mobile-first responsiveness.

03Implements high-impact CSS animations and motion design for polished, interactive user experiences.

04Enforces accessibility standards including WCAG contrast ratios and semantic HTML structure.

0517 GitHub stars

06Respects existing design systems and brand tokens (MUI, shadcn/ui) while adding unique visual flair.

Use Cases

01Creating polished, responsive UI components that require high-impact motion and custom styling.

02Modernizing a legacy dashboard interface to improve aesthetic quality and user engagement.

03Building a visually striking, unique landing page from scratch with specific brand guidelines.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add wunki/amplify frontend-design

For use in Claude.ai and ChatGPT

Download Skill