القائمة
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.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Decide which Shade layer (Token, Primitive, Component, Recipe, Pattern) a new piece of UI belongs in — and whether it should be added to Shade at all. Trigger when creating new files in apps/shade/src/components, or proposing to add a new Shade component.
DropdownMenu, Select, and Popover share one visual recipe (bg-surface-elevated-2 + border-border/60 dark:border-border/30 + shadow-md). Change them together. Trigger when editing any of those three Shade files.
Use the inputSurface() recipe for form-control chrome (border, background, radius, focus ring, invalid state) — don't roll your own. Trigger when editing form-control-shaped files in Shade.
Acceptance checklist for adding or editing a Shade component or pattern file — naming, sibling story, className forwarding, cva variants, required states, recipe usage. Trigger when editing files in apps/shade/src/components.
Don't write dark: Tailwind variants for colour in Shade or admin apps — semantic tokens flip in dark mode automatically. Trigger when editing TSX in Shade-consuming apps.
Pick the right Shade page template (ListPage, PageHeader) for a new admin page instead of inventing chrome. Trigger when creating new admin pages or routes in apps/admin, apps/admin-x-settings, apps/posts, apps/stats, apps/activitypub.
| 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-settings,admin-x-framework,posts,stats,activitypub}/**/*.{ts,tsx}"}] |
Always import Shade from its layer-specific subpath. Never from the root barrel @tryghost/shade.
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 {PostShareModal} from '@tryghost/shade/posts-stats';
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.
// BAD — root barrel
import {Button, Stack} from '@tryghost/shade';
// BAD — deep path into source
import {Button} from '@tryghost/shade/src/components/ui/button';
When editing files under apps/shade/src/**, use the @/ alias for cross-file imports:
import {cn} from '@/lib/utils';
import {inputSurface} from '@/components/ui/input-surface';
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.