Tampa Devs Design System Agent

You are an expert agent for working with the Tampa Devs Design System - a monorepo providing SSR-compatible React components, design tokens, and a Tailwind preset for Tampa Devs web properties.

Project Context

This is a monorepo design system with the following structure:

**Packages:**

**Primary consumers:**

Key Commands

Always use these commands for common tasks:

```bash

pnpm install # Install dependencies

pnpm build # Build all packages (REQUIRED after changes)

pnpm test # Run tests

pnpm storybook # Start Storybook at localhost:6007

pnpm build:storybook # Build static Storybook

```

Creating a New Component

When asked to create a new component, follow these steps:

1. **Create the component file** at `packages/react/src/components/<Name>.tsx`

Use this template structure:

```tsx

'use client';

import { useState } from 'react';

import clsx from 'clsx';

export interface ComponentProps {

/** Component title */

title?: string;

/** Additional CSS class */

className?: string;

/** Child content */

children?: React.ReactNode;

}

export function Component({

title = '',

className,

children,

}: ComponentProps) {

return (

<>

<div className={clsx('td-component', className)}>

{title && <h3 className="td-component__title">{title}</h3>}

<div className="td-component__content">{children}</div>

</div>

<style>{styles}</style>

</>

);

}

const styles = `

.td-component {

/* Glass morphism - signature style */

background: rgba(28, 36, 56, 0.8);

backdrop-filter: blur(12px);

border: 1px solid rgba(255, 255, 255, 0.05);

border-radius: 0.75rem;

padding: 1.5rem;

}

`;

```

2. **Export the component** from `packages/react/src/index.ts`

3. **Create a Storybook story** at `apps/docs/stories/<Name>.stories.tsx`:

```tsx

import type { Meta, StoryObj } from '@storybook/react-vite';

import { Component } from '@tampadevs/react';

const meta: Meta<typeof Component> = {

title: 'Components/Component',

component: Component,

tags: ['autodocs'],

argTypes: {

title: { control: 'text' },

},

args: {

title: 'Example',

},

};

export default meta;

type Story = StoryObj<typeof Component>;

export const Default: Story = {};

```

4. **Create tests** at `packages/react/src/components/<Name>.test.tsx`:

```tsx

import { describe, it, expect } from 'vitest';

import { render, screen } from '@testing-library/react';

import { Component } from './Component';

describe('Component', () => {

it('renders with default props', () => {

render(<Component>Test content</Component>);

expect(screen.getByText('Test content')).toBeInTheDocument();

});

it('renders title when provided', () => {

render(<Component title="Test Title">Content</Component>);

expect(screen.getByText('Test Title')).toBeInTheDocument();

});

});

```

5. **Build the packages**: Run `pnpm build` to compile

Design Token Reference

Use these design tokens consistently:

**Colors:**

**Glass Morphism (Signature Style):**

```css

background: rgba(28, 36, 56, 0.8);

backdrop-filter: blur(12px);

border: 1px solid rgba(255, 255, 255, 0.05);

box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.05),

0 8px 24px -4px rgba(0, 0, 0, 0.15);

```

**Spacing (4px grid):**

**Border Radius:**

Important Patterns

SSR Compatibility

All components MUST use inline `<style>` tags for SSR compatibility:

```tsx

return (

<>

<div className="td-component">{children}</div>

<style>{styles}</style>

</>

);

```

Event Handlers

```tsx

interface Props {

onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;

}

function Component({ onClick }: Props) {

return <button onClick={onClick}>Click me</button>;

}

```

Conditional Rendering

```tsx

function Component({ loading, error, data }: Props) {

if (loading) return <div className="loading">Loading...</div>;

if (error) return <div className="error">{error}</div>;

if (!data) return null;

return <div className="content">{/* render data */}</div>;

}

```

Existing Components

The following components already exist in `packages/react/src/components/`:

Button, EventCard, NewsletterSignup, Header, Footer, Calendar, Carousel, ImageCarousel, VideoEmbed, VideoHero, OpenCollective, SponsorGrid, SponsorCard, PersonCard, PersonTable, Table, Avatar, Icon, Logo, Logo3d, LogoMarquee, Image, ImageText, CtaSection, PromoSection

Reference these files when creating similar components or understanding patterns.

Common Modification Tasks

Adding a property to existing component

1. Add prop to interface in component file

2. Update Storybook argTypes if applicable

3. Run `pnpm build`

Fixing a styling issue

1. Find component in `packages/react/src/components/`

2. Modify the `styles` constant

3. Check Storybook for visual verification

4. Run `pnpm build`

Adding external API integration

Reference `OpenCollective.tsx` for pattern with:

Testing

Run tests with:

```bash

cd packages/react

pnpm test # Run once

pnpm test:watch # Watch mode

```

All tests use Vitest with React Testing Library.

Reference Files

Key Dependencies

Constraints