# Resilient to User-generated Content

**MUST** · **ID:** `content-resilient-ugc` · **Category:** content
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-resilient-ugc

> MUST: Resilient to user-generated content (short/avg/very long)

Layouts handle short, average, and very long content

User-generated content is unpredictable. Test your layouts with short text, average text, and extremely long text without spaces. Use text overflow strategies like ellipsis, word-wrap, or scrolling to handle edge cases gracefully.

## Bad — do not do this

`content-resilient-ugc-bad`

```tsx
export function ResilientUgcBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="font-semibold mb-3">User Comments</h3>
        <div className="space-y-3">
          <div className="flex items-start gap-3">
            <div className="w-8 h-8 bg-primary/10 rounded-full flex-shrink-0" />
            <div className="flex-1 min-w-0">
              <p className="font-medium text-sm">VeryyyyyyyyLongUsernameWithoutAnySpacesThatBreaksTheLayoutCompletely</p>
              <p className="text-sm text-muted-foreground">
                ThisIsAVeryLongWordWithoutSpacesThatWillOverflowTheContainerAndBreakTheLayout
              </p>
            </div>
          </div>
        </div>
        <p className="mt-3 text-xs text-muted-foreground">
          Long text without spaces overflows the container, breaking the layout.
        </p>
      </div>
      <p className="text-xs text-error mt-4">
        No overflow handling - long content breaks layout
      </p>
    </div>
  );
}
```

## Good — do this

`content-resilient-ugc-good`

```tsx
export function ResilientUgcGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="font-semibold mb-3">User Comments</h3>
        <div className="space-y-3">
          <div className="flex items-start gap-3">
            <div className="w-8 h-8 bg-primary/10 rounded-full flex-shrink-0" />
            <div className="flex-1 min-w-0">
              <p className="font-medium text-sm truncate">VeryyyyyyyyLongUsernameWithoutAnySpacesThatBreaksTheLayoutCompletely</p>
              <p className="text-sm text-muted-foreground break-words overflow-wrap-anywhere">
                ThisIsAVeryLongWordWithoutSpacesThatWillOverflowTheContainerAndBreakTheLayout
              </p>
            </div>
          </div>
        </div>
        <div className="mt-3 bg-success/10 border border-success/20 rounded-lg p-2">
          <code className="text-xs text-success font-mono block">
            truncate / break-words / overflow-wrap
          </code>
        </div>
      </div>
      <p className="text-xs text-success mt-4">
        Text truncated or wrapped - layout stays intact
      </p>
    </div>
  );
}
```

## References

- [Text Overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-overflow)