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

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 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:

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:

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 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:

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

Example prompt:

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:

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:

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	Core v2 design skill	Three dials, hard rules (Section 5D), architecture defaults (Section 3)
skills/taste-skill-v1/SKILL.md	Legacy v1 implementation	Original behavior for backward compatibility
skills/gpt-tasteskill/SKILL.md	Strict variant	Tuned specifically for GPT/Codex agents
skills/imagegen-frontend-web/SKILL.md	Web image generation	Outputs static mockups for web UIs
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 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 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 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 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) provides the original implementation kept for backward compatibility, while v2 (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.

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