Skills
.Work. You
Rest

zest-component-creation-web

Community

Build Zest UI components for web.

Software Engineering#typescript#web development#react#design system#ui components#zest
Authorguicheffer
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill streamlines the creation of new Zest design system components for web applications, ensuring consistency, reusability, and adherence to best practices.

Core Features & Use Cases

  • Component Scaffolding: Provides a structured approach to creating new components within the packages/zest/src/ directory.
  • Token-Based Styling: Emphasizes the use of BoxWithNewTokens and design tokens for styling, promoting theme consistency.
  • Accessibility Focus: Mandates the implementation of semantic HTML, ARIA attributes, and keyboard navigation.
  • Use Case: When a new UI element like a "Notification Banner" is designed in Figma, this Skill guides the developer through creating the necessary TypeScript files (.tsx, types.ts, variants.ts, styles.ts), implementing it with BoxWithNewTokens, and ensuring it's accessible and testable.

Quick Start

Use the zest-component-creation-web skill to create a new Zest component named 'UserProfileCard' following the provided guidelines.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: zest-component-creation-web
Download link: https://github.com/guicheffer/devorch-cli/archive/main.zip#zest-component-creation-web

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.