frontend-design

SKILL.md

This skill transforms vague UI style requirements into executable, production-grade frontend code through a systematic design token approach while maintaining creative excellence. It ensures visual consistency, accessibility compliance, and maintainability across all deliverables.

Never skip token definition. All visual properties must derive from the token system.

Create comprehensive token system (see examples/css/tokens.css and examples/typescript/design-tokens.ts):

体系的なデザイン トークン、アクセシビリティ コンプライアンス、クリエイティブな実行により、UI スタイルの要件を本番環境に対応したフロントエンド コードに変換します。 Web サイト、Web アプリケーション、React/Vue コンポーネント、ダッシュボード、ランディング ページ、またはデザインの一貫性と美的品質の両方を必要とする Web UI を構築するときに使用します。 ソース: uholysmokes/voidverse-alt。

原文を見る