·atomic-design
*

atomic-design

Атомный дизайн Брэда Фроста для иерархии компонентов пользовательского интерфейса: атомы, молекулы, организмы, шаблоны. Активируйте при создании пользовательских интерфейсов, создании систем дизайна, организации компонентов или структурировании кода внешнего интерфейса. Применяется к любой платформе пользовательского интерфейса (React, Vue, SwiftUI и т. д.).

72Установки·3Тренд·@jwilger

Установка

$npx skills add https://github.com/jwilger/agent-skills --skill atomic-design

Как установить atomic-design

Быстро установите AI-навык atomic-design в вашу среду разработки через командную строку

  1. Откройте терминал: Откройте терминал или инструмент командной строки (Terminal, iTerm, Windows Terminal и т.д.)
  2. Выполните команду установки: Скопируйте и выполните эту команду: npx skills add https://github.com/jwilger/agent-skills --skill atomic-design
  3. Проверьте установку: После установки навык будет автоматически настроен в вашей AI-среде разработки и готов к использованию в Claude Code, Cursor или OpenClaw

Источник: jwilger/agent-skills.

Value: Simplicity and communication. Building UI from small, named, composable pieces makes the interface understandable to everyone on the team and prevents the complexity that comes from monolithic components.

Teaches how to organize UI components into a hierarchy of increasing complexity: atoms, molecules, organisms, and templates. Each level has clear responsibilities and composition rules. The outcome is a component system where every piece is reusable, testable in isolation, and named in a shared vocabulary.

Start with the smallest reusable elements and compose upward. Never skip a level.

Атомный дизайн Брэда Фроста для иерархии компонентов пользовательского интерфейса: атомы, молекулы, организмы, шаблоны. Активируйте при создании пользовательских интерфейсов, создании систем дизайна, организации компонентов или структурировании кода внешнего интерфейса. Применяется к любой платформе пользовательского интерфейса (React, Vue, SwiftUI и т. д.). Источник: jwilger/agent-skills.

Факты (для цитирования)

Стабильные поля и команды для ссылок в AI/поиске.

Команда установки
npx skills add https://github.com/jwilger/agent-skills --skill atomic-design
Источник
jwilger/agent-skills
Категория
*Креатив
Проверено
Впервые замечено
2026-02-20
Обновлено
2026-03-10

Browse more skills from jwilger/agent-skills

Короткие ответы

Что такое atomic-design?

Атомный дизайн Брэда Фроста для иерархии компонентов пользовательского интерфейса: атомы, молекулы, организмы, шаблоны. Активируйте при создании пользовательских интерфейсов, создании систем дизайна, организации компонентов или структурировании кода внешнего интерфейса. Применяется к любой платформе пользовательского интерфейса (React, Vue, SwiftUI и т. д.). Источник: jwilger/agent-skills.

Как установить atomic-design?

Откройте терминал или инструмент командной строки (Terminal, iTerm, Windows Terminal и т.д.) Скопируйте и выполните эту команду: npx skills add https://github.com/jwilger/agent-skills --skill atomic-design После установки навык будет автоматически настроен в вашей AI-среде разработки и готов к использованию в Claude Code, Cursor или OpenClaw

Где находится исходный репозиторий?

https://github.com/jwilger/agent-skills

Детали

Категория
*Креатив
Источник
skills.sh
Впервые замечено
2026-02-20