Cursor rule Cursor
Cursor rule "00-core-principles" from saralobo/rules-design-bible, covering rule zero — fundamental design principles, before creating any screen, the 4 pillars of visual design, 1. hierarchy and 2. contrast.
Cursor rule Cursor
UX Laws (Fitts, Hick, Miller, Jakob, Doherty). Use when designing interactions, deciding layout positions, simplifying choices, or evaluating usability decisions.
Cursor rule Cursor
Gestalt Principles (proximity, similarity, continuity, closure, figure-ground). Use when grouping elements, organizing visual hierarchy, or structuring layouts.
Cursor rule Cursor
Layout, spacing, grid system, margins, padding, breathing room. Use when building any screen structure, defining spacing between elements, or setting up page layout.
Cursor rule Cursor
Typography system, font sizes, weights, line height, text hierarchy. Use when adding text elements, defining headings, body text, labels, or creating typographic hierarchy.
Cursor rule Cursor
Color system, palettes, semantic colors, contrast, dark/light mode. Use when choosing colors, defining color tokens, setting backgrounds, or working with themes.
Cursor rule Cursor
Buttons, CTAs, button hierarchy, sizes, states, filled/outlined/text variants. Use when creating buttons, call-to-action elements, or interactive action components.
Cursor rule Cursor
Forms, input fields, text fields, selects, validation, error states. Use when building forms, login screens, registration flows, search bars, or any data input interface.
Cursor rule Cursor
Navigation patterns, bottom nav, tabs, drawers, headers, app bars, breadcrumbs. Use when designing navigation structure, screen flow, or wayfinding elements.
Cursor rule Cursor
Cards, lists, tiles, content containers, transaction lists, grid layouts. Use when displaying collections of data, product listings, transaction history, or card-based layouts.
Cursor rule Cursor
Feedback states, loading, empty states, error states, success messages, toasts, snackbars. Use when handling system feedback, loading indicators, or communicating status to users.
Cursor rule Cursor
Motion, transitions, animations, easing curves, duration tokens, M3 motion system. Use when adding prototyping, screen transitions, animated interactions, or any motion design.
Cursor rule Cursor
Micro-interactions, hover effects, press feedback, scroll animations, prototype validation. Use when adding interactive details, prototyping flows, or polishing UI interactions.
Cursor rule Cursor
Accessibility, WCAG 2.2, contrast ratios, touch targets, screen readers, inclusive design. Use when reviewing accessibility compliance or ensuring designs are inclusive.
Cursor rule Cursor
Nielsen's 10 Usability Heuristics, usability evaluation, heuristic review. Use when evaluating screen usability, reviewing designs for UX quality, or conducting design audits.
Cursor rule Cursor
// ALWAYS check if a Section or Frame exists let section = figma.currentPage.findOne(n => n.type === 'SECTION'); if (!section) { section = figma.createSection(); section.name = 'Design Components'; } // Create your elements INSIDE the section.
Cursor rule Cursor
❌ WRONG: ┌────────────────────────┐ │ Icon │ ← Auto-layout HUG with uneven padding └────────────────────────┘ = Oval/cylindrical shape.
Cursor rule Cursor
Icons, Material Symbols, icon sizing, icon containers, optical alignment, Google Icons library. Use when adding icons to screens, working with icon buttons, or building any UI with icons.
Cursor rule Cursor
Responsiveness, constraints, auto-layout sizing (FILL/HUG/FIXED), min/max dimensions, adaptive components. Use when building responsive screens, setting constraints, or making components adapt to different screen sizes.
Cursor rule Cursor
Visual references from world-class apps (Nubank, Revolut, Cash App, Airbnb, Instagram, Uber). Use when seeking design inspiration, analyzing best practices, or building screens that need to match top-tier app quality.
Cursor rule Cursor
Rules exist to GUIDE judgment, not REPLACE it.
Cursor rule Cursor
The 17 classical design principles (hierarchy, balance, contrast, emphasis, proportion, scale, unity, variety, rhythm, repetition, pattern, movement, white space, color, lines, shapes, texture). Use when composing layouts, evaluating visual quality, or making any compositional decision.
saralobo/rules-accessibility-handoff
Instructions file
Claude Code instructions for saralobo/rules-accessibility-handoff, covering accessibility hand-off system v2.3, visual reference (study first), option b: read the text description (works in all tools), key visual rules (memorize these) and your job: three tasks.
saralobo/rules-accessibility-handoff
Command
Create an accessibility hand-off annotation in Figma. Analyzes a screen, generates structured JSON with targetBounds, executes the build script, and verifies with 18 strict checks.