Which frontend frameworks are supported?

The skill is framework-agnostic and can generate high-quality code for React, Vue, Svelte, or vanilla HTML/CSS/JS, depending on your project requirements.

Can I specify a particular design style like 'Brutalist' or 'Minimalist'?

Yes. The skill is designed to interpret bold aesthetic directions such as retro-futuristic, luxury, playful, industrial, and more, ensuring the code matches that specific vision.

Does the generated code follow best practices?

Absolutely. The skill prioritizes production-grade code, focusing on performance, accessibility, and clean implementation while pushing the boundaries of visual design.

How does this skill differ from standard Claude code generation?

While standard generation often defaults to generic 'system' styles and common patterns like Inter font and purple gradients, this skill enforces a specific design philosophy focused on uniqueness, intentionality, and high-end aesthetic choices.

Frontend Design Pro

Name: Frontend Design Pro
Author: Delqhi

byDelqhi

0•

デザインツール

Generates distinctive, production-grade frontend interfaces with high-end aesthetics that move beyond generic AI-generated patterns.

This skill enhances Claude's ability to create memorable web experiences by applying deep design thinking and intentional aesthetic directions. It moves beyond standard 'AI aesthetics' by prioritizing sophisticated typography, unconventional layouts, and advanced CSS motion. Designed for developers who need more than just functional code, this skill ensures that every component, page, or application generated has a cohesive visual identity—ranging from brutalist and maximalist to refined minimalism—while maintaining production-grade technical standards in React, Vue, or vanilla web technologies.

主な機能

01Advanced typography selection using unique and characterful font pairings

02Anti-generic AI aesthetic enforcement to avoid 'AI slop' clichés

03Sophisticated motion design including CSS-only reveals and micro-interactions

04Production-ready code implementation for modern frontend frameworks

05Creative spatial compositions featuring asymmetry and grid-breaking elements

060 GitHub stars

ユースケース

01Prototyping high-fidelity web applications with non-standard layouts and textures

02Developing custom UI component libraries with a specific artistic or editorial direction

03Creating a unique, brand-aligned landing page that stands out from competitors

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add delqhi/singularity-code frontend-design

For use in Claude.ai and ChatGPT

Download Skill