·atomic-design
*

atomic-design

Brad Frosts Atomic Design für die Komponentenhierarchie der Benutzeroberfläche: Atome, Moleküle, Organismen, Vorlagen. Aktivieren Sie diese Option, wenn Sie Benutzeroberflächen erstellen, Designsysteme erstellen, Komponenten organisieren oder Frontend-Code strukturieren. Gilt für jedes UI-Framework (React, Vue, SwiftUI usw.).

72Installationen·3Trend·@jwilger

Installation

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

So installieren Sie atomic-design

Installieren Sie den KI-Skill atomic-design schnell in Ihrer Entwicklungsumgebung über die Kommandozeile

  1. Terminal öffnen: Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Installationsbefehl ausführen: Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/jwilger/agent-skills --skill atomic-design
  3. Installation überprüfen: Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code, Cursor oder OpenClaw

Quelle: 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.

Brad Frosts Atomic Design für die Komponentenhierarchie der Benutzeroberfläche: Atome, Moleküle, Organismen, Vorlagen. Aktivieren Sie diese Option, wenn Sie Benutzeroberflächen erstellen, Designsysteme erstellen, Komponenten organisieren oder Frontend-Code strukturieren. Gilt für jedes UI-Framework (React, Vue, SwiftUI usw.). Quelle: jwilger/agent-skills.

Fakten (zitierbereit)

Stabile Felder und Befehle für KI/Such-Zitate.

Installationsbefehl
npx skills add https://github.com/jwilger/agent-skills --skill atomic-design
Kategorie
*Kreativität
Verifiziert
Erstes Auftreten
2026-02-20
Aktualisiert
2026-03-10

Browse more skills from jwilger/agent-skills

Schnelle Antworten

Was ist atomic-design?

Brad Frosts Atomic Design für die Komponentenhierarchie der Benutzeroberfläche: Atome, Moleküle, Organismen, Vorlagen. Aktivieren Sie diese Option, wenn Sie Benutzeroberflächen erstellen, Designsysteme erstellen, Komponenten organisieren oder Frontend-Code strukturieren. Gilt für jedes UI-Framework (React, Vue, SwiftUI usw.). Quelle: jwilger/agent-skills.

Wie installiere ich atomic-design?

Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/jwilger/agent-skills --skill atomic-design Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code, Cursor oder OpenClaw

Wo ist das Quell-Repository?

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