# component

> Create a new React component following project conventions

- Author: github-actions[bot]
- Repository: drshooby/drshooby.github.io
- Version: 20260201040205
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-07
- Source: https://github.com/drshooby/drshooby.github.io
- Web: https://mule.run/skillshub/@@drshooby/drshooby.github.io~component:20260201040205

---

---
name: component
description: Create a new React component following project conventions
---

# Component Skill

When creating a new component, follow these conventions:

1. Create the file in `src/components/ComponentName.tsx`
2. Use functional components with TypeScript
3. Follow the MySpace theme - use the CSS variables:
   - `var(--myspace-orange)` - accent color
   - `var(--myspace-pink)` - secondary accent
   - `var(--myspace-purple)` - tertiary accent
   - `var(--myspace-light-blue)` - text color
   - `var(--myspace-dark)` - background
4. Use the `myspace-box` class for container styling
5. Use the `myspace-header` class for gradient text headings
6. Export as a named export

Example structure:
```tsx
export function ComponentName() {
  return (
    <div className="myspace-box p-4">
      <h2 className="text-2xl font-bold myspace-header mb-4">
        Title
      </h2>
      {/* content */}
    </div>
  );
}
```