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

> Explore the modern React stack in Leonxlnx/taste-skill, featuring Next.js, Tailwind CSS v4, Motion, GSAP, and state management for AI UI development.

- Repository: [Leon Lin/taste-skill](https://github.com/Leonxlnx/taste-skill)
- Tags: getting-started
- Published: 2026-05-26

---

**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`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) and direct agents to verify dependencies in [`package.json`](https://github.com/Leonxlnx/taste-skill/blob/main/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`](https://github.com/Leonxlnx/taste-skill/blob/main/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:

```tsx
<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`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md).

This example demonstrates a canonical reveal animation:

```tsx
"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:

```tsx
"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`](https://github.com/Leonxlnx/taste-skill/blob/main/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`](https://github.com/Leonxlnx/taste-skill/blob/main/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`](https://github.com/Leonxlnx/taste-skill/blob/main/README.md) at line 46. This process is facilitated by the [`skill.sh`](https://github.com/Leonxlnx/taste-skill/blob/main/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`](https://github.com/Leonxlnx/taste-skill/blob/main/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`](https://github.com/Leonxlnx/taste-skill/blob/main/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.