Why Move Static Content to `mockData.ts` Instead of Hardcoding in Stitch Skills

Moving static content to mockData.ts separates data from UI logic, enabling easier maintenance, consistent asset handling across multiple skills, and simplified testing without touching component code.

In the Stitch Skills ecosystem, static assets like text strings, image URLs, and feature lists are deliberately isolated in a dedicated data module rather than embedded directly in components. The google-labs-code/stitch-skills repository enforces this architectural pattern to improve code organization, facilitate asset pipelines, and establish a foundation for future localization efforts.

Separation of Concerns and Maintainability

Keeping UI markup separate from the data that drives it makes each part easier to read, test, and maintain. When static content lives in src/data/mockData.ts, you can update copy, swap images, or modify list items without touching the component implementation.

According to the SKILL.md in the react-components plugin, this decoupling ensures that presentation logic remains clean while data management stays centralized. The architecture checklist at plugins/stitch-build/skills/react-components/resources/architecture-checklist.md explicitly mandates moving static text and URLs to this dedicated module.

// src/data/mockData.ts
export const mockData = {
  title: 'Welcome to Stitch',
  heroImage: '/assets/hero.png',
  features: ['Live design', 'Instant preview', 'One‑click upload'],
};

Reusability Across Multiple Skills

Many skills within the ecosystem—including react-components, react-native, and stitch-loop—require access to the same static resources. By consolidating these assets in mockData.ts, the repository eliminates duplication and guarantees that every skill references identical values.

This shared approach prevents drift between different skill implementations and ensures consistency across the platform. When a designer updates an image URL or product copy, the change propagates to all dependent skills automatically.

Simplifying Testing and Design Previews

Mock data can be swapped out with alternative datasets to simulate various scenarios without altering component code. This capability is particularly valuable for automated tests and design-to-code previews, as documented in the React Native SKILL.md.

// src/components/Header.tsx
import { mockData } from '@/data/mockData';

export function Header() {
  return (
    <header>
      <h1>{mockData.title}</h1>
      <img src={mockData.heroImage} alt="Hero" />
    </header>
  );
}

For testing scenarios, you can temporarily override values to verify specific behaviors:

// tests/Header.test.tsx
import { render } from '@testing-library/react';
import { Header } from '@/components/Header';
import { mockData } from '@/data/mockData';

// Override a value just for this test
mockData.title = 'Test Title';

test('renders header title', () => {
  const { getByText } = render(<Header />);
  expect(getByText('Test Title')).toBeInTheDocument();
});

Facilitating Asset Extraction and Upload

Skills that handle asset uploads, such as upload-to-stitch and extract-static-html, operate directly on the mockData.ts file to collect all images, HTML fragments, and design markdown. As implemented in plugins/stitch-design/skills/upload-to-stitch/SKILL.md, having a single source of truth means the upload pipeline can reliably discover every required asset without scanning multiple component files.

This centralized approach prevents missing assets during deployment and streamlines the build process for Stitch-enabled applications.

Future-Proofing for Localization and Theming

When static strings are isolated in mockData.ts, adding localization support or theme variations becomes a matter of providing alternate mock files rather than refactoring each component. This architecture supports runtime language switching and brand customization without touching the underlying React components or hooks.

The pattern enables teams to maintain separate data files for different locales (e.g., mockData.en.ts, mockData.fr.ts) and swap them at build time or runtime based on user preferences.

Summary

• Separation of concerns: Centralizing static content in src/data/mockData.ts keeps components focused on presentation logic while data management remains isolated.
• Cross-skill consistency: Shared mock data ensures that react-components, react-native, and other skills reference identical assets without duplication.
• Enhanced testability: Mock data can be overridden for specific test scenarios without modifying component source code.
• Pipeline reliability: Asset extraction and upload skills depend on the centralized mock file to discover and process static resources.
• Localization ready: Isolated data files support future internationalization and theming efforts without component refactoring.

Frequently Asked Questions

What is the purpose of mockData.ts in Stitch Skills?

The mockData.ts file serves as the centralized repository for all static content—including text strings, image URLs, and configuration lists—within the Stitch Skills ecosystem. According to the architecture guidelines in plugins/stitch-build/skills/react-components/resources/architecture-checklist.md, this file decouples data from presentation logic, enabling skills to consume consistent values while maintaining clean component code.

How does moving content to mockData.ts improve testing?

When static content resides in mockData.ts, developers can import and override specific values during test execution without touching the component implementation. This approach allows you to simulate different scenarios—such as testing error states or long text strings—by modifying the imported mock object before rendering components, as demonstrated in the testing patterns found in the React Native skill documentation.

Why not hardcode strings directly in React components?

Hardcoding strings directly in components violates the separation of concerns principle and creates maintenance headaches when the same content appears across multiple skills. By extracting static assets to mockData.ts, the Stitch Skills architecture ensures that copy changes, image updates, and feature lists can be modified in one location while automatically propagating to all dependent components and skills.

Can mockData.ts support multiple languages or themes?

Yes, the isolated nature of mockData.ts makes it ideal for localization and theming strategies. Teams can create variant data files (such as mockData.es.ts for Spanish or mockData.dark.ts for dark mode) and configure the build system or runtime environment to import the appropriate module. This approach requires zero changes to the component code, making internationalization and brand customization straightforward to implement.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}