x3allamerican/design-skills-fleetsafety

404-and-empty-state-design

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'.

原文の言語: 英語

ab-test-design-rituals

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.

原文の言語: 英語

accessibility-baseline

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.

原文の言語: 英語

accessibility-wcag-aaa

Use when targeting WCAG AAA (highest accessibility tier). Covers what AAA requires beyond AA, the trade-offs, and when AAA is worth pursuing.

原文の言語: 英語

account-settings-design

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.

原文の言語: 英語

ai-pair-design-workflows

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.

原文の言語: 英語

analytics-instrumentation-design

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.

原文の言語: 英語

brand-system-tokens

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.

原文の言語: 英語

brand-voice-in-interface

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.'

原文の言語: 英語

breach-notification-ui

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.

原文の言語: 英語

bulk-action-ui-patterns

Use when designing bulk actions on tables or lists. Covers select-all patterns, the bulk-action bar, destructive bulk operations, and undo.

原文の言語: 英語

careers-page-design

Use when designing a careers/jobs page. Covers role listing, the values section, the team photos vs no-photos decision, and benefits presentation.

原文の言語: 英語

color-system-design

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.

原文の言語: 英語

comparison-table-design

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.

原文の言語: 英語

competitive-design-benchmarking

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.

原文の言語: 英語

component-composition

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.

原文の言語: 英語

contextual-help-design

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.

原文の言語: 英語

conversion-copywriting

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.

原文の言語: 英語

conversion-rate-optimization-fundamentals

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.

原文の言語: 英語

core-web-vitals-design

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.

原文の言語: 英語

cta-button-systems

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.

原文の言語: 英語

dark-ui-fundamentals

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.

原文の言語: 英語

dashboard-density-principles

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.

原文の言語: 英語

data-table-design

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.

原文の言語: 英語

design-critique-frameworks

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.

原文の言語: 英語

design-debt-management

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.

原文の言語: 英語

design-handoff-patterns

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.

原文の言語: 英語

design-research-integration

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.

原文の言語: 英語

design-research-with-claude

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.

原文の言語: 英語

design-review-rituals

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.

原文の言語: 英語

design-system-at-scale

Use when scaling a design system across multiple products, brands, or teams. Covers ownership, governance, contribution model, and the platform-team pattern.

原文の言語: 英語

design-system-documentation

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.

原文の言語: 英語

design-team-workflows

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.

原文の言語: 英語

design-token-architecture

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.

原文の言語: 英語

email-template-design

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.

原文の言語: 英語

empty-states-loading-states

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.

原文の言語: 英語

error-page-design

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.

原文の言語: 英語

export-and-share-ui

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.

原文の言語: 英語

faq-section-design

Use when designing FAQ sections. Covers the structure (accordion vs always-open), question selection (objection-driven), the answers that build trust, and the format.

原文の言語: 英語

feature-section-patterns

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.

原文の言語: 英語