Menu
SkillsMP has collected 100 skills from x3allamerican/design-skills-fleetsafety. Open a skill to review its source and details.
Showing 40 of 100 collected skills.
Use when designing 404 pages and the broader empty-state pattern library. Covers tone, illustration, search recovery, and the difference between 'no data yet' and 'this URL doesn't exist'.
Use when designing A/B tests. Covers hypothesis-driven testing, sample-size calculation, the test-design template, and the cultural rituals that make testing productive.
Use when shipping any user-facing UI. Covers the non-negotiable accessibility baseline: contrast, focus states, semantic HTML, keyboard navigation, screen-reader support, motion preferences. The minimum to avoid embarrassment and ADA risk.
Use when targeting WCAG AAA (highest accessibility tier). Covers what AAA requires beyond AA, the trade-offs, and when AAA is worth pursuing.
Use when designing account settings pages. Covers the canonical sections, the left-nav vs tab pattern, danger zones, and how to organize 30+ settings without overwhelming.
Use when working with AI as a design partner (Claude, GPT, Midjourney, v0). Covers the workflows that make AI useful, when to lead vs let-AI-lead, prompting for design output, and the limits of AI design today.
Use when designing analytics instrumentation as a design discipline. Covers event taxonomy, naming conventions, the design-team's role, and the patterns that surface real insights vs vanity metrics.
Use when establishing or migrating to a token-based design system. Covers the multi-layer token architecture (primitive → semantic → component), naming conventions, theming patterns, and how to migrate from hard-coded values without a full rewrite.
Use when writing UI copy: button labels, error messages, empty states, onboarding text, tooltips. Covers voice consistency, the difference between marketing voice and product voice, and the language patterns that read as 'brand.'
Use when designing the UI for a security breach notification (rare but high-stakes). Covers tone, what to disclose, the in-app banner + email + status page pattern, and the legal requirements that affect design.
Use when designing bulk actions on tables or lists. Covers select-all patterns, the bulk-action bar, destructive bulk operations, and undo.
Use when designing a careers/jobs page. Covers role listing, the values section, the team photos vs no-photos decision, and benefits presentation.
Use when establishing a color system for a SaaS product, marketing site, or brand. Covers tokens, semantic naming, accent strategy, accessibility (WCAG contrast), dark vs light considerations, and when to use gradients.
Use when designing comparison tables (vs competitors, vs in-house, vs hire). Covers the patterns that don't feel like attack ads, what to include, how to handle the case where competitors don't expose data, and ethical comparison.
Use when benchmarking your design against best-in-class competitors. Covers the audit framework (visual, structural, copy, conversion), how to choose competitors to benchmark against, and how to apply findings without becoming derivative.
Use when designing or organizing UI components. Covers primitives vs compositions vs patterns, the atom/molecule/organism mental model, and component API design that composes well without inheritance hell.
Use when designing in-app contextual help: tooltips, help icons, links to docs, embedded video. Covers when to use each, the placement, and how to add help without cluttering.
Use when writing or editing marketing copy. Covers the principles of conversion copywriting, the formulas that work (PAS, AIDA, etc.), the patterns to avoid (jargon, puffery), and headline + subhead crafting.
Use when designing any page or section with a conversion goal (signup, demo, trial, purchase). Covers the LIFT framework, the five conversion factors in order of impact, and how to design for conversion without being sleazy.
Use when designing for Core Web Vitals specifically. Covers each metric, the design patterns that improve them, and how to balance vitals with visual richness.
Use when designing button systems for a SaaS product or marketing site. Covers button hierarchy (primary/secondary/tertiary), sizing, language, placement, hover/focus states, and the most common button mistakes.
Use when designing dark-themed interfaces. Covers contrast, layered backgrounds, type rendering on dark, the difference between "dark mode" (light UI inverted) and "dark UI" (designed dark-first), and the common mistakes that make a dark theme feel cheap.
Use when designing data-rich product dashboards. Covers when to use density vs whitespace, the canonical dashboard structure (header → KPI row → main grid → activity), KPI tile patterns, and the mistakes that make dashboards feel cluttered.
Use when designing data tables in a product UI. Covers row height, column widths, sortability, sticky headers, empty/loading states, the cell type conventions (text, number, date, status), and pagination patterns.
Use when running or participating in design critique sessions. Covers the structure of a good crit (context, ask, feedback, decision), framing techniques, and how to give feedback that builds the design rather than the designer.
Use when managing design debt across a product. Covers the audit, the prioritization framework, the parallel-tracks pattern (new + cleanup), and how to NOT do a full redesign.
Use when handing designs to engineering. Covers Figma handoff, design tokens export, spec annotation, the difference between handoff and collaboration, and the rituals that eliminate '?' Slack messages.
Use when integrating user research into the design workflow. Covers when to do research (always vs sometimes), the methods (interviews, surveys, usability tests, analytics), and how to actually act on research instead of filing it.
Use when leveraging AI (Claude, GPT) for design research, analysis, and synthesis. Covers the workflows that work (transcript synthesis, competitive teardowns, copy review, design audits), the limits, and the prompting patterns.
Use when establishing design review processes that catch issues without becoming a bottleneck. Covers review cadence, the levels of review (peer / lead / cross-team), the criteria for sign-off, and async vs synchronous review.
Use when scaling a design system across multiple products, brands, or teams. Covers ownership, governance, contribution model, and the platform-team pattern.
Use when documenting a design system for cross-team use. Covers the documentation structure (Storybook, Notion, dedicated docs site), what to document, who reads it, and the maintenance cost.
Use when establishing team workflows for designers, design ops, design-dev pairing, and design-led product development. Covers the rituals, the tooling, the cadence, and how design fits into agile.
Use when implementing a design token pipeline. Covers JSON token files, Style Dictionary, multi-platform output (CSS vars, iOS, Android, React Native), and how to organize tokens at scale.
Use when designing transactional and marketing email templates. Covers the email-safe CSS subset, mobile-first widths, the canonical header / body / footer structure, and the anti-patterns that get caught in spam filters.
Use when designing the moments before content exists: empty states (no data yet), loading states (data fetching), and zero-result states (filtered out). Covers patterns, skeleton loaders, and the difference between great empty states and broken-feeling ones.
Use when designing error pages (4xx, 5xx, app errors, form errors). Covers tone, what to include (clear cause + next action), and the difference between API errors and user-facing errors.
Use when designing export, download, and share functionality. Covers format options, the share-link vs email vs PDF flow, and progressive disclosure for power users.
Use when designing FAQ sections. Covers the structure (accordion vs always-open), question selection (objection-driven), the answers that build trust, and the format.
Use when designing feature sections for marketing pages. Covers the canonical patterns (3-up grid, split with media, alternating rows, vertical timeline) and how to choose which fits the content.