메뉴
SCSS and CSS modules for design-system components. Use when editing *.scss, *.module.scss, design tokens, data-focus-visible, data-disabled, or component styles under packages/design-system.
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 | scss |
| description | SCSS and CSS modules for design-system components. Use when editing *.scss, *.module.scss, design tokens, data-focus-visible, data-disabled, or component styles under packages/design-system. |
| Requirement | Details |
|---|---|
| Use design tokens | all from src/styles/_root_new.scss |
| No hardcoded colors | CSS custom properties only |
| Requirement | Details |
|---|---|
| Focus | [data-focus-visible] for keyboard outlines |
| Hover | &:hover with token colors |
| Disabled | [data-disabled] or &:disabled |
Ark data-* attrs: ark-ui.
| Requirement | Details |
|---|---|
Avoid :global | Stay scoped |
Use classnames | Not template literals for conditional classes |
| Requirement | Details |
|---|---|
| Use mixins | Repeated size/state patterns |
| Pill border-radius | 9999px |
| Pseudo-element order | content: '' first |
| Logical property order | Position → box model → visual |
| No comments | Unless genuinely complex |
No !important | Refactor selectors instead |
| Transitions | 0.2s standard |
| Component-scoped variables | In component file |
| No webkit-only without fallback | Cross-browser or @supports |
.button {
color: var(--color-text-primary);
padding: var(--spacing-2) var(--spacing-4);
transition: background-color 0.2s;
&[data-focus-visible] {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
&[data-disabled] {
opacity: 0.5;
cursor: not-allowed;
}
}