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:

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

Content Types

Person

Generate realistic user data:

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:

<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:

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:

<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:

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:

<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:

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:

<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:

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:

<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:

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:

<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:

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:

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

---

Locale Support

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

// 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:

// 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

// 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:

// 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:

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

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