Weaverse SDK Development

Expert development assistant for the Weaverse SDK monorepo ecosystem, including Weaverse Hydrogen, Weaverse CLI, Weaverse Schema, and related packages for building Shopify Hydrogen themes and headless commerce solutions.

Project Context

This skill applies to a TypeScript monorepo managed with turborepo and changeset for versioning. The codebase focuses on seamless integration and development of Shopify Hydrogen themes and headless commerce solutions.

Coding Standards

**Naming Conventions:**

Use camelCase for variable and function names

Use PascalCase for component names

Use ALL_CAPS for constants (values that never change)

Prefix private class members with underscore (_)

**Code Style:**

Use double quotes for strings

Use 2 spaces for indentation

Use arrow functions for callbacks

Use async/await for asynchronous code (avoid raw promises)

Use const for true constants (ALL_CAPS named) and prefer let for other variables

Use destructuring for objects and arrays

Use template literals for strings containing variables

Use latest JavaScript features (ES6+) where possible

TypeScript Guidelines

Always define types for function parameters and return values

Avoid using `any` - prefer `unknown` or specific types

Use TypeScript for all new code

Use interfaces for data structures and type definitions

Prefer immutable data (const, readonly)

Use optional chaining (?.) and nullish coalescing (??) operators for safe property access

Follow functional programming principles where possible

**Example:**

```typescript

// Good

interface UserProfile {

readonly id: string;

readonly name: string;

email?: string;

}

function getUserDisplay(user: UserProfile): string {

return user.email ?? user.name;

}

// Avoid

function getUser(id: any): any {

// ...

}

```

React Guidelines

Use functional components with hooks (no class components)

Follow React hooks rules: no conditional hooks, hooks must be at top level

Use React.FC type for components with children

Keep components small and focused (single responsibility)

Use CSS modules for component styling

**Example:**

```typescript

import React from "react";

import styles from "./Button.module.css";

interface ButtonProps {

onClick: () => void;

label: string;

}

const Button: React.FC<ButtonProps> = ({ onClick, label }) => {

return (

{label}

</button>

);

};

export default Button;

```

Error Handling

Use try/catch blocks for all async operations

Implement proper error boundaries in React components

Always log errors with contextual information (function name, parameters, stack trace)

**Example:**

```typescript

async function fetchUserData(userId: string): Promise<UserProfile | null> {

try {

const response = await fetch(`/api/users/${userId}`);

return await response.json();

} catch (error) {

console.error(`Failed to fetch user data for userId: ${userId}`, error);

return null;

}

```

Monorepo Workflow

Use turborepo commands for building, testing, and linting across packages

Use changeset for managing package versions and changelogs

Keep package dependencies up to date

Follow consistent folder structure across packages

Best Practices

1. Write self-documenting code with clear variable and function names

2. Add JSDoc comments for public APIs and complex functions

3. Write unit tests for business logic

4. Use linting and formatting tools (ESLint, Prettier)

5. Commit small, atomic changes with descriptive messages

6. Review TypeScript strict mode errors and fix them promptly

Constraints

Do not use `var` - use `const` or `let`

Do not use class components in React - use functional components

Do not ignore TypeScript errors - fix them or use proper type assertions

Do not use `any` without justification - prefer specific types

Do not mutate props or state directly - use immutable patterns

Weaverse SDK Development

Weaverse SDK Development

Project Context

Coding Standards

TypeScript Guidelines

React Guidelines

Error Handling

Monorepo Workflow

Best Practices

Constraints

Reviews (0)