uiux-design-principles — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited uiux-design-principles (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Framework-agnostic design principles and patterns for building professional enterprise applications. This skill is CRITICAL for all frontend work and should be invoked proactively before any UI implementation.
This skill provides:
prefers-reduced-motion accessibility (mandatory)LEVEL 1: FRAME/LAYOUT (Highest Priority)
↓ Space division, visual hierarchy, information architecture
LEVEL 2: FEATURE COMMUNICATION
↓ Discoverability, action hierarchy, navigation
LEVEL 3: COMPONENT EFFECTIVENESS
↓ Widget appropriateness, interaction patterns, feedback
LEVEL 4: VISUAL DETAILS (Lowest Priority)
→ Colors, shadows, animations, typography refinements| Type | Size | Style | Position | Use |
|---|---|---|---|---|
| Primary | 48px | Filled | Top-right | 1 per page (Save, Add) |
| Secondary | 40px | Outlined | Near primary | 2-3 per page (Cancel, Export) |
| Tertiary | 32px | Text | Contextual | Unlimited (Edit, View) |
| Data Type | Recommended View |
|---|---|
| Visual content (faces, photos) | Grid (2-4 columns) |
| Structured data (many fields) | Table (sortable) |
| Mobile/narrow screens | List (single column) |
| Mixed visual + data | Grid with Table toggle |
| Rule | Why |
|---|---|
| ❌ NEVER design bottom-up | Perfecting shadows on misplaced cards wastes effort |
| ✅ ALWAYS start with layout | Solve fundamental usability issues first |
| ❌ NEVER hide primary actions | Users must find main CTA without keyboard shortcuts |
| ✅ ALWAYS have persistent primary CTA | Visible button + keyboard shortcut for power users |
| ❌ NEVER use color as sole indicator | Accessibility requires icons + text for status |
| ✅ ALWAYS test on all breakpoints | Mobile, tablet, desktop must all work |
Use this skill PROACTIVELY when:
For UI/UX design questions, invoke:
uiux-designer - Design analysis and recommendationsreact-specialist - Implementation guidanceflutter-specialist - Flutter/Material Design implementationreact-specialist - React component implementation~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.