### Install GOV.UK Frontend

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md

Install the GOV.UK Frontend toolkit.

```bash
npm install govuk-frontend
```

--------------------------------

### Install Radix Themes

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md

Install the Radix Themes library.

```bash
npm install @radix-ui/themes
```

--------------------------------

### Install Primer CSS

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md

Install the Primer CSS library for GitHub product and devtool UI.

```bash
npm install --save @primer/css
```

--------------------------------

### Install Primer Brand

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md

Install the Primer Brand library for GitHub marketing UI.

```bash
npm install @primer/react-brand
```

--------------------------------

### Install Fluent UI Web Components

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md

Install the framework-free Fluent UI Web Components and tokens.

```bash
npm install @fluentui/web-components @fluentui/tokens
```

--------------------------------

### Install a Specific Taste Skill

Source: https://github.com/leonxlnx/taste-skill/blob/main/README.md

Install a single Agent Skill by its 'name' field found in the SKILL frontmatter. This is useful for installing only the skills you need.

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

--------------------------------

### Install USWDS (US Web Design System)

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md

Install the U.S. Web Design System.

```bash
npm install uswds
```

--------------------------------

### Install Taste Skill v1 Explicitly

Source: https://github.com/leonxlnx/taste-skill/blob/main/README.md

If you require the exact behavior of v1, use this command to pin the installation to the 'design-taste-frontend-v1' skill.

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

--------------------------------

### Install Bootstrap 5.3

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md

Install Bootstrap version 5.3.

```bash
npm install bootstrap
```

--------------------------------

### Install IBM Carbon

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md

Install the Carbon Design System for React and its styles.

```bash
npm install @carbon/react @carbon/styles
```

--------------------------------

### Install All Taste Skill Skills

Source: https://github.com/leonxlnx/taste-skill/blob/main/README.md

Use this command to install all available Agent Skills from the Taste Skill repository. This command scans the 'skills/' folder for all skills.

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

--------------------------------

### Install Fluent UI React (v9)

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md

Install the Fluent UI React library version 9.

```bash
npm install @fluentui/react-components
```

--------------------------------

### Install Material Web (Material 3)

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md

Use this command to install the Material Web library for Material 3.

```bash
npm install @material/web
```

--------------------------------

### Install Atlassian Design System (Atlaskit)

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md

Install core Atlassian Design System packages including CSS reset, tokens, button, badge, section-message, and card.

```bash
yarn add @atlaskit/css-reset @atlaskit/tokens @atlaskit/button @atlaskit/badge @atlaskit/section-message @atlaskit/card
```

--------------------------------

### Block Library File Structure

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md

Illustrates the directory structure for implementing UI blocks within the Taste Skill. This schema guides the iterative addition of new blocks.

```text
skills/taste-skill/blocks/
  hero/
    asymmetric-split.md
    editorial-manifesto.md
    kinetic-type.md
    ...
  feature/
    bento-grid.md
    sticky-scroll-stack.md
    zig-zag.md
    ...
  social-proof/
  pricing/
  cta/
  footer/
  navigation/
  portfolio/
  transition/
```

--------------------------------

### Install Shopify Polaris Web Components

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md

Install Shopify Polaris Web Components. This is intended for Shopify apps only. Ensure the meta tag for the Shopify API key and the Polaris script are included in your HTML head.

```bash
# Add this to your app HTML head:
#   <meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
#   <script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>
```

--------------------------------

### Placeholder Propagation in Python

Source: https://github.com/leonxlnx/taste-skill/blob/main/research/laziness/root-causes/training-data-bias.md

Demonstrates how LLMs learn to use placeholder comments in code due to their prevalence in training data, such as tutorial examples.

```python
def complex_logic():
    # implement auth here
    pass
```

--------------------------------

### Code Generation Output Enforcement Prompt

Source: https://github.com/leonxlnx/taste-skill/blob/main/research/laziness/remediation/reference-prompts.md

This prompt guides the model to write complete, production-ready code implementations, including all functions, imports, and edge case handlers. It explicitly forbids placeholder comments and requires actual code instead of descriptions. It also specifies how to handle multi-file outputs.

```text
Write the complete, production-ready implementation. Every function,
every
import, every edge case handler must be present in the output.

Do not use placeholder comments (// TODO, // implement here, // similar
to above). Do not describe what code should do — write the actual code.

If the implementation requires multiple files, output each file completely
with its full path as a header.
```

--------------------------------

### Initialize and Add Components to shadcn/ui

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md

Initialize shadcn/ui in your project and add specific components like button, card, badge, separator, and input.

```bash
npx shadcn@latest init
npx shadcn@latest add button card badge separator input
```

--------------------------------

### Step-by-Step Reasoning Output Enforcement Prompt

Source: https://github.com/leonxlnx/taste-skill/blob/main/research/laziness/remediation/reference-prompts.md

This prompt instructs the model to work through a problem systematically by identifying requirements, breaking down the task, executing each step completely, and verifying the output. It requires the model to output its reasoning process before the final answer, without skipping or summarizing intermediate work.

```text
Before generating your final response, work through the problem systematically:

1. Identify all requirements and constraints from the prompt
2. Break the task into discrete steps
3. Execute each step completely
4. Verify your output against the original requirements

Output your reasoning process, then your final answer. Do not skip steps
or summarize intermediate work.
```

--------------------------------

### Generating a Simple Monogram SVG

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md

When creating a logo for a made-up brand, generate a simple SVG monogram. This example shows a basic structure for a single-letter monogram.

```html
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="45" stroke="currentColor" stroke-width="4" fill="none"/>
  <text x="50" y="50" dominant-baseline="middle" text-anchor="middle" font-size="60" font-weight="bold" fill="currentColor">A</text>
</svg>
```

--------------------------------

### Continuation Handling Prompt

Source: https://github.com/leonxlnx/taste-skill/blob/main/research/laziness/remediation/reference-prompts.md

This prompt provides instructions for handling responses that approach the output token limit. It specifies not to compress content or skip ahead, but to stop at a natural breakpoint and indicate where to resume, with no recaps or repetition upon continuation.

```text
If your response approaches the output token limit:
- Do not compress remaining content to fit
- Do not skip ahead to a conclusion
- Stop at a natural breakpoint (end of a function, end of a section)
- End with: [PAUSED - X of Y sections complete. Send "continue" to resume]

On "continue", pick up exactly where you stopped. No recaps or repetition.
```

--------------------------------

### Inline Typography Image Example

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/gpt-tasteskill/SKILL.md

Embeds a small, pill-shaped image within large headings for inline visual interest. Ensure the span has appropriate dimensions and background styling.

```html
I shape <span class="inline-block w-24 h-10 rounded-full align-middle bg-cover bg-center mx-2" style="background-image: url(...);"></span> digital spaces.
```

--------------------------------

### Using next/image for LCP optimization

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md

Ensure fast Largest Contentful Paint (LCP) by using `next/image` with the `priority` prop for hero images.

```javascript
import Image from 'next/image';

function HeroSection() {
  return (
    <Image
      src="/images/hero.jpg"
      alt="Hero Image"
      width={1920}
      height={1080}
      priority
    />
  );
}
```

--------------------------------

### Using fractional units in CSS Grid for asymmetric layouts

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md

Create asymmetric layouts with CSS Grid by defining columns with fractional units.

```css
.asymmetric-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
}
```

--------------------------------

### Placeholder Photography with Picsum Photos

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md

Use this URL format to generate placeholder images when no image generation tool is available. The seed should be descriptive of the section's content.

```text
https://picsum.photos/seed/{descriptive-seed}/{w}/{h}
```

--------------------------------

### Mock Python RNG for Design Plan

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/gpt-tasteskill/SKILL.md

A three-line mock Python output demonstrating the deterministic selection of design elements based on prompt character count, as required for the pre-flight design plan.

```python
import random
random.seed(len(prompt))
selected_elements = [...] # Deterministically selected based on seed
```

--------------------------------

### Custom Cubic-Bezier Transition

Source: https://github.com/leonxlnx/taste-skill/blob/main/skills/soft-skill/SKILL.md

Applies a custom transition with a specific duration and a physics-based cubic-bezier timing function for fluid motion.

```html
transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]
```