Skip to main content Home Creators ailabs-393 ai-labs-claude-skills frontend-enhancer
frontend-enhancer This skill should be used when enhancing the visual design and aesthetics of Next.js web applications. It provides modern UI components, design patterns, color palettes, animations, and layout templates. Use this skill for tasks like improving styling, creating responsive designs, implementing modern UI patterns, adding animations, selecting color schemes, or building aesthetically pleasing frontend interfaces.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/ailabs-393/ai-labs-claude-skills --skill frontend-enhancerThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository
This skill should be used whenever users request personal assistance tasks such as schedule management, task tracking, reminder setting, habit monitoring, productivity advice, time management, or any query requiring personalized responses based on user preferences and context. On first use, collects comprehensive user information including schedule, working habits, preferences, goals, and routines. Maintains an intelligent database that automatically organizes and prioritizes information, keeping relevant data and discarding outdated context.
Related occupations SOC
Based on SOC occupation classification
name frontend-enhancer description This skill should be used when enhancing the visual design and aesthetics of Next.js web applications. It provides modern UI components, design patterns, color palettes, animations, and layout templates. Use this skill for tasks like improving styling, creating responsive designs, implementing modern UI patterns, adding animations, selecting color schemes, or building aesthetically pleasing frontend interfaces.
Frontend Enhancer
Overview
The Frontend Enhancer skill transforms Next.js applications into visually stunning, modern web experiences. It provides production-ready components, comprehensive design guidelines, curated color palettes, smooth animations, and flexible layout templates optimized for responsiveness and accessibility.
When to Use This Skill
Invoke this skill when:
Improving the visual appearance of an existing application
Creating new UI components with modern styling
Selecting color schemes and design themes
Adding animations and transitions
Building responsive layouts for different screen sizes
Implementing hero sections, feature grids, or landing pages
Enhancing user experience with better visual hierarchy
Applying consistent design patterns across an application
Core Capabilities
1. Component Library
Use pre-built, production-ready React components with multiple variants and states:
Button Component (assets/button-variants.tsx):
Variants: primary, secondary, outline, ghost, danger
Sizes: sm, md, lg
Loading states with animated spinner
Full TypeScript support
Accessibility features built-in
Card Component (assets/card-variants.tsx):
Variants: default, bordered, elevated, interactive
Subcomponents: CardHeader, CardTitle, CardDescription, CardContent, CardFooter
Hover effects and transitions
Flexible padding options Input Components (assets/input-variants.tsx):
Text inputs with validation states
Textarea component
Left/right icon support
Error and helper text display
Label integration
Full accessibility support
Copy the desired component file from assets/ to your project's components directory
Ensure the cn utility function exists (see assets/utils-cn.ts)
Customize colors, spacing, or variants to match your brand
Import and use the component in your pages
2. Layout Templates Use pre-designed, responsive layout patterns for common page sections:
Hero Section (assets/layout-hero-section.tsx):
Three variants: centered, split, minimal
Support for CTAs (primary and secondary)
Optional background gradients
Image/illustration support
Built-in animations
Feature Grid (assets/layout-feature-grid.tsx):
Configurable columns (2, 3, or 4)
Icon integration
Staggered animations
Hover effects
Fully responsive
Copy the layout component from assets/ to your components directory
Customize the props and content to match your needs
Integrate with your existing pages
Adjust styling as needed for your brand
3. Design System Guidelines Reference comprehensive design principles for consistent, professional interfaces:
Design Principles (references/design_principles.md):
Visual hierarchy best practices
Spacing and rhythm guidelines
Typography recommendations
Color theory and usage
Consistency standards
Responsiveness strategies
Accessibility guidelines (WCAG AA/AAA)
Common layout patterns
Starting a new design
Making decisions about visual hierarchy
Ensuring accessibility compliance
Establishing consistency across the app
Reviewing design quality
How to use:
Read references/design_principles.md to understand best practices, then apply them to your specific design challenges. The document covers both theory and practical implementation.
4. Color Palettes Access professionally curated color schemes optimized for modern web applications:
Available Palettes (references/color_palettes.md):
Corporate Blue - Professional, trustworthy (business apps, SaaS)Vibrant Purple - Creative, modern (creative tools, portfolios)Minimalist Gray - Clean, sophisticated (minimalist designs)Warm Sunset - Energetic, friendly (consumer apps, e-commerce)Ocean Fresh - Calm, professional (health, finance apps)Dark Mode - Modern, eye-friendly (developer tools, dashboards)
Primary and secondary colors
Accent colors
Background and surface colors
Text colors (primary and secondary)
Semantic colors (success, warning, error)
Border colors
Tailwind CSS : Add colors to tailwind.config.js (examples provided)CSS Variables : Use custom properties in global CSS (examples provided)Inline styles : Reference hex codes directly in components
Review references/color_palettes.md to see all available palettes
Consider your application's purpose and brand identity
Choose a palette that matches your goals
Implement using Tailwind config or CSS variables
Adjust specific colors if needed to match your brand
5. Animations and Transitions Add smooth, professional animations using pre-built CSS classes and keyframes:
Animation Library (assets/animations.css):
Fade animations (fadeIn, fadeOut, fadeInUp, fadeInDown)
Slide animations (slideInLeft, slideInRight)
Scale animations (scaleIn, scaleOut)
Utility animations (bounce, pulse, spin)
Skeleton loading (shimmer effect)
Hover effects (lift, glow, scale)
Stagger delays for list animations
Accessibility:
All animations respect prefers-reduced-motion for accessibility compliance.
Copy assets/animations.css to your global CSS file (or create a separate animations file)
Apply utility classes like animate-fade-in-up, hover-lift, etc.
Use stagger classes for sequential animations in lists
Customize duration and easing if needed
Keep animations subtle (200-300ms for micro-interactions)
Use animations to guide user attention
Avoid excessive motion that distracts
Always test with prefers-reduced-motion enabled
Enhancement Workflow Follow this systematic approach when enhancing a frontend application:
Step 1: Assess Current State
Identify areas lacking visual polish
Note inconsistent styling patterns
Check responsive behavior
Review accessibility issues
Evaluate color scheme and typography
Step 2: Select Design Direction
Choose a color palette from references/color_palettes.md
Review design principles in references/design_principles.md
Decide on component variants and styles
Plan layout improvements
Step 3: Implement Foundation
Set up the cn utility function (assets/utils-cn.ts)
Configure chosen color palette (Tailwind or CSS variables)
Add animation CSS (assets/animations.css) to global styles
Ensure consistent spacing scale
Step 4: Apply Components
Replace basic elements with enhanced components from assets/
Implement layout templates for key pages
Apply consistent styling across the application
Add animations and transitions
Step 5: Refine and Polish
Test responsiveness across device sizes
Verify accessibility (keyboard navigation, contrast, screen readers)
Ensure consistent hover/focus states
Optimize performance (check animation performance)
Test with prefers-reduced-motion
Step 6: Final Review
Check visual hierarchy on all pages
Verify color consistency
Test all interactive states
Validate responsive breakpoints
Review accessibility compliance
Utility Function Setup Most components require the cn utility function for class name merging. To set it up:
Copy assets/utils-cn.ts to your project's lib/utils.ts
Install dependencies:
npm install clsx tailwind-merge
Import in components:
import { cn } from '@/lib/utils' ;
Responsive Design Strategy All components and layouts follow a mobile-first approach:
Base styles - Optimized for mobile (320px+)sm breakpoint - Small tablets (640px+)md breakpoint - Tablets (768px+)lg breakpoint - Desktops (1024px+)xl breakpoint - Large desktops (1280px+) Test each breakpoint to ensure proper layout and readability.
Accessibility Checklist Ensure all enhanced interfaces meet these standards:
Customization Guide To adapt components and templates to your brand:
Colors : Update color values in palette config or component filesTypography : Adjust font sizes, weights, and familiesSpacing : Modify padding and margin valuesBorder Radius : Change rounded corners (e.g., rounded-lg to rounded-xl)Shadows : Adjust shadow intensity (e.g., shadow-md to shadow-lg)Animations : Modify duration and easing functions
Resources Summary
references/
color_palettes.md - Six professionally designed color schemes with implementation examplesdesign_principles.md - Comprehensive design guidelines covering visual hierarchy, typography, accessibility, and common patterns
assets/
button-variants.tsx - Modern button component with 5 variants and 3 sizescard-variants.tsx - Flexible card component with subcomponentsinput-variants.tsx - Input and textarea components with validation stateslayout-hero-section.tsx - Hero section with 3 layout variantslayout-feature-grid.tsx - Responsive feature grid with configurable columnsanimations.css - Complete animation library with accessibility supportutils-cn.ts - Utility function for class name merging
Tips for Success
Start with a plan : Review design principles before making changesChoose one palette : Stick to a single color scheme for consistencyTest on real devices : Emulators don't always show true responsive behaviorKeep it simple : Modern design favors simplicity over complexityPrioritize accessibility : Design for all users from the startIterate based on feedback : Show designs to users and refineMaintain consistency : Use the same patterns throughout your applicationPerformance matters : Keep animations smooth (60fps) and optimize images
Common Use Cases
Enhancing an Existing App
Select a color palette and implement it
Replace basic buttons/inputs with enhanced components
Add subtle animations to improve feedback
Review and improve spacing consistency
Ensure responsive behavior across devices
Building a Landing Page
Use hero section layout as the focal point
Add feature grid to showcase key features
Implement consistent button styles for CTAs
Add staggered animations for visual interest
Test responsiveness thoroughly
Creating a Dashboard
Use card components for data sections
Implement consistent spacing and hierarchy
Choose a professional color palette
Add skeleton loaders for data fetching
Ensure touch-friendly controls on mobile
Redesigning Forms
Replace inputs with enhanced input components
Add clear error and validation states
Ensure proper label associations
Implement loading states for submission
Test keyboard navigation flow
