메뉴
Применяй при подключении, обновлении или кастомизации Ant Design во frontend: AntD v6, Tailwind CSS v4, cascade layers, scoped `.ant-*` overrides через `@layer components` и локальные Tailwind utilities в JSX
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Применяй при написании или правке API BDD через godog: общий каталог `features/`, теги `@api` в monorepo, layout API runner-а, TestMain, State, step definitions и testcontainers
Применяй при написании или правке browser BDD: `features/` Gherkin-сценарии, `@browser` в monorepo, playwright-bdd поверх Playwright Test, TypeScript steps, fixtures и page objects
Применяй при реализации функционала по готовому .feature: скелет шагов (red) → реализация до green → рефакторинг (blue)
Применяй при ревью или реализации BDD steps на godog или playwright-bdd, когда нужно выявить FAKE GREEN: stateful-заглушки, no-op шаги, self-fulfilling Then, локальную подстановку ошибок, When без observable effect и сценарии, которые проходят без проверки реальной реализации. Используй каждый раз при аудите BDD на честность, при переводе undefined/pending в green и в bdd-reviewer.
Применяй для конвертации фрагментарных legacy-знаний (код, doc.go, docs/, git history, интервью) в структурированные .feature файлы
Применяй на этапе планирования фичи: PRD → бизнес-интервью → драфт .feature → RFP разработке → разбор вопросов → готовые сценарии
| name | x-antd |
| description | Применяй при подключении, обновлении или кастомизации Ant Design во frontend: AntD v6, Tailwind CSS v4, cascade layers, scoped `.ant-*` overrides через `@layer components` и локальные Tailwind utilities в JSX |
Этот skill — канонический владелец проектных соглашений по кастомизации AntD через Tailwind CSS.
frontendfrontend/src/styles.css, ThemeProvider, vite.config.ts в части AntD/Tailwindstyle={{ ... }}, ConfigProvider.theme, .ant-* и длинных utility-строкfrontend/src/styles.css, не в main.tsx.theme, base, antd, components, utilities.ConfigProvider.theme не используй для брендовой кастомизации. Допустимы только режимные настройки вроде algorithm и zeroRuntime.document.documentElement, чтобы dark:* работал и для AntD portals.Минимальный CSS-каркас:
@layer theme, base, antd, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "antd/dist/reset.css" layer(base);
@import "antd/dist/antd.css" layer(antd);
@import "tailwindcss/utilities.css" layer(utilities);
@custom-variant dark (&:where(.dark, .dark *));
@layer components используй только для scoped overrides внутреннего DOM AntD: .project-root .ant-*, .project-root > .ant-* и близкие случаи, когда className/slot API не хватает.
Локальное применение живёт utility-классами в JSX:
flex/grid-композиция вокруг компонентаНе заводи .auth-card, .profile-card, .app-header и похожие CSS-классы ради одного использования. Такие стили пиши прямо в className.
Для кастомизации внутренних .ant-* узлов всегда задавай проектный root-класс и scoped selector.
<Modal rootClassName="card-detail-window" />
@layer components {
.card-detail-window > .ant-modal-content {
@apply overflow-auto rounded-[3px] bg-[var(--ds-surface-overlay,#f4f5f7)] p-0 !important;
}
}
Правила:
.ant-* без проектного scope запрещёнrootClassNameclassNames, styles) используй, когда он точнее scoped selector!important ставь только когда AntD реально перебивает свойство.ant-btn, .ant-card, .ant-layout и другие .ant-*.@layer components одноразовые классы без .ant-* override.ConfigProvider.theme.token и ConfigProvider.theme.components.style={{ ... }} для статического внешнего вида.