Словами самого skill
Создаёт переиспользуемые UI-компоненты на React, Vue и Svelte, используя современные паттерны композиции, решения CSS-in-JS и принципы дизайна API компонентов. Охватывает составные компоненты, render props, слоты и паттерны, специфичные для фреймворков, такие как React context, Vue composables и Svelte runes. Применяется к библиотекам компонентов, дизайн-системам и рефакторингу legacy-компонентов.
Делает акцент на доступных по умолчанию компонентах с семантическими props, единственной ответственностью, forwarding ref и паттернами controlled/uncontrolled. Включает конкретные реализации кнопок, аккордеонов, select'ов и вкладок с использованием class-variance-authority, Tailwind CSS и подходов к scoped-стилизации.
Что он выдаёт
- Компоненты дизайн-системы, реализующие кнопки, аккордеоны, select'ы, вкладки и карточки с использованием class-variance-authority и Tailwind CSS.
Как это работает
- 01Выберите подход CSS-in-JS
Выбирайте между Tailwind CSS для быстрого прототипирования, CSS Modules для scoped-стилей, styled-components для динамической стилизации в React, Emotion для гибкости, дружественной к SSR, или Vanilla Extract для производительности без runtime.
- 02Спроектируйте API компонента
Используйте семантические имена props, например isLoading вместо loading, задавайте разумные значения по умолчанию, поддерживайте композицию через children и позволяйте переопределять стили через className или style props.
- 03Реализуйте паттерны, специфичные для фреймворка
Используйте React context для составных компонентов, Vue 3 composables с provide и inject или Svelte 5 runes с $props и $derived для реактивного состояния.