Fake Content Skill

Generate realistic fake content using @faker-js/faker. Create contextually appropriate sample data for prototypes and development.

Philosophy

Realistic over generic - Use proper names, realistic prices, believable text
Contextually appropriate - Match content to the page purpose
Consistent within context - Same person name throughout a section
Locale-aware - Match content to page language

Setup

Install faker as a dev dependency:

bash

npm install @faker-js/faker --save-dev

Content Types

Person

Generate realistic user data:

javascript

import { faker } from '@faker-js/faker';

const person = {
  name: faker.person.fullName(),
  email: faker.internet.email(),
  phone: faker.phone.number(),
  jobTitle: faker.person.jobTitle(),
  avatar: faker.image.avatar(),
  bio: faker.person.bio()
};

HTML Template:

html

<article class="team-member">
  <img src="[avatar URL]" alt="[name]"/>
  <h3>[name]</h3>
  <p class="title">[jobTitle]</p>
  <p class="bio">[bio]</p>
  <a href="mailto:[email]">[email]</a>
</article>

Product

Generate e-commerce product data:

javascript

import { faker } from '@faker-js/faker';

const product = {
  name: faker.commerce.productName(),
  description: faker.commerce.productDescription(),
  price: faker.commerce.price({ min: 10, max: 500, dec: 2 }),
  category: faker.commerce.department(),
  sku: faker.string.alphanumeric(8).toUpperCase(),
  rating: faker.number.float({ min: 3.5, max: 5, fractionDigits: 1 }),
  reviews: faker.number.int({ min: 10, max: 500 })
};

HTML Template:

html

<product-card sku="[sku]">
  <img src="/assets/images/placeholder/product-400x400.svg"
       alt="[name]"/>
  <h3>[name]</h3>
  <p>[description]</p>
  <data class="price" value="[price]">$[price]</data>
  <p class="category">[category]</p>
  <p class="rating">[rating] stars ([reviews] reviews)</p>
</product-card>

Testimonial

Generate customer testimonials:

javascript

import { faker } from '@faker-js/faker';

const testimonial = {
  quote: faker.lorem.sentences({ min: 2, max: 4 }),
  author: faker.person.fullName(),
  company: faker.company.name(),
  role: faker.person.jobTitle(),
  avatar: faker.image.avatar()
};

HTML Template:

html

<blockquote class="testimonial">
  <p>"[quote]"</p>
  <footer>
    <img src="[avatar]" alt="[author]"/>
    <cite>[author]</cite>
    <span class="role">[role], [company]</span>
  </footer>
</blockquote>

Article

Generate blog posts and news articles:

javascript

import { faker } from '@faker-js/faker';

const article = {
  title: faker.lorem.sentence({ min: 5, max: 10 }),
  author: faker.person.fullName(),
  date: faker.date.recent({ days: 30 }),
  excerpt: faker.lorem.sentences(2),
  body: faker.lorem.paragraphs(5),
  category: faker.helpers.arrayElement(['Technology', 'Business', 'Lifestyle', 'Health']),
  readTime: faker.number.int({ min: 3, max: 15 })
};

HTML Template:

html

<article class="blog-post">
  <header>
    <h2>[title]</h2>
    <p class="meta">
      By <span class="author">[author]</span> |
      <time datetime="[date ISO]">[date formatted]</time> |
      [readTime] min read
    </p>
  </header>
  <img src="/assets/images/placeholder/card-400x225.svg"
       alt="Article illustration"/>
  <p class="excerpt">[excerpt]</p>
  <div class="content">[body as paragraphs]</div>
</article>

Company

Generate business/organization data:

javascript

import { faker } from '@faker-js/faker';

const company = {
  name: faker.company.name(),
  catchPhrase: faker.company.catchPhrase(),
  buzzPhrase: faker.company.buzzPhrase(),
  industry: faker.company.buzzNoun(),
  phone: faker.phone.number(),
  email: faker.internet.email({ provider: 'company.com' }),
  website: faker.internet.url(),
  address: {
    street: faker.location.streetAddress(),
    city: faker.location.city(),
    state: faker.location.state({ abbreviated: true }),
    zip: faker.location.zipCode(),
    country: faker.location.country()
  }
};

HTML Template:

html

<div class="company-info">
  <h3>[name]</h3>
  <p class="tagline">[catchPhrase]</p>
  <address>
    [street]<br/>
    [city], [state] [zip]<br/>
    [country]
  </address>
  <p>
    <a href="tel:[phone]">[phone]</a><br/>
    <a href="mailto:[email]">[email]</a><br/>
    <a href="[website]">[website]</a>
  </p>
</div>

Event

Generate event/calendar data:

javascript

import { faker } from '@faker-js/faker';

const event = {
  title: faker.lorem.sentence({ min: 3, max: 7 }),
  description: faker.lorem.paragraph(),
  date: faker.date.future({ years: 1 }),
  startTime: faker.date.future(),
  endTime: faker.date.future(),
  location: {
    venue: faker.company.name(),
    address: faker.location.streetAddress(),
    city: faker.location.city()
  },
  organizer: faker.person.fullName(),
  price: faker.commerce.price({ min: 0, max: 200 }),
  capacity: faker.number.int({ min: 20, max: 500 })
};

HTML Template:

html

<article class="event-card">
  <time datetime="[date ISO]">
    <span class="month">[month]</span>
    <span class="day">[day]</span>
  </time>
  <div class="details">
    <h3>[title]</h3>
    <p>[description]</p>
    <p class="location">[venue], [city]</p>
    <p class="time">[startTime] - [endTime]</p>
    <data class="price" value="[price]">$[price]</data>
  </div>
</article>

FAQ

Generate question/answer pairs:

javascript

import { faker } from '@faker-js/faker';

const faq = {
  question: faker.lorem.sentence().replace('.', '?'),
  answer: faker.lorem.sentences({ min: 2, max: 4 })
};

// Generate multiple FAQs
const faqs = faker.helpers.multiple(
  () => ({
    question: faker.lorem.sentence().replace('.', '?'),
    answer: faker.lorem.sentences({ min: 2, max: 4 })
  }),
  { count: 8 }
);

HTML Template:

html

<details class="faq-item">
  <summary>[question]</summary>
  <p>[answer]</p>
</details>

Locale Support

Faker supports 70+ locales. Match content to your page's language:

javascript

// Import locale-specific faker
import { fakerDE } from '@faker-js/faker';  // German
import { fakerFR } from '@faker-js/faker';  // French
import { fakerES } from '@faker-js/faker';  // Spanish
import { fakerJA } from '@faker-js/faker';  // Japanese

// Use locale-specific instance
const germanPerson = {
  name: fakerDE.person.fullName(),    // "Max Müller"
  city: fakerDE.location.city(),       // "München"
  phone: fakerDE.phone.number()        // "+49 30 12345678"
};

Common Locales:

Code	Language	Import
`de`	German	`fakerDE`
`fr`	French	`fakerFR`
`es`	Spanish	`fakerES`
`it`	Italian	`fakerIT`
`pt_BR`	Portuguese (Brazil)	`fakerPT_BR`
`ja`	Japanese	`fakerJA`
`zh_CN`	Chinese (Simplified)	`fakerZH_CN`
`ko`	Korean	`fakerKO`
`ar`	Arabic	`fakerAR`
`nl`	Dutch	`fakerNL`

Detect Page Language:

javascript

// Get lang from HTML
const lang = document.documentElement.lang || 'en';

// Map to faker locale
const fakerLocales = {
  'en': faker,
  'de': fakerDE,
  'fr': fakerFR,
  'es': fakerES
};

const localFaker = fakerLocales[lang] || faker;

Content Guidelines

Text Length

Content Type	Recommended Length
Product name	2-5 words
Product description	15-30 words
Testimonial	20-50 words
Bio	15-25 words
Headline	5-10 words
Article excerpt	20-40 words
Article body	5-10 paragraphs
FAQ question	8-15 words
FAQ answer	30-60 words
Event description	20-40 words
Company tagline	5-10 words

Realistic Proportions

javascript

// Good: Realistic price range
faker.commerce.price({ min: 19.99, max: 299.99 })

// Good: Realistic rating
faker.number.float({ min: 3.5, max: 5, fractionDigits: 1 })

// Good: Varying review counts
faker.number.int({ min: 5, max: 500 })

Consistency

Keep related data consistent within a section:

javascript

// Generate person once, reuse data
const author = {
  firstName: faker.person.firstName(),
  lastName: faker.person.lastName()
};

// Use consistently
const fullName = `${author.firstName} ${author.lastName}`;
const email = faker.internet.email({
  firstName: author.firstName,
  lastName: author.lastName
});

Seeding for Reproducibility

Use seeds to generate consistent data across runs:

javascript

import { faker } from '@faker-js/faker';

// Set seed for reproducible results
faker.seed(12345);

// Same seed = same output every time
const name = faker.person.fullName(); // Always "John Smith"

Generate Multiple Items

javascript

import { faker } from '@faker-js/faker';

// Generate array of products
const products = faker.helpers.multiple(
  () => ({
    name: faker.commerce.productName(),
    price: faker.commerce.price(),
    description: faker.commerce.productDescription()
  }),
  { count: 10 }
);

// Generate with index
const items = faker.helpers.multiple(
  (_, index) => ({
    id: index + 1,
    name: faker.commerce.productName()
  }),
  { count: 5 }
);

Quick Reference

Need	Faker Method
Full name	`faker.person.fullName()`
First name	`faker.person.firstName()`
Email	`faker.internet.email()`
Phone	`faker.phone.number()`
Job title	`faker.person.jobTitle()`
Company	`faker.company.name()`
Catchphrase	`faker.company.catchPhrase()`
Product name	`faker.commerce.productName()`
Price	`faker.commerce.price()`
Department	`faker.commerce.department()`
Description	`faker.commerce.productDescription()`
Paragraph	`faker.lorem.paragraph()`
Paragraphs	`faker.lorem.paragraphs(5)`
Sentences	`faker.lorem.sentences(3)`
Recent date	`faker.date.recent()`
Future date	`faker.date.future()`
Street address	`faker.location.streetAddress()`
City	`faker.location.city()`
Country	`faker.location.country()`
UUID	`faker.string.uuid()`
URL	`faker.internet.url()`
Avatar URL	`faker.image.avatar()`
Random from array	`faker.helpers.arrayElement([...])`
Multiple items	`faker.helpers.multiple(fn, { count })`

Checklist

When generating fake content:

Use faker methods, not lorem ipsum
Match content length to context
Keep related data consistent
Use realistic value ranges
Consider using seed for reproducibility
Generate appropriate count for the UI

Related Skills

content-author - Write quality content for HTML documents
patterns - Reusable HTML page patterns and component blocks
xhtml-author - Write valid XHTML-strict HTML5 markup
placeholder-images - Generate SVG placeholder images for prototypes

Search AI Tools

fake-content

Install this agent skill to your Project

SKILL.md

Fake Content Skill

Philosophy

Setup

Content Types

Person

Product

Testimonial

Article

Company

Event

FAQ

Locale Support

Content Guidelines

Text Length

Realistic Proportions

Consistency

Seeding for Reproducibility

Generate Multiple Items

Quick Reference

Checklist

Related Skills