# Complete Documentation for Leonxlnx/taste-skill: The Anti-Slop Frontend Framework > Access complete documentation for Leonxlnx/taste-skill, the anti-slop frontend framework. Build cleaner, more efficient web applications with our comprehensive guide. - Repository: [Leon Lin/taste-skill](https://github.com/Leonxlnx/taste-skill) - Tags: documentation - Published: 2026-05-26 --- 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`](https://github.com/Leonxlnx/taste-skill/blob/main/README.md) and individual [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/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`](https://github.com/Leonxlnx/taste-skill/blob/main/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`](https://github.com/Leonxlnx/taste-skill/blob/main/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: ```yaml --- 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`](https://github.com/Leonxlnx/taste-skill/blob/main/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: ```bash npx skills add https://github.com/Leonxlnx/taste-skill ``` Install a specific skill by its front-matter name: ```bash 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`](https://github.com/Leonxlnx/taste-skill/blob/main/README.md) | Project overview, install matrix, quickstart guide | | [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) | Core skill with dial system and design rules | | [`skills/taste-skill-v1/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill-v1/SKILL.md) | Legacy v1 skill preserving original behavior | | [`skills/gpt-tasteskill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/gpt-tasteskill/SKILL.md) | Stricter preset optimized for GPT/Codex agents | | [`skills/imagegen-frontend-web/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md) | Reference-image generation instructions | | [`skill.sh`](https://github.com/Leonxlnx/taste-skill/blob/main/skill.sh) | Helper script for local testing | | [`research/README.md`](https://github.com/Leonxlnx/taste-skill/blob/main/research/README.md) | Background research informing design rules | ## Implementation Examples ### Loading a Skill in a Prompt When prompting an LLM, reference the skill directly: ```text 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`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md): ```tsx "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(null); useEffect(() => { if (!ref.current) return; const ctx = gsap.context(() => { const cardEls = gsap.utils.toArray(".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 (
{cards.map((c, i) => (
{c}
))}
); } ``` ### Dependency Guardrails Section 3.D of the core skill documentation specifies that agents must check [`package.json`](https://github.com/Leonxlnx/taste-skill/blob/main/package.json) before importing libraries. If a brief requires Material Design, the skill instructs: ```bash npm i @material/web ``` Then the generated code may safely import: ```tsx 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`](https://github.com/Leonxlnx/taste-skill/blob/main/README.md)** for installation and the **`skills/`** directory for specific rules - Each **[`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/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`](https://github.com/Leonxlnx/taste-skill/blob/main/README.md) for project overview, while specific skill rules live in individual [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md) files within the `skills/` directory. The [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/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`](https://github.com/Leonxlnx/taste-skill/blob/main/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`](https://github.com/Leonxlnx/taste-skill/blob/main/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.