shade-imports
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.
来源信息
- 仓库
- TryGhost/Ghost
- 最近来源活动
- 2026年8月5日 14:15
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 55,544
- 分支
- 11,995
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- 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.
- autoTrigger
- [{"fileEdit":"apps/{shade,admin,admin-x-framework,activitypub}/**/*.{ts,tsx}"}]
# 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.
在 GitHub 查看