Tailwind Design System
Skill Verifiziert AktivBuild scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
To enable developers to build robust and scalable design systems efficiently using the latest features of Tailwind CSS v4.
Funktionen
- Build design systems with Tailwind CSS v4
- Implement design tokens and CSS-first configuration
- Create component libraries with variants and responsive patterns
- Incorporate accessibility and dark mode features
- Leverage advanced CSS patterns for animations and theming
Anwendungsfälle
- Creating a component library with Tailwind v4
- Implementing design tokens and theming
- Building responsive and accessible components
- Standardizing UI patterns across a codebase
Nicht-Ziele
- Targeting Tailwind CSS v3 projects
- Providing generic CSS utilities outside of design system context
- Handling backend development or deployment
Versioning
- info:Release ManagementThe SKILL.md does not explicitly declare a version, and there are no GitHub release tags or CHANGELOG.md. While the install instructions reference `main`, this is a minor point for an informational skill.
Practical Utility
- info:Edge casesThe documentation covers advanced patterns and migration details but does not explicitly list failure modes or recovery steps for specific edge cases within the skill's direct scope.
Installation
Zuerst Marketplace hinzufügen
/plugin marketplace add wshobson/agents/plugin install frontend-mobile-development@claude-code-workflowsQualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
Design Taste Frontend
75Senior UI/UX Engineer. Gestaltet digitale Schnittstellen, die Standard-LLM-Voreingenommenheiten überschreiben. Erzwingt metrikbasierte Regeln, strenge Komponentenarchitektur, CSS-Hardwarebeschleunigung und ausgewogenes Design-Engineering.
Setup Tailwind Typescript
100Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.
Presentation Styling
100Wissen über CSS-Klassen, Komponentenmuster und Syntaxhervorhebung in der Präsentation
Baseline Ui
100Validiert Animationsdauern, erzwingt die Typografieskala, prüft die Barrierefreiheit von Komponenten und verhindert Anti-Patterns im Layout von Tailwind CSS-Projekten. Verwenden Sie dies beim Erstellen von UI-Komponenten, beim Überprüfen von CSS-Dienstprogrammen, beim Stylen von React-Ansichten oder beim Erzwingen von Designkonsistenz.
Color Audit
100Color-only audit to extract, evaluate, and recommend improvements for the project's color system
Type Audit
100Typography-only audit covering font selection, type scale, readability, hierarchy, performance