Complete Documentation for Leonxlnx/taste-skill: The Anti-Slop Frontend Framework

Complete Documentation for Leonxlnx/taste-skill: The Anti-Slop Frontend Framework

The official documentation for Leonxlnx/taste-skill lives directly in the repository, primarily in the root README.md and individual SKILL.md files within the skills/ directory.

The Leonxlnx/taste-skill repository provides an "Anti-Slop Frontend Framework for AI Agents" through portable skill definitions. This documentation covers where to find installation guides, design system rules, and canonical code snippets that keep AI-generated interfaces from looking templated.

Where to Find the Official Documentation

Root README and Project Overview

Start with README.md in the repository root. This file contains the at-a-glance guide, quick-install commands using the Vercel CLI, and a complete skill matrix. It also links to design system recommendations, dial-based configuration options, and performance guardrails.

The skills/ Directory Structure

Each skill resides in a dedicated subfolder under skills/. Every folder contains a self-contained SKILL.md file that the npx skills add CLI discovers automatically. According to the source code structure, these files collectively define how the framework operates.

Understanding the SKILL.md Format

Front-Matter Metadata

Every skill file begins with YAML front matter specifying the install name and description:

---
name: design-taste-frontend
description: Anti-slop frontend skill for landing pages, portfolios, and redesigns.
---

Design Dial System

The documentation defines three numeric dials that drive layout across all skills:

• DESIGN_VARIANCE: Controls layout experimentation
• MOTION_INTENSITY: Governs animation complexity
• VISUAL_DENSITY: Determines content spacing

These dials are documented in Section 1 of skills/taste-skill/SKILL.md and allow precise control over AI output.

Installing and Using Skills

Install all skills from the repository using the Vercel CLI:

npx skills add https://github.com/Leonxlnx/taste-skill

Install a specific skill by its front-matter name:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Key Documentation Files

The following files constitute the complete documentation for the framework:

File	Purpose
README.md	Project overview, install matrix, quickstart guide
skills/taste-skill/SKILL.md	Core skill with dial system and design rules
skills/taste-skill-v1/SKILL.md	Legacy v1 skill preserving original behavior
skills/gpt-tasteskill/SKILL.md	Stricter preset optimized for GPT/Codex agents
skills/imagegen-frontend-web/SKILL.md	Reference-image generation instructions
skill.sh	Helper script for local testing
research/README.md	Background research informing design rules

Implementation Examples

Loading a Skill in a Prompt

When prompting an LLM, reference the skill directly:

You are an AI agent. Load the skill `design-taste-frontend` and generate a landing-page hero section with DESIGN_VARIANCE 5, MOTION_INTENSITY 3, VISUAL_DENSITY 2.

The agent will output a one-line "Design Read" before generating code that respects the constraints (no em-dashes, mandatory dark-mode support, strict contrast ratios).

Canonical UI Blocks

Each skill includes ready-to-copy TSX snippets using GSAP or Motion. For example, the Sticky-Stack pattern from Sections 5-5.D of skills/taste-skill/SKILL.md:

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

gsap.registerPlugin(ScrollTrigger);

export function StickyStack({ cards }: { cards: React.ReactNode[] }) {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (!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,
          scrollTrigger: {
            trigger: cardEls[i + 1],
            start: "top bottom",
            end: "top top",
            scrub: true,
          },
        });
      });
    }, ref);
    return () => ctx.revert();
  }, []);
  return (
    <div ref={ref} className="relative">
      {cards.map((c, i) => (
        <div key={i} className="stack-card sticky top-0 min-h-[100dvh] flex items-center justify-center">
          {c}
        </div>
      ))}
    </div>
  );
}

Dependency Guardrails

Section 3.D of the core skill documentation specifies that agents must check package.json before importing libraries. If a brief requires Material Design, the skill instructs:

npm i @material/web

Then the generated code may safely import:

import { Button } from "@material/web/button";

Summary

• The Leonxlnx/taste-skill documentation is contained entirely within the repository's markdown files
• Start with README.md for installation and the skills/ directory for specific rules
• Each SKILL.md uses front-matter metadata and a three-dial configuration system
• Copy-paste canonical UI blocks directly from Sections 5-5.D of the skill files
• Use npx skills add to install skills via the Vercel CLI

Frequently Asked Questions

Where is the main documentation file for Leonxlnx/taste-skill?

The primary documentation resides in the root README.md for project overview, while specific skill rules live in individual SKILL.md files within the skills/ directory. The skills/taste-skill/SKILL.md file contains the core anti-slop framework specifications including the dial system and design constraints.

How do I install a specific skill from the taste-skill repository?

Use the Vercel CLI with the --skill flag: npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend". This targets the specific skill name defined in the front matter of that skill's SKILL.md file.

What are the three design dials documented in taste-skill?

The framework defines DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY. These numeric controls (documented in Section 1 of skills/taste-skill/SKILL.md) govern layout experimentation, animation complexity, and content spacing respectively.

Can I use taste-skill with frameworks other than React?

Yes. While the documentation provides React/Next.js/Vite examples (particularly in Sections 5-5.D), the skill specifications are framework-agnostic. The rules focus on design system constraints, accessibility guardrails, and dependency management that apply regardless of framework choice.

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