How does this skill differ from standard AI-generated frontend code?

This skill explicitly avoids 'AI slop' by prioritizing unique typography, intentional aesthetic themes, and non-standard layouts rather than defaulting to generic frameworks and overused system fonts.

Does it include support for animations?

Yes, it prioritizes high-impact motion using CSS-only solutions or specialized libraries like Framer Motion for React to create delightful user experiences.

Can I request specific design styles like Minimalist or Brutalist?

Yes, the skill is designed to commit to bold aesthetic directions. You can specify a style, and it will implement cohesive typography, color palettes, and motion patterns to match.

What frameworks are compatible with the Frontend Design skill?

It is framework-agnostic and can generate production-grade code for React, Vue, Svelte, or vanilla HTML/CSS/JS depending on your project requirements.

Does this skill help with mobile responsiveness?

Absolutely. While focusing on creative and unique layouts, the skill maintains production-grade standards, ensuring interfaces are responsive and functional across all device sizes.

Frontend Design Expert

Name: Frontend Design Expert
Author: Delqhi

byDelqhi

0•

デザインツール

Generates distinctive, production-grade frontend interfaces with high design quality and custom aesthetics.

The Frontend Design skill empowers Claude to move beyond generic AI-generated templates by implementing bold, intentional design directions for web components and applications. It guides the creation of visually striking interfaces using advanced typography pairing, creative spatial compositions, and sophisticated motion effects. Whether your project requires a brutalist layout, a refined luxury interface, or a playful interactive experience, this skill ensures every line of code is polished, performant, and memorable, intentionally avoiding common 'AI slop' patterns such as overused font families and predictable color schemes.

主な機能

01High-impact motion design and micro-interaction implementation

020 GitHub stars

03Advanced typography pairing using characterful and distinctive fonts

04Thematic aesthetic selection including Brutalist, Minimalist, and Retro-futuristic styles

05Creative spatial layouts featuring asymmetry and grid-breaking elements

06Atmospheric visual details like gradient meshes, noise textures, and grain overlays

ユースケース

01Designing editorial-style web applications that require non-standard, sophisticated layouts

02Creating custom React or Vue components with complex CSS animations and transitions

03Building high-conversion landing pages with a unique, memorable brand identity

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