npx claudepluginhub anastasiyaw/claude-code-configThis skill uses the workspace's default tool permissions.
Этот скилл — о создании **визуально выдающихся** интерфейсов. Не просто рабочих — а таких, где дизайн
Generates distinctive production-grade frontend UIs like web components, pages, dashboards, React apps, HTML/CSS layouts with bold memorable aesthetics avoiding generic AI styles.
Creates distinctive production-grade frontend UIs for web components, pages, dashboards, React apps, HTML/CSS layouts, emphasizing bold aesthetics over generic designs.
Generates distinctive, production-grade frontend interfaces like web components, pages, dashboards, React components, HTML/CSS layouts. Use for building or styling web UIs.
Share bugs, ideas, or general feedback.
Этот скилл — о создании визуально выдающихся интерфейсов. Не просто рабочих — а таких, где дизайн говорит сам за себя. Основной принцип: каждый интерфейс должен выглядеть как работа senior-дизайнера, а не как «шаблон из интернета».
| Тема | Файл |
|---|---|
| Верстка, CSS, адаптив, Flexbox/Grid | references/layout-css.md |
| Визуальные стили, цвет, типографика, эффекты | references/visual-styles.md |
| Компоненты, фреймворки, React/Vue/Tailwind | references/components-frameworks.md |
| Производительность, доступность, SEO | references/performance-a11y.md |
Читай нужный reference-файл перед тем как писать код.
Пользователь должен за 3 секунды понять: что это, что важно, что делать.
/* Плохо — резкие переходы */
button { background: blue; }
button:hover { background: darkblue; }
/* Хорошо — всё плавно */
button {
background: #3b82f6;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
button:hover {
background: #2563eb;
box-shadow: 0 4px 12px rgba(59,130,246,0.4);
transform: translateY(-1px);
}
Начинай с мобильного экрана, расширяй для десктопа.
:root {
--bg: #0f0f11;
--surface: #1a1a1f;
--border: rgba(255,255,255,0.08);
--text: #e4e4e7;
--muted: #71717a;
--accent: #6366f1;
}
.glass {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
}
.neu {
background: #e0e5ec;
border-radius: 16px;
box-shadow: 6px 6px 14px #b8bec7, -6px -6px 14px #ffffff;
}
.gradient-text {
background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}