Use when designing filters for lists, tables, search results. Covers facet patterns (checkboxes, ranges, tags), the apply-filters-as-you-go vs apply-button decision.
Quellsprache: Englisch
Menü
Skills in diesem Repository
SkillsMP hat 100 Skills aus x3allamerican/design-skills-fleetsafety gesammelt. Öffne einen Skill, um Quelle und Details zu prüfen.
x3allamerican/design-skills-fleetsafetyEs werden 40 von 100 gesammelten Skills angezeigt.
Use when designing filters for lists, tables, search results. Covers facet patterns (checkboxes, ranges, tags), the apply-filters-as-you-go vs apply-button decision.
Quellsprache: Englisch
Use when designing or auditing a marketing site footer. Covers the canonical column structure, what belongs in a footer vs nav, how to add a 'big footer' newsletter / link-rich section, and what to skip.
Quellsprache: Englisch
Use when designing any form (signup, settings, checkout, search). Covers field count, label position, inline validation, error messaging, autofill considerations, and the rules that 2x conversion on signup forms.
Quellsprache: Englisch
Use when designing GDPR / CCPA cookie consent banners. Covers the patterns that are compliant + not annoying, the 'reject all' button placement, and granular controls.
Quellsprache: Englisch
Use when designing a marketing hero section. Covers the canonical structure (badge, headline, sub, CTAs, trust strip), modern hero patterns, hero copywriting, hero imagery decisions, and the difference between converting heros and pretty ones.
Quellsprache: Englisch
Use when designing hover states across a UI. Covers the canonical hover patterns (lift, glow, color shift, scale, content reveal), how to choose, and the hover states for every interactive element.
Quellsprache: Englisch
Use when establishing an icon library. Covers stroke vs fill, weight, sizing, the choice of icon library (Lucide, Phosphor, Heroicons), custom icon creation, and accessibility.
Quellsprache: Englisch
Use when commissioning or creating illustrations for a SaaS product. Covers the canonical illustration styles (geometric, isometric, hand-drawn, abstract), when each works, sourcing strategies, and how to maintain consistency.
Quellsprache: Englisch
Use when designing with inclusion at the center. Covers the difference between accessibility (rules) and inclusion (mindset), the principles of inclusive design, and how to research with underrepresented users.
Quellsprache: Englisch
Use when designing UI for multi-language support. Covers text length variability, RTL support, date/number formats, and the technical patterns (i18n libraries, key-based translation).
Quellsprache: Englisch
Use when designing or evaluating a logo. Covers the criteria for a great logo (memorable, scalable, distinctive, timeless), the canonical formats (icon + wordmark, monogram, wordmark only), and what to avoid.
Quellsprache: Englisch
Use when adding motion to a UI. Covers the principle of motion budget, the types of animations that earn their cost, easing curves, the duration scale, and when to default to no animation.
Quellsprache: Englisch
Use when designing the mobile app shell (or mobile-web equivalent). Covers tab bar, navigation drawer, header patterns, and the differences between native iOS, Android, and mobile-web.
Quellsprache: Englisch
Use when designing mobile navigation for a marketing site or web app. Covers hamburger vs bottom-tab vs slide-out, the gesture patterns, and the back-button behavior.
Quellsprache: Englisch
Use when designing modal dialogs, confirmation dialogs, side drawers, and overlays. Covers when to use each, sizing, escape behavior, focus trapping, and the patterns that don't feel obtrusive.
Quellsprache: Englisch
Use when designing or evaluating a SaaS marketing site or product UI in 2025+. Covers the canonical modern aesthetic, what's table-stakes, what's overused, and how to make design decisions that age past one trend cycle. Reference for every other skill in this…
Quellsprache: Englisch
Use when designing for multiple sub-brands (e.g., X3 Compass + X3 Fleet Safety + X3 Investment Group). Covers token inheritance, white-label patterns, and the shared-vs-distinct architecture.
Quellsprache: Englisch
Use when designing or auditing a marketing site navigation. Covers sticky nav vs scrolling, logo placement, link order, sign-in/sign-up CTAs, mobile patterns, and the underused 'mega nav.'
Quellsprache: Englisch
Use when designing recurring newsletter templates. Covers single-topic vs multi-topic format, the header / banner, the sub-section pattern, archive linking, and what cadence supports what design.
Quellsprache: Englisch
Use when designing notification preferences. Covers channel selection (email, SMS, push), event-based vs role-based settings, snooze patterns, and the per-event-type granularity sweet spot.
Quellsprache: Englisch
Use when designing UI for offline + degraded-network states. Covers the patterns (banner, queue, retry, sync), and what to do when actions can't reach the server.
Quellsprache: Englisch
Use when designing Open Graph / Twitter Card preview images. Covers sizing, the typography that works at preview size, brand consistency across multiple URLs, and dynamic OG image generation.
Quellsprache: Englisch
Use when designing the first-time user experience. Covers the canonical onboarding patterns (checklist, progressive disclosure, tour, empty-state guidance), when to use each, and how to balance helpfulness with friction.
Quellsprache: Englisch
Use when designing pagination for tables, search results, lists. Covers when to use pagination vs infinite scroll vs load-more, and the user expectations for each.
Quellsprache: Englisch
Use when designing for performance. Covers Core Web Vitals, the design decisions that affect performance (web fonts, images, JS), and the budget framework.
Quellsprache: Englisch
Use when designing a /press or /newsroom page. Covers the canonical sections (announcements, logos, press kit, media contact), and how to make it useful for both press AND prospective customers.
Quellsprache: Englisch
Use when designing how pricing is displayed (not what the pricing IS). Covers the psychology of price perception, anchoring, the monthly-annual toggle, currency display, and the small choices that move conversion.
Quellsprache: Englisch
Use when designing or auditing a SaaS pricing page. Covers the canonical 3–5 tier layout, featured-tier highlighting, per-feature comparison, monthly vs annual toggle patterns, overage handling, and the mistakes that kill conversion.
Quellsprache: Englisch
Use when designing print and PDF output (invoices, reports, audit packets). Covers print stylesheets, PDF generation libraries, and the layout that survives both.
Quellsprache: Englisch
Use when designing privacy-policy and terms pages. Covers readability (sections, plain English summaries), the change log, when to require re-consent, and how to balance legal accuracy with usability.
Quellsprache: Englisch
Use when creating product screenshots for marketing pages and app stores. Covers the staging (real data vs sample), the device frame, callouts, and how to keep screenshots fresh across product changes.
Quellsprache: Englisch
Use when designing in-product tours and coachmarks for new users. Covers the trigger patterns, the dismiss-respect-the-user principle, and the alternative of contextual help.
Quellsprache: Englisch
Use when designing a Progressive Web App. Covers the install prompt, offline state, push notifications, and the design differences between PWA and native.
Quellsprache: Englisch
Use when establishing breakpoints or auditing responsive behavior. Covers standard breakpoints, mobile-first vs desktop-first, the four core responsive patterns, fluid type with clamp(), and the viewports to actually test.
Quellsprache: Englisch
Use when designing responsive image strategy. Covers srcset, picture element, lazy loading, blur placeholders, and the trade-offs between performance and quality.
Quellsprache: Englisch
Use when supporting right-to-left languages (Arabic, Hebrew, Persian). Covers direction flipping, layout mirroring, the icons that don't flip, and the CSS logical properties.
Quellsprache: Englisch
Use when designing the in-product billing UI: current plan, payment method, invoices, upgrade flow. Covers transparency, the cancel flow, dunning, and the trust-building patterns.
Quellsprache: Englisch
Use when designing a complete SaaS marketing landing page. Covers the canonical 9-section structure, how to choose which sections you need, and the order that converts.
Quellsprache: Englisch
Use when designing the first-run experience for a SaaS product. Covers checklist patterns, sample data, contextual help, time-to-value benchmarks, and the practices that maximize 90-day retention.
Quellsprache: Englisch
Use when designing a SaaS pricing page specifically. Covers 3-tier vs 5-tier, anchoring techniques, the toggle, comparison tables, FAQ inclusion, and how to NOT use 'Contact sales' as a black box.
Quellsprache: Englisch