# Leonxlnx/taste-skill Example Usages: CLI Installation and Agent Prompts

> Explore Leonxlnx/taste-skill example usages. Install via Vercel CLI and generate React/Next.js code with LLM prompts and SKILL.md files. Get production-ready code efficiently.

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

---

**The Leonxlnx/taste-skill repository provides portable Agent-Skills that install via the Vercel CLI and generate production-ready React/Next.js code through LLM prompts guided by structured SKILL.md files.**

Leonxlnx/taste-skill is a collection of portable Agent-Skills compatible with the Vercel Agent-Skills runtime. Each skill resides in its own folder under `skills/` and is defined by a [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md) file that constrains LLM outputs using **three configuration dials** and **hard rules** to prevent common generation errors.

## Installing Leonxlnx/taste-skill via CLI

The repository installs through the `npx skills` CLI, which scans the `skills/` directory and registers every available skill with the Agent-Skills runtime.

### Installing the Full Skill Pack

To register all front-end, image-generation, and utility skills at once:

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

```

This command makes the following skills available:
- `design-taste-frontend` (v2 experimental)
- `taste-skill-v1` (legacy)
- `gpt-tasteskill` (strict GPT/Codex variant)
- `imagegen-frontend-web` and `imagegen-frontend-mobile`
- `image-to-code`
- `brandkit`

### Installing Individual Skills

To install only the experimental v2 design skill defined in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md):

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

```

The install name must match the `name:` front-matter field inside the specific [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md) file.

## Prompt-Based Usage Examples

Once installed, you invoke Leonxlnx/taste-skill capabilities through LLM prompts that reference the skill by name.

### Design Skill with Dial Configuration

The primary design skill (`design-taste-frontend`) uses three global knobs defined in Section 1 of [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md):

- **DESIGN_VARIANCE**: Controls layout symmetry (0-10)
- **MOTION_INTENSITY**: Governs animation complexity (0-10)
- **VISUAL_DENSITY**: Determines content spacing (0-10)

Example prompt:

```text
You are an AI design assistant. Follow the skill "design-taste-frontend" to create a landing page for a SaaS product called "Fluxify".
- Design variance: 8 (asymmetric)
- Motion intensity: 6 (scroll-driven)
- Visual density: 4 (spacious)

Generate the complete Next.js page (including Tailwind classes) and list any npm packages that need to be installed.

```

The model will emit a **design read** (Section 0), apply the three dials (Section 1), select Tailwind from the **Design-System Map** (Section 2), and output JSX following the **Default Architecture** (Section 3: React/Next.js, Tailwind v4, Motion library).

### Image Generation Workflows

The `imagegen-frontend-web` skill generates UI mockups as reference images rather than code.

Example prompt:

```text
Follow the skill "imagegen-frontend-web" to produce three web-comp images for a hero, a feature-grid, and a testimonial carousel for the brand "Aeris".
Provide the URLs of the generated PNGs.

```

The response contains hosted image URLs suitable for direct use in `next/image` components or as references for hand-implementation.

### Image-to-Code Pipeline

The `image-to-code-skill` implements a two-step workflow defined in [`skills/image-to-code-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/image-to-code-skill/SKILL.md):

```text
1. Run the skill "imagegen-frontend-web" to generate a hero mock for "Nimbus".
2. Then, using the skill "image-to-code", analyze that hero and output the corresponding Next.js component.

```

This **Image-first tip** workflow keeps visual reference assets synchronized with generated code, matching the implementation described in the repository README.

## Repository Structure and Configuration Files

Understanding the key files in Leonxlnx/taste-skill helps you select the correct skill for your agent:

| File Path | Purpose | Key Configuration |
|-----------|---------|-------------------|
| [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) | Core v2 design skill | Three dials, hard rules (Section 5D), architecture defaults (Section 3) |
| [`skills/taste-skill-v1/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill-v1/SKILL.md) | Legacy v1 implementation | Original behavior for backward compatibility |
| [`skills/gpt-tasteskill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/gpt-tasteskill/SKILL.md) | Strict variant | Tuned specifically for GPT/Codex agents |
| [`skills/imagegen-frontend-web/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md) | Web image generation | Outputs static mockups for web UIs |
| [`skills/image-to-code-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/image-to-code-skill/SKILL.md) | Analysis pipeline | Converts images to code via structured analysis |
| `examples/floria-top.webp` | Sample output | Visual demonstration of v2 skill capabilities |

The **hard rules** defined in Section 9 of the v2 skill explicitly prohibit patterns like `window.scroll` listeners and em-dash characters, preventing common LLM "slop" from entering production code.

## Summary

- **Leonxlnx/taste-skill** installs via `npx skills add https://github.com/Leonxlnx/taste-skill` or with the `--skill` flag for individual selection.
- **Three configuration dials** (`DESIGN_VARIANCE`, `MOTION_INTENSITY`, `VISUAL_DENSITY`) in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) steer layout, animation, and density.
- **Design skills** generate React/Next.js code using Tailwind v4 and Motion libraries according to the **Default Architecture** specifications.
- **Image skills** provide reference assets first, while **image-to-code** skills convert those assets into functional components.
- **Hard rules** in Section 5D and Section 9 of the SKILL.md files enforce production-quality constraints on LLM output.

## Frequently Asked Questions

### How do I install a specific skill from Leonxlnx/taste-skill?

Use the `--skill` flag with the exact `name:` value from the SKILL.md front-matter. For example, to install only the GPT-optimized variant: `npx skills add https://github.com/Leonxlnx/taste-skill --skill "gpt-tasteskill"`. The CLI reads the `name:` field from [`skills/gpt-tasteskill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/gpt-tasteskill/SKILL.md) to register the skill correctly.

### What are the three dials in the taste-skill configuration?

The three dials are **DESIGN_VARIANCE** (asymmetry control), **MOTION_INTENSITY** (animation level), and **VISUAL_DENSITY** (content spacing). These are defined in Section 1 of [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md) and allow agents to adjust aesthetic output without changing the core design system.

### How does the image-to-code skill work in Leonxlnx/taste-skill?

The `image-to-code` skill defined in [`skills/image-to-code-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/image-to-code-skill/SKILL.md) implements a pipeline where agents first generate visual mockups using `imagegen-frontend-web`, then analyze those images to produce corresponding React/Next.js components. This two-step process ensures the generated code matches visual references exactly.

### What is the difference between taste-skill v1 and v2?

**v1** ([`skills/taste-skill-v1/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill-v1/SKILL.md)) provides the original implementation kept for backward compatibility, while **v2** ([`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md)) introduces the three-dial system, stricter hard rules (particularly Sections 5D and 9), and updated default architectures targeting Tailwind v4. The v2 skill is marked as experimental and is the default recommended version for new projects.