Can it help with security audits?

Yes, it includes specialized patterns for full-stack Next.js security, covering JWT handling with jose, input validation via Zod, and secure password hashing with bcryptjs.

How does it handle accessibility for animations?

It enforces WCAG AAA standards by requiring the use of specialized hooks like useReducedMotion and ensuring all Framer Motion transitions respect system-level accessibility settings.

Is it compatible with the Next.js App Router?

Absolutely. The skill is designed specifically for Next.js 16+ and React 19+, focusing heavily on App Router structures, Server Components, and Turbopack optimization.

Does this skill support Tailwind CSS v3?

While it understands legacy patterns, this skill is specifically optimized for Tailwind CSS v4's CSS-first architecture, including the new @theme directive and the removal of the JavaScript config file.

Luxe Next.js & Tailwind v4 Architect

Name: Luxe Next.js & Tailwind v4 Architect
Author: nordeim

bynordeim

•

Design Tools

Builds sophisticated, high-performance web applications using the latest Next.js 16 and Tailwind CSS v4 CSS-first architecture.

This skill empowers developers to create premium, luxury-grade digital experiences by leveraging a cutting-edge stack including Next.js 16, React 19, and Tailwind CSS v4. It emphasizes an avant-garde design philosophy that moves away from generic templates toward intentional minimalism and WCAG AAA accessibility. Beyond UI construction, the skill provides deep expertise in CSS-first theming, motion design with Framer Motion, and rigorous performance and security auditing to ensure production-ready, elite-tier web applications that are optimized for modern browsers.

Key Features

01Luxury UI component patterns using Radix UI and shadcn/ui architecture

02Next.js 16+ App Router and Server Component best practices

03Comprehensive performance optimization and security audit workflows

041 GitHub stars

05Tailwind CSS v4 CSS-first configuration and @theme implementation

06Accessible animations with Framer Motion and reduced motion hooks

Use Cases

01Building accessible, motion-rich web applications that maintain WCAG AAA compliance

02Migrating existing React projects to the Tailwind v4 CSS-first engine and Next.js 16

03Developing high-end e-commerce or brand identity websites requiring unique, non-generic aesthetics

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nordeim/prompt-engineering nextjs-tailwind-v4-luxe

For use in Claude.ai and ChatGPT

Download Skill