# New Component

> Create a new Astro component with TypeScript props Use when this capability is needed.

- Skill: `tomevault-io/new-component-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/new-component-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/new-component-2/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/new-component-2

---


Create a new Astro component named `$ARGUMENTS`.

## Instructions

1. Determine the appropriate location:
   - General component: `src/components/$ARGUMENTS.astro`
   - Audit-specific: `src/components/audit/$ARGUMENTS.astro`

2. Use this template:

```astro
---
interface Props {
  // Define props with TypeScript
  label: string;
  value?: number;
}

const { label, value = 0 } = Astro.props;
---

<div class="component-wrapper">
  <span class="label">{label}</span>
  <span class="value">{value}</span>
</div>

<style>
  .component-wrapper {
    /* Component styles - use CSS variables from global.css */
  }
</style>
```

3. Run build to verify: `npm run build`

## Checklist
- TypeScript interface for props
- Default values for optional props
- Semantic HTML elements
- Accessible (aria-labels if interactive)
- Responsive design
- Dark/light theme support via CSS variables

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/zatsit-oss) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->