Frontend Enhancer

Name: Frontend Enhancer
Author: travisjneuman

travisjneuman/.claude

123 installs
86 repo stars
Updated July 17, 2026
travisjneuman/.claude

Helps with frontend development tasks during AI-assisted development.

About

frontend-enhancer is a Claude Code skill for frontend development. It helps solo builders move faster with AI-assisted coding.

frontend-enhancer
Frontend Development
AI-coding skill

Frontend Enhancer by the numbers

123 all-time installs (skills.sh)
+4 installs in the week ending Aug 5, 2026 (Skillselion tracking)
Ranked #1,010 of 2,245 Frontend Development skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/travisjneuman/.claude --skill frontend-enhancer

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/travisjneuman/.claude/frontend-enhancer.svg)](https://skillselion.com/skills/travisjneuman/.claude/frontend-enhancer)

Installs	123
repo stars	★ 86
Last updated	July 17, 2026
Repository	travisjneuman/.claude ↗

What it does

Helps with frontend development tasks during AI-assisted development.

Files

SKILL.mdMarkdownGitHub ↗

Frontend Enhancer

Transform web applications into visually polished, human-designed experiences.

PREREQUISITE: Research First

Before using this skill, ALWAYS complete:

Skill(ui-research)

Research is mandatory to avoid generic AI-generated looks. See UI Inspiration Sources for source list.

---

When to Use

Use for:

Improving styling and visual design
Creating responsive layouts
Adding animations and transitions
Selecting color schemes
Building modern UI patterns
Enhancing aesthetics

Don't use when:

Need inspiration first → use ui-research (MANDATORY)
UX flow design → use generic-ux-designer
Code architecture → use generic-feature-developer
Code review → use generic-code-reviewer

Foundational References:

UI Inspiration Sources - Research sources
Design Patterns - Visual tokens

Research-Driven Enhancement Workflow

1. Research - Use ui-research skill first (5-10 examples minimum) 2. Assess - Identify current gaps against research findings 3. Plan - Define direction based on inspiration analysis 4. Foundation - Set up colors, spacing, animations in theme 5. Apply - Implement with human polish (not defaults) 6. Anti-AI Check - Verify no generic AI patterns 7. Refine - Test responsiveness, verify accessibility 8. Review - Check hierarchy, consistency, performance

Color Palette Selection

Palette	Use Case
Corporate Blue	Business apps, SaaS
Vibrant Purple	Creative tools, portfolios
Minimalist Gray	Clean, sophisticated
Warm Sunset	Consumer apps, e-commerce
Ocean Fresh	Health, finance apps
Dark Mode	Developer tools, dashboards

Each palette needs: Primary, Secondary, Accent, Background, Foreground, Muted, Success, Warning, Error

Component Patterns

Buttons

Variants: primary, secondary, outline, ghost, danger
Sizes: sm, md, lg
States: loading, disabled

Cards

Variants: default, bordered, elevated, interactive
Subcomponents: Header, Title, Description, Content, Footer

Forms

Clear focus states
Validation feedback
Helper text
Required indicators

Animation Guidelines

GPU-Accelerated Only:

/* ✅ DO animate */
transform: translateY(-4px);
opacity: 0.8;

/* ❌ AVOID */
margin-top: -4px;
height: 100px;

Duration Guidelines:

Micro-interactions: 100-200ms
Transitions: 200-300ms
Complex animations: 300-500ms

Accessibility:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Responsive Strategy

Breakpoint	Min Width	Target
base	0	Mobile
sm	640px	Large phones
md	768px	Tablets
lg	1024px	Laptops
xl	1280px	Desktops

Accessibility Checklist

[ ] Color contrast >= 4.5:1 (WCAG AA)
[ ] Keyboard accessible
[ ] Visible focus indicators
[ ] Semantic HTML
[ ] Alt text on images
[ ] Form labels
[ ] Respects prefers-reduced-motion
[ ] Touch targets >= 44x44px

Layout Patterns

Hero Section

Centered, split, or minimal variants
Primary + secondary CTAs
Optional background gradients

Feature Grid

2, 3, or 4 columns
Icon + title + description
Staggered animations
Hover effects

Performance

Bundle size awareness
Lazy load heavy components
Optimize images (WebP, responsive)
60fps animations

cn Utility Setup

// lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Before/After Pattern

When enhancing, document changes:

Before: Plain gray button, no hover state
After: Gradient primary button with hover lift effect

Avoiding the AI Look

Red Flags to Check

Before finalizing, ensure you DON'T have:

[ ] Default blue/purple gradients
[ ] Perfectly symmetrical layouts
[ ] Generic blob/wave decorations
[ ] Undraw-style stock illustrations
[ ] "Hero with laptop mockup" cliché
[ ] Unchanged default color schemes
[ ] Cookie-cutter card grids
[ ] Overused glassmorphism/blur

Human Touch Checklist

Ensure you DO have:

[ ] Custom color palette (not defaults)
[ ] Intentional layout asymmetry
[ ] Unique typography pairing
[ ] Real/custom imagery
[ ] Micro-interactions with personality
[ ] Brand-specific details
[ ] Thoughtful empty/loading states
[ ] Copy with character

Quality Comparison

Aspect	Generic AI	Human-Polished
Color	Default blue	Custom brand palette
Layout	Perfect grid	Intentional variation
Images	Stock/generic	Curated/custom
Copy	Lorem ipsum	Real, personality-rich
Motion	Basic fades	Purposeful, branded
Details	None	Hover states, feedback

---

/* Modern CSS Animations and Transitions
   Copy these animations to your global CSS file */

/* Fade Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide Animations */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Scale Animations */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

/* Bounce Animation */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Pulse Animation */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Shimmer/Skeleton Loading */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Spin Animation (for loaders) */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Utility Classes */
.animate-fade-in {
  animation: fadeIn 0.3s ease-in;
}

.animate-fade-out {
  animation: fadeOut 0.3s ease-out;
}

.animate-fade-in-up {
  animation: fadeInUp 0.4s ease-out;
}

.animate-fade-in-down {
  animation: fadeInDown 0.4s ease-out;
}

.animate-slide-in-left {
  animation: slideInLeft 0.3s ease-out;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

.animate-scale-in {
  animation: scaleIn 0.2s ease-out;
}

.animate-scale-out {
  animation: scaleOut 0.2s ease-in;
}

.animate-bounce {
  animation: bounce 1s infinite;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Skeleton Loader */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 0px, #e0e0e0 40px, #f0f0f0 80px);
  background-size: 1000px;
  animation: shimmer 2s infinite;
}

/* Hover Effects */
.hover-lift {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.hover-scale {
  transition: transform 0.2s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* Smooth Transitions */
.transition-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-fast {
  transition: all 0.15s ease;
}

.transition-slow {
  transition: all 0.5s ease;
}

/* Stagger Animation Delays (for lists) */
.stagger-item-1 {
  animation-delay: 0.1s;
}

.stagger-item-2 {
  animation-delay: 0.2s;
}

.stagger-item-3 {
  animation-delay: 0.3s;
}

.stagger-item-4 {
  animation-delay: 0.4s;
}

.stagger-item-5 {
  animation-delay: 0.5s;
}

/* Accessibility: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

// Modern Button Component with Multiple Variants
// Copy and customize this component for your Next.js project

import React from "react";
import { cn } from "@/lib/utils"; // or use your utility function

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
  size?: "sm" | "md" | "lg";
  isLoading?: boolean;
  children: React.ReactNode;
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      className,
      variant = "primary",
      size = "md",
      isLoading,
      children,
      disabled,
      ...props
    },
    ref,
  ) => {
    const baseStyles =
      "inline-flex items-center justify-center font-medium transition-all duration-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";

    const variants = {
      primary:
        "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-sm hover:shadow-md",
      secondary:
        "bg-slate-600 text-white hover:bg-slate-700 focus:ring-slate-500 shadow-sm hover:shadow-md",
      outline:
        "border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500",
      ghost: "text-slate-700 hover:bg-slate-100 focus:ring-slate-500",
      danger:
        "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 shadow-sm hover:shadow-md",
    };

    const sizes = {
      sm: "px-3 py-1.5 text-sm",
      md: "px-4 py-2 text-base",
      lg: "px-6 py-3 text-lg",
    };

    return (
      <button
        ref={ref}
        className={cn(baseStyles, variants[variant], sizes[size], className)}
        disabled={disabled || isLoading}
        {...props}
      >
        {isLoading && (
          <svg
            className="animate-spin -ml-1 mr-2 h-4 w-4"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
          >
            <circle
              className="opacity-25"
              cx="12"
              cy="12"
              r="10"
              stroke="currentColor"
              strokeWidth="4"
            />
            <path
              className="opacity-75"
              fill="currentColor"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            />
          </svg>
        )}
        {children}
      </button>
    );
  },
);

Button.displayName = "Button";

// Example usage:
// <Button variant="primary" size="md">Click me</Button>
// <Button variant="outline" size="lg" isLoading>Loading...</Button>

// Modern Card Component with Multiple Variants
// Copy and customize this component for your Next.js project

import React from "react";
import { cn } from "@/lib/utils"; // or use your utility function

interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "default" | "bordered" | "elevated" | "interactive";
  padding?: "none" | "sm" | "md" | "lg";
  children: React.ReactNode;
}

export const Card = React.forwardRef<HTMLDivElement, CardProps>(
  (
    { className, variant = "default", padding = "md", children, ...props },
    ref,
  ) => {
    const baseStyles = "rounded-xl bg-white transition-all duration-200";

    const variants = {
      default: "shadow-sm",
      bordered: "border-2 border-slate-200",
      elevated: "shadow-lg hover:shadow-xl",
      interactive:
        "shadow-md hover:shadow-xl cursor-pointer hover:-translate-y-1",
    };

    const paddings = {
      none: "",
      sm: "p-4",
      md: "p-6",
      lg: "p-8",
    };

    return (
      <div
        ref={ref}
        className={cn(
          baseStyles,
          variants[variant],
          paddings[padding],
          className,
        )}
        {...props}
      >
        {children}
      </div>
    );
  },
);

Card.displayName = "Card";

export const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, children, ...props }, ref) => (
  <div ref={ref} className={cn("mb-4", className)} {...props}>
    {children}
  </div>
));

CardHeader.displayName = "CardHeader";

export const CardTitle = React.forwardRef<
  HTMLHeadingElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, children, ...props }, ref) => (
  <h3
    ref={ref}
    className={cn("text-2xl font-bold text-slate-900", className)}
    {...props}
  >
    {children}
  </h3>
));

CardTitle.displayName = "CardTitle";

export const CardDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => (
  <p
    ref={ref}
    className={cn("text-sm text-slate-600 mt-1", className)}
    {...props}
  >
    {children}
  </p>
));

CardDescription.displayName = "CardDescription";

export const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, children, ...props }, ref) => (
  <div ref={ref} className={cn("", className)} {...props}>
    {children}
  </div>
));

CardContent.displayName = "CardContent";

export const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, children, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("mt-6 pt-4 border-t border-slate-200", className)}
    {...props}
  >
    {children}
  </div>
));

CardFooter.displayName = "CardFooter";

// Example usage:
// <Card variant="interactive">
//   <CardHeader>
//     <CardTitle>Card Title</CardTitle>
//     <CardDescription>Card description goes here</CardDescription>
//   </CardHeader>
//   <CardContent>
//     <p>Your content here</p>
//   </CardContent>
//   <CardFooter>
//     <Button>Action</Button>
//   </CardFooter>
// </Card>

// Modern Input Component with Validation States
// Copy and customize this component for your Next.js project

import React from "react";
import { cn } from "@/lib/utils"; // or use your utility function

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
  helperText?: string;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
}

export const Input = React.forwardRef<HTMLInputElement, InputProps>(
  (
    { className, label, error, helperText, leftIcon, rightIcon, ...props },
    ref,
  ) => {
    const hasError = !!error;

    const inputStyles = cn(
      "w-full px-4 py-2.5 bg-white border rounded-lg transition-all duration-200",
      "text-slate-900 placeholder:text-slate-400",
      "focus:outline-none focus:ring-2 focus:ring-offset-0",
      "disabled:bg-slate-50 disabled:text-slate-500 disabled:cursor-not-allowed",
      hasError
        ? "border-red-300 focus:border-red-500 focus:ring-red-200"
        : "border-slate-300 focus:border-blue-500 focus:ring-blue-200",
      leftIcon && "pl-10",
      rightIcon && "pr-10",
      className,
    );

    return (
      <div className="w-full">
        {label && (
          <label className="block text-sm font-medium text-slate-700 mb-1.5">
            {label}
          </label>
        )}
        <div className="relative">
          {leftIcon && (
            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
              {leftIcon}
            </div>
          )}
          <input ref={ref} className={inputStyles} {...props} />
          {rightIcon && (
            <div className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400">
              {rightIcon}
            </div>
          )}
        </div>
        {error && (
          <p className="mt-1.5 text-sm text-red-600 flex items-center gap-1">
            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
              <path
                fillRule="evenodd"
                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                clipRule="evenodd"
              />
            </svg>
            {error}
          </p>
        )}
        {helperText && !error && (
          <p className="mt-1.5 text-sm text-slate-500">{helperText}</p>
        )}
      </div>
    );
  },
);

Input.displayName = "Input";

// Textarea Component
interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  label?: string;
  error?: string;
  helperText?: string;
}

export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, label, error, helperText, ...props }, ref) => {
    const hasError = !!error;

    const textareaStyles = cn(
      "w-full px-4 py-2.5 bg-white border rounded-lg transition-all duration-200",
      "text-slate-900 placeholder:text-slate-400",
      "focus:outline-none focus:ring-2 focus:ring-offset-0",
      "disabled:bg-slate-50 disabled:text-slate-500 disabled:cursor-not-allowed",
      "resize-none",
      hasError
        ? "border-red-300 focus:border-red-500 focus:ring-red-200"
        : "border-slate-300 focus:border-blue-500 focus:ring-blue-200",
      className,
    );

    return (
      <div className="w-full">
        {label && (
          <label className="block text-sm font-medium text-slate-700 mb-1.5">
            {label}
          </label>
        )}
        <textarea ref={ref} className={textareaStyles} {...props} />
        {error && (
          <p className="mt-1.5 text-sm text-red-600 flex items-center gap-1">
            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
              <path
                fillRule="evenodd"
                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                clipRule="evenodd"
              />
            </svg>
            {error}
          </p>
        )}
        {helperText && !error && (
          <p className="mt-1.5 text-sm text-slate-500">{helperText}</p>
        )}
      </div>
    );
  },
);

Textarea.displayName = "Textarea";

// Example usage:
// <Input
//   label="Email"
//   type="email"
//   placeholder="you@example.com"
//   leftIcon={<MailIcon />}
//   helperText="We'll never share your email"
// />
// <Input
//   label="Password"
//   type="password"
//   error="Password must be at least 8 characters"
// />

// Modern Feature Grid Layout
// Copy and customize this layout for your Next.js pages

import React from "react";

interface Feature {
  icon: React.ReactNode;
  title: string;
  description: string;
}

interface FeatureGridProps {
  title?: string;
  subtitle?: string;
  features: Feature[];
  columns?: 2 | 3 | 4;
}

export const FeatureGrid: React.FC<FeatureGridProps> = ({
  title,
  subtitle,
  features,
  columns = 3,
}) => {
  const gridCols = {
    2: "md:grid-cols-2",
    3: "md:grid-cols-2 lg:grid-cols-3",
    4: "md:grid-cols-2 lg:grid-cols-4",
  };

  return (
    <section className="py-20 px-4 sm:px-6 lg:px-8 bg-white">
      <div className="max-w-7xl mx-auto">
        {(title || subtitle) && (
          <div className="text-center mb-16">
            {title && (
              <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">
                {title}
              </h2>
            )}
            {subtitle && (
              <p className="text-xl text-slate-600 max-w-3xl mx-auto">
                {subtitle}
              </p>
            )}
          </div>
        )}

        <div className={`grid grid-cols-1 ${gridCols[columns]} gap-8`}>
          {features.map((feature, index) => (
            <div
              key={index}
              className="group p-6 rounded-xl hover:bg-slate-50 transition-all duration-300 hover:shadow-lg animate-fade-in-up"
              style={{ animationDelay: `${index * 0.1}s` }}
            >
              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4 text-blue-600 group-hover:bg-blue-600 group-hover:text-white transition-all duration-300">
                {feature.icon}
              </div>
              <h3 className="text-xl font-semibold text-slate-900 mb-2">
                {feature.title}
              </h3>
              <p className="text-slate-600 leading-relaxed">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// Example usage with icons:
// import { Zap, Shield, Smartphone, Globe, Clock, Users } from 'lucide-react';
//
// <FeatureGrid
//   title="Why Choose Us"
//   subtitle="Everything you need to build modern web applications"
//   columns={3}
//   features={[
//     {
//       icon: <Zap size={24} />,
//       title: "Lightning Fast",
//       description: "Optimized for speed with cutting-edge performance techniques"
//     },
//     {
//       icon: <Shield size={24} />,
//       title: "Secure by Default",
//       description: "Built with security best practices from the ground up"
//     },
//     {
//       icon: <Smartphone size={24} />,
//       title: "Mobile Responsive",
//       description: "Looks great on any device, from phone to desktop"
//     },
//     {
//       icon: <Globe size={24} />,
//       title: "Global CDN",
//       description: "Delivered fast to users anywhere in the world"
//     },
//     {
//       icon: <Clock size={24} />,
//       title: "24/7 Support",
//       description: "Our team is always here to help you succeed"
//     },
//     {
//       icon: <Users size={24} />,
//       title: "Team Collaboration",
//       description: "Built for teams to work together seamlessly"
//     }
//   ]}
// />

// Modern Hero Section Layout
// Copy and customize this layout for your Next.js landing pages

import React from "react";
import { cn } from "@/lib/utils";

interface HeroSectionProps {
  variant?: "centered" | "split" | "minimal";
  title: string;
  subtitle: string;
  ctaPrimary?: {
    text: string;
    onClick: () => void;
  };
  ctaSecondary?: {
    text: string;
    onClick: () => void;
  };
  image?: string;
  backgroundGradient?: boolean;
}

export const HeroSection: React.FC<HeroSectionProps> = ({
  variant = "centered",
  title,
  subtitle,
  ctaPrimary,
  ctaSecondary,
  image,
  backgroundGradient = true,
}) => {
  if (variant === "centered") {
    return (
      <section
        className={cn(
          "relative py-20 px-4 sm:px-6 lg:px-8",
          backgroundGradient &&
            "bg-gradient-to-br from-blue-50 via-white to-purple-50",
        )}
      >
        <div className="max-w-7xl mx-auto">
          <div className="text-center">
            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-slate-900 mb-6 animate-fade-in-up">
              {title}
            </h1>
            <p className="text-xl sm:text-2xl text-slate-600 mb-8 max-w-3xl mx-auto animate-fade-in-up stagger-item-1">
              {subtitle}
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center animate-fade-in-up stagger-item-2">
              {ctaPrimary && (
                <button
                  onClick={ctaPrimary.onClick}
                  className="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all hover:shadow-lg text-lg font-medium"
                >
                  {ctaPrimary.text}
                </button>
              )}
              {ctaSecondary && (
                <button
                  onClick={ctaSecondary.onClick}
                  className="px-8 py-3 bg-white text-blue-600 border-2 border-blue-600 rounded-lg hover:bg-blue-50 transition-all text-lg font-medium"
                >
                  {ctaSecondary.text}
                </button>
              )}
            </div>
            {image && (
              <div className="mt-12 animate-fade-in-up stagger-item-3">
                <img
                  src={image}
                  alt="Hero"
                  className="rounded-xl shadow-2xl mx-auto max-w-4xl"
                />
              </div>
            )}
          </div>
        </div>
      </section>
    );
  }

  if (variant === "split") {
    return (
      <section
        className={cn(
          "relative py-20 px-4 sm:px-6 lg:px-8",
          backgroundGradient &&
            "bg-gradient-to-br from-blue-50 via-white to-purple-50",
        )}
      >
        <div className="max-w-7xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="animate-fade-in-up">
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-slate-900 mb-6">
                {title}
              </h1>
              <p className="text-xl text-slate-600 mb-8">{subtitle}</p>
              <div className="flex flex-col sm:flex-row gap-4">
                {ctaPrimary && (
                  <button
                    onClick={ctaPrimary.onClick}
                    className="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all hover:shadow-lg text-lg font-medium"
                  >
                    {ctaPrimary.text}
                  </button>
                )}
                {ctaSecondary && (
                  <button
                    onClick={ctaSecondary.onClick}
                    className="px-8 py-3 bg-white text-blue-600 border-2 border-blue-600 rounded-lg hover:bg-blue-50 transition-all text-lg font-medium"
                  >
                    {ctaSecondary.text}
                  </button>
                )}
              </div>
            </div>
            {image && (
              <div className="animate-fade-in-up stagger-item-2">
                <img src={image} alt="Hero" className="rounded-xl shadow-2xl" />
              </div>
            )}
          </div>
        </div>
      </section>
    );
  }

  // Minimal variant
  return (
    <section className="relative py-32 px-4 sm:px-6 lg:px-8">
      <div className="max-w-4xl mx-auto text-center">
        <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-slate-900 mb-6 animate-fade-in-up">
          {title}
        </h1>
        <p className="text-2xl text-slate-600 mb-8 animate-fade-in-up stagger-item-1">
          {subtitle}
        </p>
        {(ctaPrimary || ctaSecondary) && (
          <div className="flex flex-col sm:flex-row gap-4 justify-center animate-fade-in-up stagger-item-2">
            {ctaPrimary && (
              <button
                onClick={ctaPrimary.onClick}
                className="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all hover:shadow-lg text-lg font-medium"
              >
                {ctaPrimary.text}
              </button>
            )}
            {ctaSecondary && (
              <button
                onClick={ctaSecondary.onClick}
                className="px-8 py-3 text-blue-600 hover:text-blue-700 transition-all text-lg font-medium"
              >
                {ctaSecondary.text} →
              </button>
            )}
          </div>
        )}
      </div>
    </section>
  );
};

// Example usage:
// <HeroSection
//   variant="centered"
//   title="Build Amazing Things"
//   subtitle="Create beautiful, responsive web applications with our modern toolkit"
//   ctaPrimary={{ text: "Get Started", onClick: () => {} }}
//   ctaSecondary={{ text: "Learn More", onClick: () => {} }}
//   image="/hero-image.png"
// />

// Utility function for merging Tailwind CSS classes
// This is commonly used with shadcn/ui and other component libraries
// Copy this to your project's lib/utils.ts file

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

// If you don't have clsx and tailwind-merge installed, run:
// npm install clsx tailwind-merge

// Example usage:
// cn('px-4 py-2', 'bg-blue-500', { 'text-white': true, 'font-bold': false })
// Result: 'px-4 py-2 bg-blue-500 text-white'

export default async function frontend_enhancer(input) {
  console.log("🧠 Running skill: frontend-enhancer");

  // TODO: implement actual logic for this skill
  return {
    message: "Skill 'frontend-enhancer' executed successfully!",
    input,
  };
}

{
  "name": "@ai-labs-claude-skills/frontend-enhancer",
  "version": "1.0.0",
  "description": "Claude AI skill: frontend-enhancer",
  "main": "index.js",
  "files": [
    "."
  ],
  "license": "MIT",
  "author": "AI Labs"
}

Color Palettes for Frontend Enhancement

This reference contains professionally designed color palettes optimized for modern web applications.

Modern Professional Palettes

Palette 1: Corporate Blue

Primary: #2563EB (Blue 600)
Primary Hover: #1D4ED8 (Blue 700)
Secondary: #64748B (Slate 500)
Accent: #F59E0B (Amber 500)
Background: #F8FAFC (Slate 50)
Surface: #FFFFFF
Text Primary: #0F172A (Slate 900)
Text Secondary: #475569 (Slate 600)
Success: #10B981 (Emerald 500)
Warning: #F59E0B (Amber 500)
Error: #EF4444 (Red 500)
Border: #E2E8F0 (Slate 200)

Palette 2: Vibrant Purple

Primary: #8B5CF6 (Violet 500)
Primary Hover: #7C3AED (Violet 600)
Secondary: #EC4899 (Pink 500)
Accent: #14B8A6 (Teal 500)
Background: #FAFAF9 (Stone 50)
Surface: #FFFFFF
Text Primary: #1C1917 (Stone 900)
Text Secondary: #57534E (Stone 600)
Success: #22C55E (Green 500)
Warning: #F97316 (Orange 500)
Error: #F43F5E (Rose 500)
Border: #E7E5E4 (Stone 200)

Palette 3: Minimalist Gray

Primary: #18181B (Zinc 900)
Primary Hover: #27272A (Zinc 800)
Secondary: #71717A (Zinc 500)
Accent: #06B6D4 (Cyan 500)
Background: #FAFAFA (Zinc 50)
Surface: #FFFFFF
Text Primary: #18181B (Zinc 900)
Text Secondary: #52525B (Zinc 600)
Success: #84CC16 (Lime 500)
Warning: #EAB308 (Yellow 500)
Error: #DC2626 (Red 600)
Border: #E4E4E7 (Zinc 200)

Palette 4: Warm Sunset

Primary: #EA580C (Orange 600)
Primary Hover: #C2410C (Orange 700)
Secondary: #F97316 (Orange 500)
Accent: #FBBF24 (Amber 400)
Background: #FFFBEB (Amber 50)
Surface: #FFFFFF
Text Primary: #78350F (Amber 900)
Text Secondary: #92400E (Amber 800)
Success: #16A34A (Green 600)
Warning: #D97706 (Amber 600)
Error: #DC2626 (Red 600)
Border: #FDE68A (Amber 200)

Palette 5: Ocean Fresh

Primary: #0891B2 (Cyan 600)
Primary Hover: #0E7490 (Cyan 700)
Secondary: #06B6D4 (Cyan 500)
Accent: #6366F1 (Indigo 500)
Background: #F0FDFA (Teal 50)
Surface: #FFFFFF
Text Primary: #134E4A (Teal 900)
Text Secondary: #0F766E (Teal 700)
Success: #14B8A6 (Teal 500)
Warning: #F59E0B (Amber 500)
Error: #E11D48 (Rose 600)
Border: #99F6E4 (Teal 200)

Palette 6: Dark Mode

Primary: #3B82F6 (Blue 500)
Primary Hover: #2563EB (Blue 600)
Secondary: #6366F1 (Indigo 500)
Accent: #A855F7 (Purple 500)
Background: #0F172A (Slate 900)
Surface: #1E293B (Slate 800)
Text Primary: #F8FAFC (Slate 50)
Text Secondary: #CBD5E1 (Slate 300)
Success: #10B981 (Emerald 500)
Warning: #FBBF24 (Amber 400)
Error: #F87171 (Red 400)
Border: #334155 (Slate 700)

Tailwind CSS Configuration

To use these palettes in Tailwind CSS, add to tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        // Choose one palette and customize as needed
        brand: {
          primary: "#2563EB",
          "primary-hover": "#1D4ED8",
          secondary: "#64748B",
          accent: "#F59E0B",
        },
      },
    },
  },
};

CSS Variables Configuration

For vanilla CSS or CSS-in-JS, use CSS custom properties:

:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-secondary: #64748b;
  --color-accent: #f59e0b;
  --color-background: #f8fafc;
  --color-surface: #ffffff;
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-border: #e2e8f0;
}

Frontend Design Principles

This reference outlines key design principles for creating aesthetically pleasing and user-friendly interfaces.

Core Design Principles

1. Visual Hierarchy

Use size, weight, and color to establish importance
Larger, bolder, or brighter elements attract more attention
Group related elements together
Use whitespace to separate different sections

2. Spacing and Rhythm

Consistent spacing creates visual harmony
Use a spacing scale (e.g., 4px, 8px, 16px, 24px, 32px, 48px, 64px)
Maintain adequate padding around interactive elements (minimum 44x44px touch targets)
Use margins to create breathing room between sections

3. Typography

Limit to 2-3 font families maximum
Establish a clear type scale (e.g., 12px, 14px, 16px, 20px, 24px, 32px, 48px)
Maintain readable line heights (1.5-1.75 for body text)
Use font weights strategically (400 for body, 500-600 for emphasis, 700 for headings)
Ensure sufficient contrast (WCAG AA: 4.5:1 for body text, 3:1 for large text)

4. Color Theory

Use a primary color for main actions and branding
Choose a secondary color for complementary actions
Reserve accent colors for highlights and calls-to-action
Maintain consistent color usage throughout the application
Use neutral grays for text and backgrounds
Consider color blindness and accessibility

5. Consistency

Maintain consistent button styles, sizes, and behaviors
Use the same component patterns throughout
Keep navigation consistent across pages
Establish and follow a design system

6. Responsiveness

Design mobile-first, then scale up
Use fluid typography and spacing
Ensure touch targets are adequately sized on mobile
Test across multiple device sizes
Consider tablet-specific layouts

Best Practices for Modern UI

Cards and Containers

Use subtle shadows for depth (box-shadow: 0 1px 3px rgba(0,0,0,0.1))
Round corners for a softer feel (border-radius: 8px-12px)
Add hover states for interactive cards
Maintain consistent padding inside cards

Buttons

Primary buttons should be highly visible
Use ghost/outline buttons for secondary actions
Ensure adequate padding (px-4 py-2 minimum)
Add hover and active states for feedback
Include loading states for async actions

Forms

Label inputs clearly
Show validation feedback inline
Use appropriate input types (email, tel, number, etc.)
Provide helpful placeholder text
Group related fields together
Show password requirements upfront

Navigation

Keep primary navigation persistent and visible
Use breadcrumbs for deep hierarchies
Highlight the active page/section
Make click targets large enough
Consider sticky navigation for long pages

Animations

Keep animations subtle and purposeful
Use 200-300ms for micro-interactions
Use 300-500ms for larger transitions
Respect prefers-reduced-motion
Avoid excessive motion that distracts

Accessibility Guidelines

Contrast

WCAG AA: 4.5:1 for normal text, 3:1 for large text
WCAG AAA: 7:1 for normal text, 4.5:1 for large text
Test color combinations with contrast checkers

Keyboard Navigation

Ensure all interactive elements are keyboard accessible
Provide visible focus indicators
Maintain logical tab order
Support escape key for closing modals

Screen Readers

Use semantic HTML (nav, main, article, aside)
Provide alt text for images
Use ARIA labels when necessary
Ensure proper heading hierarchy (h1, h2, h3)

Motion

Respect prefers-reduced-motion media query
Provide alternatives to motion-based interactions
Avoid flashing content (seizure risk)

Common Layout Patterns

Hero Section

Large, attention-grabbing headline
Concise subheading
Clear call-to-action
Optional background image or illustration

Feature Grid

2-3 columns on desktop
Single column on mobile
Icons or illustrations for each feature
Concise descriptions

Pricing Table

Clear plan names and prices
Feature comparison
Highlighted recommended plan
Clear call-to-action buttons

Dashboard Layout

Summary cards at the top
Charts and graphs in the main area
Filters and controls easily accessible
Responsive grid layout

Blog/Content Layout

Wide reading column (60-70 characters per line)
Clear typography hierarchy
Adequate line spacing
Sidebars for supplementary content

Related skills

Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6k

Vercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k

ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k

Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72

Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4k

Image To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4k

Frontend Developmentfrontend

About

Frontend Enhancer by the numbers

Add your badge

What it does

Files

Frontend Enhancer

PREREQUISITE: Research First

When to Use

Research-Driven Enhancement Workflow

Color Palette Selection

Component Patterns

Buttons

Cards

Forms

Animation Guidelines

Responsive Strategy

Accessibility Checklist

Layout Patterns

Hero Section

Feature Grid

Performance

cn Utility Setup

Before/After Pattern

Avoiding the AI Look

Red Flags to Check

Human Touch Checklist

Quality Comparison

See Also

Color Palettes for Frontend Enhancement

Modern Professional Palettes

Palette 1: Corporate Blue

Palette 2: Vibrant Purple

Palette 3: Minimalist Gray

Palette 4: Warm Sunset

Palette 5: Ocean Fresh

Palette 6: Dark Mode

Tailwind CSS Configuration

CSS Variables Configuration

Frontend Design Principles

Core Design Principles

1. Visual Hierarchy

2. Spacing and Rhythm

3. Typography

4. Color Theory

5. Consistency

6. Responsiveness

Best Practices for Modern UI

Cards and Containers

Buttons

Forms

Navigation

Animations

Accessibility Guidelines

Contrast

Keyboard Navigation

Screen Readers

Motion

Common Layout Patterns

Hero Section

Feature Grid

Pricing Table

Dashboard Layout

Blog/Content Layout

Related skills

This week in AI coding