Can I use this with shadcn/ui projects?

Yes, it includes specialized logic to extend shadcn/ui components through global CSS variables, Tailwind theme extensions, and specific component class overrides.

Which frontend frameworks are supported?

The skill is framework-agnostic and can generate high-quality code for React, Vue, and vanilla HTML/CSS/JS, prioritizing modern tools like Framer Motion for animations.

Does it prioritize performance and accessibility?

Yes, the skill is designed to produce production-grade code that respects technical constraints, performance requirements, and accessibility standards while maintaining a high aesthetic bar.

How does this skill differ from standard AI-generated CSS?

Unlike standard AI output that often defaults to generic fonts and predictable layouts, this skill follows specific design-thinking frameworks to create bold, intentional aesthetics like brutalism, minimalism, or retro-futurism.

Frontend Design

Name: Frontend Design
Author: julianromli

byjulianromli

•

101

•

设计工具

Creates distinctive, production-grade frontend interfaces with high design quality and intentional aesthetic direction.

This skill empowers developers to build visually striking web components and applications that transcend generic AI-generated styles through intentional design thinking. By focusing on unique typography, bold spatial compositions, and sophisticated motion, it guides Claude to implement cohesive, production-ready code using modern frameworks, while also providing deep integration for customizing shadcn/ui projects to look bespoke rather than boilerplate.

主要功能

01Generates high-fidelity, production-grade frontend code for components and full pages

02Eliminates 'AI slop' aesthetics by prioritizing unique typography and bold design directions

03Applies advanced spatial principles like asymmetrical layouts and grid-breaking elements

04Provides deep integration for customizing shadcn/ui themes and Tailwind configurations

05Implements sophisticated visual details including gradient meshes, noise textures, and custom animations

06101 GitHub stars

使用场景

01Customizing a shadcn/ui-based dashboard to feel high-end and premium rather than generic

02Developing interactive web components with complex CSS animations and micro-interactions

03Building a unique marketing landing page with a specific brand aesthetic like brutalist or retro-futuristic

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add julianromli/opencode-template frontend-design

For use in Claude.ai and ChatGPT

主要功能

01Generates high-fidelity, production-grade frontend code for components and full pages

02Eliminates 'AI slop' aesthetics by prioritizing unique typography and bold design directions

03Applies advanced spatial principles like asymmetrical layouts and grid-breaking elements

04Provides deep integration for customizing shadcn/ui themes and Tailwind configurations

05Implements sophisticated visual details including gradient meshes, noise textures, and custom animations

06101 GitHub stars

使用场景

01Customizing a shadcn/ui-based dashboard to feel high-end and premium rather than generic

02Developing interactive web components with complex CSS animations and micro-interactions

03Building a unique marketing landing page with a specific brand aesthetic like brutalist or retro-futuristic

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add julianromli/opencode-template frontend-design

For use in Claude.ai and ChatGPT