Menu
UI/UX best practices and guidelines for professional web applications
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
| name | uiux-guidelines |
| description | UI/UX best practices and guidelines for professional web applications |
| triggers | ["uiux","design","icons","ui patterns"] |
Always prefer SVG icons over emojis for professional applications.
| Aspect | Icons | Emojis |
|---|---|---|
| Consistency | Same appearance across all platforms | Vary wildly between OS/browsers |
| Professionalism | Clean, professional look | Casual, informal appearance |
| Customization | Size, color, stroke width adjustable | Fixed appearance |
| Accessibility | Better screen reader support | Inconsistent alt text |
| Performance | Lightweight SVG | Font-dependent rendering |
| Branding | Match design system colors | Cannot be customized |
// Define icons as React elements
const Icons = {
user: (
<svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
),
calendar: (
<svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
),
// ... more icons
};
// Usage in components
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center">
{Icons.user}
</div>
| Context | Size Class | Pixels |
|---|---|---|
| Inline text | w-4 h-4 | 16px |
| Button/badge | w-5 h-5 | 20px |
| Card icon | w-6 h-6 | 24px |
| Feature icon | w-8 h-8 | 32px |
| Hero icon | w-12 h-12 | 48px |
// Gradient background with white icon
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center shadow-md">
<svg className="w-6 h-6 text-white" ...>
</div>
// Light background with colored icon
<div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
<svg className="w-5 h-5 text-blue-600" ...>
</div>
Automatically detect and save person-related information (names, roles, contact info, relationships, organizations) to Core Memory (Caduceus). Triggers when user mentions people with descriptive details like job titles, phone numbers, emails, responsibilities, or relationships to other people or organizations.
Send professional client updates with deliverables via email and WhatsApp notification. Use when user wants to share work, send assets, or give a client an update on progress.
Distill Claude Code session operations into reusable tinctures (Skills, Commands, Agents). Uses category theory for structural preservation, information theory for potency analysis, and the Golden Ratio for classification. Use when you want to capture effective workflows, or when the user says "distill", "extract this", "make a tincture", "capture this workflow", or "turn this into a skill/command".
Fuse two things into one unified creation. Use when user says fuse, fusion, combine, merge, or wants to unite documents, projects, concepts, ideas, frameworks, or any two entities into something greater than either alone.
Pattern for building interactive CLI tutors in Go with standardized colors, progress tracking, and pedagogical elements
Brutal enforcer of production-grade coding practices. The bane of vibe-coded slop and spaghetti code. Mars audits codebases for the hidden sins that separate "it works on my machine" from battle-tested production systems.