Frontend Enhancer

/* 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"
}