# Sfnext Components

> Build UI components in Storefront Next using createPage HOC, Suspense/Await patterns, shadcn/ui, and Tailwind CSS v4. Use when creating page components, adding Suspense boundaries, integrating shadcn/ui, styling with Tailwind, or organizing component files. Covers server vs client rendering patterns and the cn() utility.

- **Type:** Skill
- **Install:** `agentstack add skill-salesforcecommercecloud-b2c-developer-tooling-sfnext-components`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [SalesforceCommerceCloud](https://agentstack.voostack.com/s/salesforcecommercecloud)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [SalesforceCommerceCloud](https://github.com/SalesforceCommerceCloud)
- **Source:** https://github.com/SalesforceCommerceCloud/b2c-developer-tooling/tree/main/skills/storefront-next/skills/sfnext-components
- **Website:** https://salesforcecommercecloud.github.io/b2c-developer-tooling/

## Install

```sh
agentstack add skill-salesforcecommercecloud-b2c-developer-tooling-sfnext-components
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Components Skill

This skill covers component development patterns in Storefront Next — createPage HOC, Suspense boundaries, shadcn/ui integration, and Tailwind CSS styling.

## Page Component Pattern

Most routes export a default function component that receives `loaderData` as props:

```typescript
import { Suspense } from 'react';
import { Await } from 'react-router';
import { SeoMeta } from '@/components/seo-meta';

type ProductPageData = {
    product: Promise;
    reviews: Promise;
};

export default function ProductPage({ loaderData }: { loaderData: ProductPageData }) {
    return (
        <>
            
            }>
                
                    {(product) => }
                
            
            }>
                
                    {(reviews) => }
                
            
        
    );
}
```

### createPage HOC (Optional)

For pages needing standardized Suspense wrappers and page key management:

```typescript
import { createPage } from '@/components/create-page';

export default createPage({
    component: ProductView,
    fallback: ,
});
```

## Suspense Boundaries and Code Splitting

Use `` + `` for streaming loader data, and `lazy()` for code-splitting heavy components:

```typescript
import { lazy, Suspense } from 'react';

// Code-split a heavy component
const CustomerReviewsSection = lazy(() =>
    import('@/components/customer-reviews-section/customer-reviews-section')
);

export default function ProductPage({ loaderData }: { loaderData: ProductPageData }) {
    return (
        <>
            {/* Stream loader data */}
            }>
                
                    {(product) => }
                
            

            {/* Code-split component */}
            }>
                
            
        
    );
}
```

## shadcn/ui Components

shadcn/ui provides pre-built accessible components. Add them via CLI:

```bash
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
```

**Rules:**

- Add components via CLI only (do not manually create files in `src/components/ui/`)
- `src/components/ui/` components are copied into your project and can be customized directly
- Keep app/domain components outside `src/components/ui/`:

```typescript
// Optional wrapper for app-specific styling
import { Button } from '@/components/ui/button';

export function PrimaryButton(props: React.ComponentProps) {
    return ;
}
```

## Tailwind CSS Styling

Tailwind CSS v4 is the only permitted styling approach:

```typescript
import { cn } from '@/lib/utils';

export function ProductCard({ featured }: { featured?: boolean }) {
    return (
        
            
                Product Name
            
        
    );
}
```

**Rules:**

- Use Tailwind utility classes as the primary styling approach
- Use `cn()` for conditional class merging
- Follow mobile-first responsive design (`md:`, `lg:` breakpoints)
- Prefer Tailwind over inline styles; inline styles are acceptable for truly dynamic values (e.g., `backgroundColor` from API data)
- No CSS modules or separate CSS files
- Custom global CSS only in `src/app.css`

### Dark Mode

Theme variables automatically adapt via CSS variables:

```typescript

    Click me

```

### Responsive Design

```typescript

    {products.map(p => )}

```

## File Organization

```
src/components/product-tile/
├── index.tsx              # Component implementation
├── index.test.tsx         # Vitest unit tests
└── stories/
    ├── index.stories.tsx  # Storybook stories
    └── __snapshots__/     # Storybook snapshots (optional)

src/components/product-skeleton/
├── index.tsx              # Skeleton component (separate from main)
├── index.test.tsx
└── stories/
    └── index.stories.tsx
```

## Best Practices

1. **Export default function components** — Receive `loaderData` as props
2. **Granular Suspense boundaries** — Show content progressively as data resolves
3. **Use `lazy()` for heavy components** — Code-split below-the-fold or conditional UI
4. **Reusable skeleton components** — Consistent loading states
5. **Colocate tests and stories** — Keep test files next to source files
6. **TypeScript interfaces** — Define proper types for all props

## Related Skills

- `storefront-next:sfnext-data-fetching` - Loader patterns that feed data to components
- `storefront-next:sfnext-testing` - Writing Vitest tests and Storybook stories
- `storefront-next:sfnext-page-designer` - Page Designer component integration
- `storefront-next:sfnext-i18n` - Translating component text

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [SalesforceCommerceCloud](https://github.com/SalesforceCommerceCloud)
- **Source:** [SalesforceCommerceCloud/b2c-developer-tooling](https://github.com/SalesforceCommerceCloud/b2c-developer-tooling)
- **License:** Apache-2.0
- **Homepage:** https://salesforcecommercecloud.github.io/b2c-developer-tooling/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-salesforcecommercecloud-b2c-developer-tooling-sfnext-components
- Seller: https://agentstack.voostack.com/s/salesforcecommercecloud
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.