Zyntro UI Guidelines FAQs

Question 1

How does this skill improve my frontend workflow?

Accepted Answer

It eliminates the need to manually look up design tokens or brand colors by automatically referencing the project's brand-guidelines.md and component-library.md. This speeds up development while ensuring 100% adherence to mobile-first standards and accessibility requirements.

Question 2

What specific design capabilities does it provide?

Accepted Answer

The skill provides design token implementation via standardized CSS variables, reusable HTML component patterns, mobile-first responsive guidance, and proactive accessibility checking for ARIA states and focus management.

Question 3

What does the Zyntro UI Guidelines skill do?

Accepted Answer

This skill automates the application of the ZyntroTest brand guidelines and design system. It ensures that any UI components, pages, or features created with Claude Code follow standardized CSS variables, HTML structures, and professional laboratory messaging.

Question 4

How does it handle brand voice for laboratory applications?

Accepted Answer

Beyond visual styling, the skill aligns UI copy with a professional, scientific brand voice. It ensures messaging is trustworthy and action-oriented, following specific principles established for the Zyntro laboratory user experience.

Question 5

When should I use this Claude Code skill?

Accepted Answer

Use this skill proactively whenever you are building new components, creating pages, or refactoring existing UI for ZyntroTest.com. It is designed to be applied during the coding process to maintain visual consistency across buttons, cards, forms, and layouts.

Zyntro UI Guidelines

Zyntro UI Guidelines

主な機能

ユースケース

主な機能

ユースケース