Standardizes Claude-style UI design guidance for the Viber-Editor interface.
npx skills add https://github.com/yusei531642/vibe-editor --skill claude-design
Please help me install this Agent Skill. Skill: claude-design Source: https://github.com/yusei531642/vibe-editor/tree/main/.claude/skills/claude-design Command: npx skills add https://github.com/yusei531642/vibe-editor --skill claude-design
Vibe-Editor の UI を Claude.ai + Claude Code 公式風に統一するためのデザインガイド。色・タイポグラフィ・余白・記号・アニメーション・トーンなどの基準を提供し、UI刷新や新規コンポーネント作成時の判断を支える。
Claude 公式風のカラー・タイポグラフィ・スペーシング・アニメーション・記号パターンを定義し、Token やテーマ、UI コンポーネントのデザインを一貫させるための設計指針。UI の一貫性を確保し、エージェント発話の装飾や新テーマ追加を安全に行えるようガイドする。
Read this guide and apply the color, typography, spacing, and animation tokens to your UI components to achieve Claude-style visuals.
High-intent search queries and answers about installing and using this skill.
Standardizing UI design tokens involves defining color, typography, spacing, and animation rules in a tokens.css file to unify visuals across components and themes, ensuring consistent styling during UI refreshes and new component creation.
Claude-style UI components require specific typography and spacing rules applied to tokens.css and component styles to maintain visual consistency, ensuring text hierarchy and layout spacing align with the official Claude.ai interface guidelines.
Yes, these design tokens can be applied to theming and agent message decoration, providing standardized color, symbols, and animation guidelines that unify the visual presentation of agent outputs across the editor UI.
This UI guide covers animation guidelines and symbol patterns as part of its core design tokens, ensuring that new component design and UI refreshes reflect consistent motion and iconography standards across the interface.
The best way to unify visuals is by applying standardized color tokens, typography rules, and spacing guidelines to a central tokens.css file, ensuring all component styles and themes reflect a cohesive design language.
When adding new themes using these design guidelines, you must strictly adhere to the specified color tokens and animation rules to maintain visual consistency, as deviating from the defined tokens can break the unified Claude-style aesthetic.
schalkneethlingGenerate a tokens.css file with CSS custom properties for theming and dark mode.
iButtersGenerate CSS design tokens for colors, spacing, typography, and theming.
stephanjCreate design systems with design tokens, atomic components, and WCAG 2.1 AA compliance.
modu-aiExtract brand design tokens from visual-identity.md and enforce WCAG 2.1 AA accessibility.
