Menú
Skills en este repositorio
SkillsMP ha recopilado 100 skills de x3allamerican/design-skills-fleetsafety. Abre una skill para revisar su origen y sus detalles.
x3allamerican/design-skills-fleetsafetyMostrando 40 de 100 skills recopiladas.
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
Use when designing GDPR / CCPA cookie consent banners. Covers the patterns that are compliant + not annoying, the 'reject all' button placement, and granular controls.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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).
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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…
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.'
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
Use when designing for performance. Covers Core Web Vitals, the design decisions that affect performance (web fonts, images, JS), and the budget framework.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
Use when designing print and PDF output (invoices, reports, audit packets). Covers print stylesheets, PDF generation libraries, and the layout that survives both.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
Use when designing a Progressive Web App. Covers the install prompt, offline state, push notifications, and the design differences between PWA and native.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
Use when designing responsive image strategy. Covers srcset, picture element, lazy loading, blur placeholders, and the trade-offs between performance and quality.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés
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.
Idioma del texto original: inglés