---
name: tryghost-shade-imports
description: "Import Shade from layer-specific subpaths (primitives, components, patterns, page-templates, utils), never the root barrel. Trigger when editing TSX/TS in Shade-consuming apps."
license: "MIT"
metadata:
  decimalai-skill-id: "11de0d74-4bee-412a-871f-82b4ed25e777"
  decimalai-version-id: "182ec758-0712-48d2-a85f-b6f22e1c8d11"
  decimalai-version: "1"
  decimalai-body-sha256: "99cc6bfc67f6a887c7e8db2bb7533edc3a365a38f75d16e214d77cd524d74e8b"
  decimalai-name: "tryghost/Shade imports"
  decimalai-format: "1"
  decimalai-invocation: "model"
  decimalai-category: "frontend"
  decimalai-source: "https://app.decimal.ai/s/tryghost-shade-imports@1/SKILL.md"
---
# Shade imports

Always import Shade from its **layer-specific subpath**. Never from the root barrel `@tryghost/shade`.

## Correct

```ts
import {Stack, Inline, Box, Grid, Container, Text} from '@tryghost/shade/primitives';
import {Button, Input, Dialog} from '@tryghost/shade/components';
import {PageHeader, KpiCard, Filters} from '@tryghost/shade/patterns';
import {ListPage} from '@tryghost/shade/page-templates';
import {cn, formatNumber} from '@tryghost/shade/utils';
import {ShadeApp} from '@tryghost/shade/app';
```

**Note:** `ListPage` is in `@tryghost/shade/page-templates`, not `/patterns`. Page templates are top-level page wrappers; patterns are the building blocks they compose.

## Incorrect

```ts
// BAD — root barrel
import {Button, Stack} from '@tryghost/shade';

// BAD — deep path into source
import {Button} from '@tryghost/shade/src/components/ui/button';
```

## Inside Shade itself

When editing files under `apps/shade/src/**`, use the `@/` alias for cross-file imports:

```ts
import {cn} from '@/lib/utils';
import {inputSurface} from '@/components/ui/input-surface';
```

## Why

Subpath imports make the layer (primitive/component/pattern) visible at the call site, which is the first piece of information a reader needs. The root barrel hides that and encourages cross-layer drift.