ui-conventions
UI/UX patterns and conventions for this project. Use for any frontend work - components, layouts, styling, notifications, forms. Contains learned preferences for Quasar/Vue or Next.js/React patterns.
DeepseekModel
キュレーション済みスキル
品質 良好 · 48
v1.0.0
取得
https://deepseekmodel.com/api/download.php?id=jerryagenyi-my-ai-toolkit-claude-skills-ui-conventions-skill-md&format=skill
ダウンロード .skill
標準形式。system_prompt と model_config を収録し、任意の Agent で利用可能
.skill ファイルの system_prompt フィールドの実際の内容。
name UI Conventions description UI/UX patterns and conventions for this project. Use for any frontend work - components, layouts, styling, notifications, forms. Contains learned preferences for Quasar/Vue or Next.js/React patterns. UI Conventions Learned UI/UX patterns and component preferences. Updated by the Reflect skill. Last Updated 2025-01-28 Components Buttons Use Quasar's q-btn for all buttons Never create custom button components unless absolutely necessary Preferred icon: mdi-arrow-left for back navigation Dialogs and Modals CRITICAL: Never use browser alert() , confirm() , or prompt() Always use Quasar's dialog system For notifications, use $q.notify() plugin Forms Use Quasar Form components with validation Always show loading states during async submission Disable submit button while submitting Notifications Never: alert ( 'Error occurred' ) // ❌ FORBIDDEN Always: $this. $q . notify ({ type : 'positive' , // or 'negative', 'warning', 'info' message : 'Success!' , position : 'top' }) Layout Navigation Use q-layout with q-header , q-drawer , q-page-container Back button should be top-left in header Mobile: drawer for navigation, Desktop: drawer or tabs Responsive Design Mobile-first approach Test at 375px, 768px, 1024px breakpoints Hide desktop-only elements on mobile with $q.screen.gt.md Styling Colors Use Quasar's color palette (primary, secondary, accent, etc.) Define project colors in quasar.variables.scss Never hardcode hex colors in components Spacing Use Quasar's spacing classes ( q-pa-md , q-gutter-sm , etc.) Consistent padding: q-pa-md for cards, q-pa-sm for form elements Accessibility ARIA Labels Always add labels to icon-only buttons Use descriptive labels for screen readers < q-btn icon = "mdi-close" aria-label = "Close dialog" /> Keyboard Navigation All interactive elements must be keyboard accessible Use tabindex carefully (avoid if possible) Test with Tab, Enter, and Escape keys Performance Images Use q-img for lazy loading Optimize images before adding to project Use WebP format when browser support allows Lists Use virtual scrolling for lists > 100 items ( q-virtual-scroll ) Avoid rendering all items at once Learned Patterns This section grows as the Reflect skill learns from sessions Session 2025-01-28 Learned: User prefers $q.notify over Notify.create API Learned: Always add :disable="loading" to submit buttons
このスキルを起動するキーワード。クリックでコピーできます。
このスキルにはトリガーワードがありません。
ダウンロードした .skill に含まれるフィールド。
| フィールド | 説明 |
|---|---|
| format | フォーマット識別子（skill/v1） |
| skill_id | スキル固有 ID |
| name | スキル名 |
| version | バージョン |
| description | 説明 |
| category | カテゴリ（配列） |
| trigger_words | トリガーワード |
| tags | タグ |
| source | ソース |
| source_url | ソース URL（本ページ） |
| exported_at | エクスポート日時（ダウンロード毎） |
| system_prompt | システムプロンプト本文 |
| model_config | モデル設定：provider / model / temperature / max_tokens / top_p |
| examples | サンプル |
| install_guide | 各プラットフォームの導入説明（Coze / Dify / Claude / カスタム） |
