zest-components-web-patterns

What problem does it solve?

This Skill provides a standardized, pattern-driven approach to creating and updating Zest design system components for web applications, ensuring consistency, maintainability, and adherence to best practices.

Core Features & Use Cases

• Component Structure Templates: Provides clear, reusable file structures for simple, complex, and variant-heavy components.
• Code Snippets: Offers ready-to-use TypeScript code for component implementation, types, styles, and variants.
• Best Practices: Guides users on design token usage, accessibility, testing, and common pitfalls.
• Use Case: A developer needs to add a new Tooltip component to the Zest design system. They can use this Skill to quickly scaffold the component's files, implement its core logic, define its variants (e.g., info, warning), write comprehensive tests, and document it in Storybook, all following established patterns.

Quick Start

Use the zest-components-web-patterns skill to create a new Zest component named 'Avatar'.