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
Curated skill
Quality Good · 48
v1.0.0
Get
https://deepseekmodel.com/api/download.php?id=jerryagenyi-my-ai-toolkit-claude-skills-ui-conventions-skill-md&format=skill
Download .skill
Standard format with system_prompt and model_config, ready for any agent framework
The actual content of the system_prompt field in the .skill file.
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
Keywords that activate this skill. Click one to copy it.
This skill does not provide trigger words.
The downloaded .skill package contains the following fields.
| Field | Description |
|---|---|
| format | Format tag (skill/v1) |
| skill_id | Unique skill ID |
| name | Skill name |
| version | Version |
| description | Description |
| category | Categories (array) |
| trigger_words | Trigger words |
| tags | Tags |
| source | Source |
| source_url | Source URL (this page) |
| exported_at | Exported at (set per download) |
| system_prompt | System prompt body |
| model_config | Model config: provider / model / temperature / max_tokens / top_p |
| examples | Examples |
| install_guide | Import guide for Coze / Dify / Claude / custom frameworks |
The same skill can be exported in different platform formats.
