zest-components-web-patterns

Generate Zest design system components with TypeScript, styles, variants, tests, and Storybook documentation.

3|Updated Dec 30, 2025

Search Tags:#typescript #web development #react #design system #storybook #ui components

Ready to run

npx skills add https://github.com/guicheffer/devorch-cli --skill zest-components-web-patterns

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: zest-components-web-patterns
Source: https://github.com/guicheffer/devorch-cli/tree/main/templates/skills/ui-design-system-web/zest-components
Command: npx skills add https://github.com/guicheffer/devorch-cli --skill zest-components-web-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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'.

Frequently Asked Questions about zest-components-web-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I scaffold a React design system component with TypeScript and Storybook?▼

To scaffold a React design system component with TypeScript and Storybook, use standardized templates that define component structure, variant configurations, default styles, and testing methodologies to ensure maintainability and accessibility.

What are the best practices for structuring variant-heavy UI components in a web design system?▼

Best practices for structuring variant-heavy UI components involve using standardized file structures, TypeScript definitions for variant configurations, and design tokens to maintain consistency and accessibility across the web application.

Can I use this pattern to document design system components in Storybook?▼

Yes, you can use this pattern to document design system components in Storybook by following the provided templates that integrate testing methodologies and variant configurations directly into your component development workflow.

How do design tokens work when developing web UI components?▼

Design tokens provide standardized variables for styles and themes when developing web UI components, ensuring consistent implementation of visual properties across the design system while maintaining TypeScript type safety.

What is the recommended file structure for a complex Zest design system component?▼

The recommended file structure for a complex Zest design system component includes separate files for TypeScript component logic, type definitions, default styles, variant configurations, and Storybook documentation to ensure maintainability.