### Run Development Server

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/README.md

Starts the development server for local development. Access the application at http://localhost:3000.

```bash
npm run dev
# Open http://localhost:3000
```

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

### Example Topic Objects

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/types.md

Illustrates how to structure topic objects using the Topic type. These examples show different configurations for design core and general frontend topics.

```typescript
{
  slug: "accessibility",
  label: "Accessibility",
  description: "Inclusive UI patterns, WCAG audits, and remediation workflows.",
  isDesignCore: true
}

{
  slug: "motion",
  label: "Motion",
  description: "Animation systems, transitions, and interaction timing.",
  isDesignCore: true
}

{
  slug: "frontend",
  label: "Frontend",
  description: "General frontend implementation guidance and patterns.",
  isDesignCore: false
}
```

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

### Install Project Dependencies

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/README.md

Installs project dependencies using npm. Ensure Node.js 18+ and npm are installed.

```bash
git clone https://github.com/ibelick/ui-skills.git
cd ui-skills
npm install
```

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

### Run UI Skills CLI

Source: https://github.com/ibelick/ui-skills/blob/main/README.md

Execute the UI Skills CLI to start the agent with default skill sets.

```bash
npx ui-skills
```

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

### Start UI Skills CLI

Source: https://github.com/ibelick/ui-skills/blob/main/skills/ui-skills-root/SKILL.md

Initiates the UI Skills CLI. Use this command to begin interacting with the UI Skills system.

```bash
npx ui-skills start
```

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

### RegistrySkill Example Object

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/types.md

An example of a fully populated `RegistrySkill` object, illustrating the expected values for each field. This serves as a concrete representation of the type.

```typescript
{
  slug: "baseline-ui",
  pathSlug: "ibelick/baseline-ui",
  sourceKey: "ibelick",
  sourceLabel: "Ibelick",
  user: "ibelick",
  repo: "ui-skills",
  rawUrl: "https://raw.githubusercontent.com/ibelick/ui-skills/main/skills/baseline-ui/SKILL.md",
  githubUrl: "https://github.com/ibelick/ui-skills/blob/main/skills/baseline-ui/SKILL.md",
  name: "baseline-ui",
  description: "Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues.",
  topics: ["systems", "visual", "craft"]
}
```

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

### URL Structure Examples

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/astro-integration.md

Illustrates the mapping between URL paths and their corresponding page or resource in the UI Skills project.

```plaintext
/                           → Home
/install                    → Installation page
/skills/{slug}              → Skill detail page
/skills/{slug}/llms.txt     → Skill LLM context
/skills/registry.txt        → Full registry
/llms.txt                   → Global LLM context
/robots.txt                 → Robots directives
/sitemap.xml                → XML sitemap
```

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

### React InstallTabs Component

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/README.md

Utilize the InstallTabs component to display installation commands in a tabbed interface. This component simplifies the presentation of different installation methods.

```typescript
import { InstallTabs } from "./ui/install-tabs";

// Installation commands
<InstallTabs />
```

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

### NewsletterInput Usage Examples

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/react-components.md

Demonstrates how to use the NewsletterInput component with default and customized props.

```typescript
import NewsletterInput from "./ui/newsletter-input";

// With defaults
<NewsletterInput />

// Customized
<NewsletterInput
  title="Subscribe to updates"
  description="Get weekly design engineering tips"
  placeholder="your@email.com"
  buttonLabel="Join"
/>
```

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

### Show Routing Skill CLI

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/README.md

This command starts the UI Skills application and displays the routing skill. It's typically used for development or demonstration purposes.

```bash
ui-skills start
```

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

### Get Specific UI Skill

Source: https://github.com/ibelick/ui-skills/blob/main/README.md

Retrieve details for a specific UI skill, like 'baseline-ui'.

```bash
npx ui-skills get baseline-ui
```

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

### Topic Lookup Usage Example (TypeScript)

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/types.md

Demonstrates how to retrieve and use topic information from the `topicBySlug` map. Handles cases where the topic slug might not exist.

```typescript
const topic = topicBySlug.get("motion");
if (topic) {
  console.log(topic.label); // "Motion"
}
```

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

### Get Skill from Specific Source

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/cli-reference.md

Fetches a skill from a particular user and repository on a source platform (e.g., GitHub). Use this to access skills not in the default registry.

```bash
ui-skills get antfu/vue
```

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

### Display Help Message

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/cli-reference.md

Prints the help message for the ui-skills CLI, including usage, available commands, and examples. This can be invoked using --help, -h, or help.

```bash
ui-skills --help
```

```bash
ui-skills -h
```

```bash
ui-skills help
```

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

### Prettier Configuration

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/astro-integration.md

Default Prettier configuration file. Ensure prettier-plugin-astro and prettier-plugin-tailwindcss are installed for Astro and Tailwind CSS support.

```json
{
  // Prettier config (default settings used)
}
```

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

### Get Specific Skill CLI

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/README.md

Retrieve detailed information for a specific skill using its name or a GitHub repository path. This command displays the skill's markdown content.

```bash
ui-skills get baseline-ui
```

```bash
ui-skills get antfu/vue
```

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

### Get a Specific Skill

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/cli-reference.md

Retrieves details for a single skill using its slug. Use this command to inspect a particular skill.

```bash
ui-skills get fixing-accessibility
```

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

### Get Specific UI Skill

Source: https://github.com/ibelick/ui-skills/blob/main/skills/ui-skills-root/SKILL.md

Retrieves details for a specific UI Skill identified by its slug. Replace `<slug>` with the unique identifier of the skill.

```bash
npx ui-skills get <slug>
```

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

### Get Specific Skill Content

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/cli-reference.md

Prints the full markdown content for a specific skill using its slug or path slug. It attempts to read local markdown files first, then falls back to fetching from the skill's rawUrl.

```bash
ui-skills get baseline-ui
```

```bash
ui-skills get ibelick/baseline-ui
```

```bash
ui-skills get antfu/vue
```

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

### React Copy Button Component

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/README.md

Integrate the CopyButton component to allow users to easily copy text, such as installation commands, to their clipboard. It provides visual feedback on copy success.

```typescript
import { CopyButton } from "./ui/copy-button";

// Copy button with text
<CopyButton content="npm install ui-skills" />
```

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

### List All Skills CLI

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/README.md

Use this command to list all available skills. For more options, refer to the CLI reference.

```bash
ui-skills list
```

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

### Build Project for Production

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/README.md

Compiles the project for production deployment. This command optimizes assets and code.

```bash
npm run build
```

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

### List UI Skills by Category

Source: https://github.com/ibelick/ui-skills/blob/main/README.md

List all UI skills within a specific category, such as 'motion'.

```bash
npx ui-skills list --category motion
```

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

### List Categories CLI

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/README.md

Use this command to list all available categories within the UI Skills project. This helps in understanding the organizational structure.

```bash
ui-skills categories
```

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

### TextMorph in a State-Driven Context

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/react-components.md

Provides an example of using TextMorph within a React component to display dynamic text based on component state, such as in a CopyButton.

```jsx
// In CopyButton context
const [isCopied, setIsCopied] = useState(false);
<TextMorph>{isCopied ? "Copied" : "Copy"}</TextMorph>
```

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

### List Skills in a Category

Source: https://github.com/ibelick/ui-skills/blob/main/skills/ui-skills-root/SKILL.md

Lists all available skills within a specified category. Replace `<category>` with the actual category name to see its associated skills.

```bash
npx ui-skills list --category <category>
```

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

### Basic TextMorph Usage

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/react-components.md

Demonstrates the simplest way to use the TextMorph component with default settings.

```jsx
import { TextMorph } from "./ui/text-morph";

// Simple text morphing
<TextMorph>Loading...</TextMorph>
```

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

### VS Code Recommended Extensions

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/astro-integration.md

Configuration for recommended VS Code extensions to enhance the development experience for Astro projects.

```json
{
  "recommendations": [
    "astro-build.astro-vscode",
    "dbaeumer.vscode-typescript-cwd",
    "bradlc.vscode-tailwindcss"
  ]
}
```

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

### List UI Skills Categories

Source: https://github.com/ibelick/ui-skills/blob/main/skills/ui-skills-root/SKILL.md

Retrieves a list of available categories within the UI Skills system. Use this to understand the different domains UI Skills can address.

```bash
npx ui-skills categories
```

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

### CommandDialog Component Usage

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/react-components.md

Demonstrates how to import and use the CommandDialog component with an array of skill items. Ensure all required properties for CommandItem are provided.

```typescript
import { CommandDialog } from "./ui/command-dialog";

const skillItems = [
  {
    slug: "baseline-ui",
    pathSlug: "ibelick/baseline-ui",
    label: "Baseline UI",
    sourceLabel: "Ibelick",
    description: "Quickly deslop UI code...",
    searchContent: "[full markdown content]"
  },
  // ... more items
];

<CommandDialog items={skillItems} />
```

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

### Format Code

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/README.md

Applies code formatting rules to the entire project to ensure consistent style.

```bash
npm run format
```

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

### Data Flow: CLI vs. Web

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/astro-integration.md

Compares the file structure and data sources used by the Command Line Interface (CLI) and the web application.

```plaintext
bin/ui-skills.ts (CLI)
    ├─ src/data/registry.ts
    ├─ src/data/skills.ts
    └─ src/data/topics.ts

src/pages/*.astro (Web)
    ├─ src/data/registry.ts
    ├─ src/data/skills.ts
    └─ src/data/topics.ts

Both CLI and web share the same data sources.
```

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

### Import Relationships

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/project-structure.md

Visualizes the import dependencies between the main script, pages, and UI components, showing which modules import from others.

```plaintext
bin/ui-skills.ts
├─ src/data/registry.ts (registry, RegistrySkill)
├─ src/data/skills.ts (skills, Skill)
└─ src/data/topics.ts (topics, Topic, topicBySlug)

src/pages/*.astro or .ts
├─ src/data/registry.ts
├─ src/data/skills.ts
└─ src/data/topics.ts

src/ui/command-dialog.tsx
└─ (no local imports, @base-ui/react, motion/react)

src/ui/copy-button.tsx
└─ src/ui/text-morph.tsx

src/ui/install-tabs.tsx
└─ src/ui/copy-button.tsx

src/ui/newsletter-input.tsx
└─ (no local imports, motion/react only)

src/ui/text-morph.tsx
└─ (no local imports, motion/react only)
```

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

### InstallTabs Component Usage

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/react-components.md

Import and use the InstallTabs component in your React application. No additional configuration is needed.

```typescript
import { InstallTabs } from "./ui/install-tabs";

// No configuration needed
<InstallTabs />
```

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

### Skill Display Format

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/cli-reference.md

Skills are displayed using a specific format: path slug, joined topics, and a cleaned description. Whitespace in descriptions is normalized.

```text
{pathSlug} — {topics.join(", ")} — {description}
```

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

### Registry Deduplication Logic

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/data-structures.md

Demonstrates the logic for ensuring unique path slugs within the skill registry. It handles collisions by appending user and repository information.

```typescript
const usedPathSlugs = new Set<string>();
for (const entry of registrySource) {
  let pathSlug = buildInitialPathSlug(entry);
  if (usedPathSlugs.has(pathSlug)) {
    pathSlug = `${user}/${repo}/${slug}`;
  }
  usedPathSlugs.add(pathSlug);
}
```

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

### Search Skills by Category CLI

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/README.md

Filter the list of skills by specifying a category. This is useful for finding skills related to a specific domain.

```bash
ui-skills list --category motion
```

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

### Batching DOM Reads/Writes (FLIP)

Source: https://github.com/ibelick/ui-skills/blob/main/skills/fixing-motion-performance/SKILL.md

To prevent layout thrashing, batch DOM reads (like getBoundingClientRect) before performing writes and animations. Measure once, then apply transforms.

```javascript
// measurement: batch reads before writes (FLIP)
// before — layout thrash
el.style.left = el.getBoundingClientRect().left + 10 + 'px';
// after — measure once, animate via transform
const first = el.getBoundingClientRect();
el.classList.add('moved');
const last = el.getBoundingClientRect();
el.style.transform = `translateX(${first.left - last.left}px)`;
requestAnimationFrame(() => { el.style.transition = 'transform 0.3s'; el.style.transform = ''; });
```

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

### Compute Initial Path Slug

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/data-structures.md

Generates a unique path slug for a registry entry based on user and slug. This is the first step in the deduplication logic.

```typescript
const buildInitialPathSlug = (entry: RegistrySourceSkill) => {
  const userSegment = entry.user.toLowerCase();
  return `${userSegment}/${entry.slug}`;
};
```

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

### Frontend & Framework Topics

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/data-structures.md

Defines broader frontend and framework-specific categories as topics, each with a slug, label, and a boolean indicating if it's a design core topic.

```typescript
[
  { slug: "frontend", label: "Frontend", isDesignCore: false },
  { slug: "architecture", label: "Architecture", isDesignCore: false },
  { slug: "testing", label: "Testing", isDesignCore: false },
  { slug: "tooling", label: "Tooling", isDesignCore: false },
  { slug: "video", label: "Video", isDesignCore: false },
  { slug: "nextjs", label: "Next.js", isDesignCore: false },
  { slug: "nuxt", label: "Nuxt", isDesignCore: false },
  { slug: "vue", label: "Vue", isDesignCore: false },
  { slug: "react-native", label: "React Native", isDesignCore: false },
  { slug: "threejs", label: "Three.js", isDesignCore: false },
  { slug: "remotion", label: "Remotion", isDesignCore: false },
  { slug: "swiftui", label: "SwiftUI", isDesignCore: false },
  { slug: "frameworks", label: "Frameworks", isDesignCore: false },
]
```

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

### Astro NPM Scripts

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/astro-integration.md

Defines common NPM scripts for managing an Astro project, including development, building, previewing, formatting, and type checking.

```json
{
  "dev": "astro dev",
  "build": "astro build",
  "preview": "astro preview",
  "astro": "astro",
  "format": "prettier --write .",
  "typecheck": "astro check"
}
```

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

### TextMorph with Custom Element and Classes

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/react-components.md

Shows how to render TextMorph as a different HTML element (e.g., span) and apply custom CSS classes.

```jsx
// Custom element
<TextMorph as="span" className="text-xl font-bold">
  Welcome
</TextMorph>
```

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

### PathSlug Format and Collision

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/README.md

Illustrates the format and collision handling for PathSlugs, which are unique identifiers for skills.

```text
Format: {user}/{slug}
Collision: {user}/{repo}/{slug}
Example: ibelick/baseline-ui
```

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

### Import Topics Data

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/README.md

Import various topic-related data structures, including all topics, topic lookup by slug, primary design topic slugs, related topic slugs, and the Topic type. This is crucial for managing and filtering skills by topic.

```typescript
import { 
  topics, 
  topicBySlug, 
  primaryDesignTopicSlugs,
  relatedTopicSlugs,
  type Topic 
} from "./data/topics";
```

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

### TextMorph with Custom Animation Variants and Transition

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/react-components.md

Illustrates how to override the default animation variants and transition properties for custom morphing effects.

```jsx
// Custom animation
<TextMorph
  variants={{
    initial: { opacity: 0, y: 10 },
    animate: { opacity: 1, y: 0 },
    exit: { opacity: 0, y: -10 }
  }}
  transition={{ type: "spring", bounce: 0.6 }}>
  Animated Text
</TextMorph>
```

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

### Topic Lookup Map (TypeScript)

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/types.md

Creates a Map for efficient O(1) retrieval of topic data by its slug. Ensure the 'topics' array is defined elsewhere.

```typescript
export const topicBySlug = new Map(topics.map((topic) => [topic.slug, topic]));
```

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

### Data Flow: Data to Component

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/astro-integration.md

Shows the data flow from data sources to Astro components, then to React components, and finally to rendered HTML.

```plaintext
src/data/registry.ts (export)
    ↓
src/pages/[component].astro (import)
    ↓
Astro component props
    ↓
React component
    ↓
Rendered HTML
```

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

### Topic JSON Structure

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/data-structures.md

Defines a topic with its slug, label, description, and a flag indicating if it's a core design topic.

```json
{
  "slug": "accessibility",
  "label": "Accessibility",
  "description": "Inclusive UI patterns, WCAG audits, and remediation workflows.",
  "isDesignCore": true
}
```

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

### Topic Lookup Map Structure

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/data-structures.md

Creates a Map for O(1) topic lookup by slug. Ensure 'topics' array is defined elsewhere.

```typescript
const topicBySlug = new Map(topics.map((topic) => [topic.slug, topic]));
```

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

### Skill JSON Structure

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/data-structures.md

Represents a single skill with its metadata, including slug, source information, name, label, description, and associated topics.

```json
{
  "slug": "baseline-ui",
  "pathSlug": "ibelick/baseline-ui",
  "sourceKey": "ibelick",
  "sourceLabel": "Ibelick",
  "name": "baseline-ui",
  "label": "Baseline UI",
  "description": "Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.",
  "topics": ["systems", "visual", "craft"]
}
```

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

### Filter Skills by Design Core Category

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/cli-reference.md

Lists skills belonging to a specified design core category. Useful for exploring skills within a particular domain.

```bash
ui-skills list --category craft
```

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

### CSS Transition Properties

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/react-components.md

Use these CSS classes for smooth transitions on interactive elements. They control the animation of color changes and opacity/background-color properties.

```css
transition-colors
transition-[opacity,background-color]
```

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

### Titleize Skill Name

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/data-structures.md

Converts a skill name or slug into a title-cased string. Handles the specific case of 'UI' to be capitalized.

```typescript
const titleize = (value: string) =>
  value
    .split("-")
    .map((word) => {
      if (word.toLowerCase() === "ui") {
        return "UI";
      }
      return `${word.charAt(0).toUpperCase()}${word.slice(1)}`;
    })
    .join(" ");
```

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

### Define Topic Interface

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/types.md

Defines the structure for a single topic or category, including its unique slug, human-readable label, description, and whether it's a design core topic. Used to represent metadata for each topic.

```typescript
type Topic = {
  slug: TopicSlug;
  label: string;
  description: string;
  isDesignCore: boolean;
}
```

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

### TextMorph Default Transition Configuration

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/react-components.md

Defines the default spring animation transition properties for TextMorph.

```typescript
{
  type: "spring",
  stiffness: 280,
  damping: 18,
  mass: 0.3
}
```

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

### RegistrySkill Type Definition

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/cli-reference.md

Defines the structure for a skill object stored in the registry. Includes metadata like slug, source, and optional topics.

```typescript
type RegistrySkill = {
  slug: string;
  pathSlug: string;
  sourceKey: string;
  sourceLabel: string;
  user: string;
  repo: string;
  rawUrl: string;
  githubUrl: string;
  name: string;
  description: string;
  topics?: TopicSlug[];
}
```

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

### CopyButton Component Usage

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/react-components.md

Demonstrates how to use the CopyButton component for clipboard operations. It can be used with or without visible text and supports custom styling.

```typescript
import { CopyButton } from "./ui/copy-button";

// With text
<CopyButton content="npm install ui-skills" />

// Icon only
<CopyButton 
  content="curl -fsSL https://ui-skills.com/install | bash" 
  showText={false} 
/>

// Custom styling
<CopyButton 
  content="ui-skills get baseline-ui"
  className="text-blue-600"
/>
```

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

### Import Skills Data

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/README.md

Import the main skills data and its type definition. This allows you to work with the list of all available skills in your application.

```typescript
import { skills, type Skill } from "./data/skills";
```

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

### CSS Focus Visible States

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/react-components.md

Apply outline-based focus states for accessibility. Ensure these are used with `focus-visible` to only show outlines when keyboard navigation is detected.

```css
focus-visible:outline-primary
focus-visible:outline-1
focus-visible:outline-offset-2
```

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

### Replace Div with Button for Clickable Elements

Source: https://github.com/ibelick/ui-skills/blob/main/skills/fixing-accessibility/SKILL.md

Avoid using non-semantic elements like 'div' for interactive actions. Use the native 'button' element to ensure proper keyboard support and semantics.

```html
<!-- div as button: use native element -->
<!-- before --> <div onclick="save()">Save</div>
<!-- after -->  <button onclick="save()">Save</button>
```

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

### Search Scoring Factors

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/README.md

Details the factors and their weights used in CommandDialog for ranking search results.

```text
Score += 140 (slug starts with query)
Score += 90  (slug contains query)
Score += 80  (label contains query)
Score += 70  (pathSlug contains query)
Score += 40  (source contains query)
Score += 30  (description contains query)
Score += 16  (markdown content contains query)
```

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

### Perform Type Checking

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/README.md

Runs type checking across the project to catch potential TypeScript errors.

```bash
npm run typecheck
```

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

### VS Code Node.js Debug Configuration

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/astro-integration.md

Debug configuration for launching Node.js applications within VS Code. Useful for debugging server-side logic or build scripts.

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/src/index.ts"
    }
  ]
}
```

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

### Import Registry Data

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/README.md

Import data structures for the skill registry, including the registry itself and its type definitions. This is essential for accessing and manipulating skill metadata.

```typescript
import { registry, type RegistrySkill } from "./data/registry";
```

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

### tsconfig.json Configuration

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/astro-integration.md

Project's TypeScript configuration file. It extends Astro's strict ruleset and configures JSX for React.

```json
{
  "extends": "astro/tsconfigs/strict",
  "include": [
    ".astro/types.d.ts",
    "**/*"
  ],
  "exclude": [
    "dist"
  ],
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "types": ["node"]
  }
}
```

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

### CSS Transitions for Layout Thrashing

Source: https://github.com/ibelick/ui-skills/blob/main/skills/fixing-motion-performance/SKILL.md

Avoid animating layout properties like 'width' which can cause layout thrashing. Instead, animate 'transform' for better performance.

```css
/* layout thrashing: animate transform instead of width */
/* before */ .panel { transition: width 0.3s; }
/* after */  .panel { transition: transform 0.3s; }
```

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

### Search Scoring Logic

Source: https://github.com/ibelick/ui-skills/blob/main/_autodocs/data-structures.md

Illustrates the TypeScript logic for calculating a relevance score for indexed items based on matches with the search query value across various fields.

```typescript
let score = 0;
if (item.slugLower.startsWith(value)) score += 140;
if (item.slugLower.includes(value)) score += 90;
if (item.labelLower.includes(value)) score += 80;
if (item.pathSlugLower.includes(value)) score += 70;
if (item.sourceLower.includes(value)) score += 40;
if (item.descriptionLower.includes(value)) score += 30;
if (item.contentLower.includes(value)) score += 16;
```