القائمة
TypeScript conventions across the monorepo. Use when editing .ts or .tsx in any package, prop JSDoc in *.types.ts, as const variant arrays, Object.freeze config exports, or shared utils.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Scaffold a new ds-* component (files, barrel export, validation). Use when the user asks to create, scaffold, or add a new component.
React patterns for design-system TSX including ds-* components, subcomponents, *.stories.tsx, and __tests__/*.browser.test.tsx. Use when editing hooks, useState, useEffect, ref prop, memoization, controlled state, or event handlers in @drivenets/design-system.
Write and update Storybook stories for design-system components. Use when editing `*.stories.tsx`, adding story variants, decorators, or removing Storybook play functions.
Check Ark UI primitives via MCP and integrate them in ds-* components without duplicating internal state. Use before building a custom component, wrapping Ark primitives, or when the user mentions Ark UI MCP.
Write and extend Vitest browser tests for design-system components. Use when adding or editing `*.browser.test.tsx`, writing behavioral coverage, or moving assertions out of Storybook.
Apply when preparing a PR, reviewing code changes, running git diff, or generating a changeset. Use when user says "review", "PR prep", "code review", or "changeset".
| name | ts-standards |
| description | TypeScript conventions across the monorepo. Use when editing .ts or .tsx in any package, prop JSDoc in *.types.ts, as const variant arrays, Object.freeze config exports, or shared utils. |
Applies to packages/**/*.ts and packages/**/*.tsx (design-system, eslint-plugin, vite-plugin, commitlint, etc.).
| Requirement | Details |
|---|---|
| No redundant JSDoc | Don't restate name or type; skip @interface / @type |
| Prop JSDoc on ds-* APIs | component-api — @default in *.types.ts when helpful |
| Full type references | Import named types |
Export from .types.ts | Dedicated type files for components |
| Export variant arrays | as const for Storybook argTypes.options — see component-api |
Object.freeze config exports | Prevent mutation on mapping objects |
export const loaderVariants = ['spinner', 'pulsing'] as const;
export type LoaderVariant = (typeof loaderVariants)[number];
export const circleSizeMap: Record<AvatarSize, number> = Object.freeze({
small: 24,
medium: 32,
large: 48,
});
| Requirement | Details |
|---|---|
| Let code breathe | Whitespace between logical chunks |
| Name magic numbers | Descriptive constants |
| Early returns | Simplify conditionals |
| No cross-component imports | Extract shared logic to utils |