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