Creating Zest Components for Web

Guide for creating new components in the Zest design system for web applications (packages/zest/src/ in the web repository).

When to Use This Skill

Use this skill when:

• Creating a new Zest component from Figma designs
• Adding a new variant to an existing Zest component
• Building reusable UI components for the web design system
• Implementing components that will be used across multiple features/brands

Core Principles

Components live in packages/zest/src/: All Zest components for web are in the packages/zest/src/ directory within the web monorepo. This is the single source of truth for the Zest design system on web.

Use BoxWithNewTokens: Build new components using BoxWithNewTokens (imported as Box). This provides support for the new component token system.

TypeScript is required: All components must be written in TypeScript with proper type definitions using Variant<UseNewTokens>[] for variants.