Development Tools in Leonxlnx/taste-skill: React, Next.js, and Tailwind CSS v4

The Leonxlnx/taste-skill repository prescribes a modern React-based stack including Next.js, Tailwind CSS v4, Motion, GSAP with ScrollTrigger, and curated state management and icon libraries for AI-generated UI development.

The Leonxlnx/taste-skill repository is a spec-driven front-end framework for AI agents that defines development standards through markdown specifications rather than shipping source code. Understanding the development tools in Leonxlnx/taste-skill is essential for implementing the design system, layout patterns, and motion behaviors it requires. The specifications are codified in skills/taste-skill/SKILL.md and direct agents to verify dependencies in package.json before use.

Core Frontend Framework and Styling

React and Next.js

The specification designates React as the primary component framework, with Next.js serving as the default for server components and routing. According to the source code in skills/taste-skill/SKILL.md at line 126, generated UI must use Next.js patterns for server-side rendering while isolating interactive logic in React client components marked with "use client" at the top of the file.

Tailwind CSS v4

Tailwind CSS v4 is the mandated utility-first styling system. The specification at line 130 requires v4 syntax unless a legacy project explicitly forces v3. The framework enforces consistent breakpoints (sm, md, lg, xl, 2xl) and a single-theme approach (light, dark, or system-preferred) across all generated components.

A typical Tailwind implementation follows this pattern:

<div className="min-h-[100dvh] flex items-center bg-white dark:bg-zinc-950 p-8">
  <h1 className="text-4xl md:text-6xl font-bold text-gray-900 dark:text-gray-100">
    Your headline here
  </h1>
</div>

Animation and Motion Libraries

Motion for React

Motion (formerly Framer Motion) supplies declarative animation hooks. Imported via motion/react, the library provides whileInView, useMotionValue, and useReducedMotion for accessible, performant animations. The older framer-motion alias is retained for backward compatibility, but new code should use the modern import path as noted at line 132 of SKILL.md.

This example demonstrates a canonical reveal animation:

"use client";
import { motion, useReducedMotion } from "motion/react";

export function FadeIn({ children }: { children: React.ReactNode }) {
  const reduce = useReducedMotion();
  return (
    <motion.div
      initial={reduce ? false : { opacity: 0, y: 24 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, amount: 0.3 }}
      transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
    >
      {children}
    </motion.div>
  );
}

GSAP and ScrollTrigger

For advanced scroll-driven animations and pinning patterns such as Sticky-Stack and Horizontal-Pan, the repository specifies GSAP (GreenSock) with its ScrollTrigger plugin. This combination handles complex timeline control and scroll-linked effects that exceed Motion's declarative capabilities, as detailed at line 303 of the skill specification.

The Sticky-Stack pattern implementation:

"use client";
import { useRef, useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useReducedMotion } from "motion/react";

gsap.registerPlugin(ScrollTrigger);

export function StickyStack({ cards }: { cards: React.ReactNode[] }) {
  const ref = useRef<HTMLDivElement>(null);
  const reduce = useReducedMotion();

  useEffect(() => {
    if (reduce || !ref.current) return;
    const ctx = gsap.context(() => {
      const cardEls = gsap.utils.toArray<HTMLElement>(".stack-card");
      cardEls.forEach((card, i) => {
        if (i === cardEls.length - 1) return;
        ScrollTrigger.create({
          trigger: card,
          start: "top top",
          endTrigger: cardEls[cardEls.length - 1],
          end: "top top",
          pin: true,
          pinSpacing: false,
        });
        gsap.to(card, {
          scale: 0.92,
          opacity: 0.55,
          ease: "none",
          scrollTrigger: {
            trigger: cardEls[i + 1],
            start: "top bottom",
            end: "top top",
            scrub: true,
          },
        });
      });
    }, ref);
    return () => ctx.revert();
  }, [reduce]);

  return (
    <div ref={ref} className="relative">
      {cards.map((card, i) => (
        <div
          key={i}
          className="stack-card sticky top-0 min-h-[100dvh] flex items-center justify-center"
        >
          {card}
        </div>
      ))}
    </div>
  );
}

State Management Solutions

The specification limits global state management to three canonical options: Zustand, Jotai, or React Context, as defined at line 136 of SKILL.md. Local UI state should reside in useState or useReducer for isolated components. Continuous values like scroll progress must not use useState; instead, they should leverage Motion's useScroll or GSAP's native observation to prevent unnecessary re-renders.

Iconography and Design Systems

Icon Libraries

Visual consistency depends on selecting a single icon family per project. The priority order specified at line 140 is:

• @phosphor-icons/react
• hugeicons-react
• @radix-ui/react-icons
• @tabler/icons-react

The specification normalizes strokeWidth across the chosen library. Lucide React (lucide-react) is explicitly restricted and only allowed upon explicit request to prevent visual inconsistency.

Design System Packages

When a project brief matches a specific visual language, the agent must use the corresponding official npm package rather than custom CSS. The "Design → System Map" at line 86 lists the following approved packages:

• shadcn/ui
• @radix-ui/themes
• @fluentui/react-components
• @material/web
• Bootstrap 5.3
• Carbon
• Polaris
• GovUK Frontend
• USWDS

These packages must be added to package.json and imported directly when the brief calls for their respective design languages.

Development Workflow and CLI

The repository includes a command-line interface for skill registration. The npx skills add command scans the skills/ folder and registers a skill with an AI-agent runtime, as documented in README.md at line 46. This process is facilitated by the skill.sh helper script located in the repository root, which handles path resolution and registration logic.

Summary

• React / Next.js provides the foundation for server and client components, with Next.js handling routing and SSR optimization.
• Tailwind CSS v4 supplies the utility-first styling system with enforced breakpoints and single-theme constraints.
• Motion (formerly Framer Motion) delivers declarative animations via motion/react imports and accessibility hooks.
• GSAP with ScrollTrigger manages complex scroll-driven interactions including pinning and timeline scrubbing.
• Zustand, Jotai, or React Context serve as the only approved global state solutions; useState is prohibited for continuous values.
• Curated icon libraries follow a strict priority order, with explicit restrictions on Lucide React.
• Design-system packages must be used verbatim when a brief matches their visual language.
• The npx skills add CLI streamlines skill registration in agent runtimes, supported by the skill.sh helper script.

Frequently Asked Questions

What is the primary frontend framework specified in taste-skill?

React with Next.js is the primary component framework. According to skills/taste-skill/SKILL.md, Next.js serves as the default for server components and routing, while interactive elements must be isolated in React client components using the "use client" directive.

Why does taste-skill require Tailwind CSS v4 specifically?

The specification mandates Tailwind CSS v4 syntax to ensure access to the latest performance improvements and features. Legacy projects may use v3 only when explicitly forced, but all new implementations should follow v4 conventions for utility-first styling, breakpoints, and theming.

How does taste-skill handle complex scroll animations?

For advanced scroll-driven animations, the repository specifies GSAP with the ScrollTrigger plugin. This combination handles pinning patterns like Sticky-Stack and Horizontal-Pan that exceed the capabilities of Motion's declarative API, as detailed at line 303 of the skill specification.

Can I use Lucide icons in a taste-skill project?

Lucide React icons are restricted and only permitted upon explicit request. The specification prioritizes @phosphor-icons/react, hugeicons-react, @radix-ui/react-icons, and @tabler/icons-react (in that order) to maintain visual consistency and normalized strokeWidth across projects.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}