메뉴
UI/UX best practices and guidelines for professional web applications
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
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.