---
title: "create component"
description: "Create a frontend component with proper structure, types, and accessibility."
type: skill
canonical_url: https://claudary.paisolsolutions.com/skills/create-component
source: "Claudary"
difficulty: intermediate
author: "Claude Code Knowledge Pack"
date: 2026-07-10T11:19:05.321Z
license: CC-BY-4.0
attribution: "create component — Claudary (https://claudary.paisolsolutions.com/skills/create-component)"
---

# create component
Create a frontend component with proper structure, types, and accessibility.

## Overview

Create a frontend component with proper structure, types, and accessibility.

## Steps


1. Determine the component specification:
2. Detect the project's frontend framework:
3. Create the component file(s):
4. Add accessibility attributes:
5. Add responsive styling:
6. Create a test file for the component.
7. Export the component from the module index.

## Format


```
Component: <name>
Framework: <React|Vue|Svelte|etc>
Files:
  - <component file>
```


## Rules

- Follow the project's existing component patterns.
- Every interactive element must be keyboard accessible.
- Use semantic HTML elements over generic divs.

---

Source: [Claudary](https://claudary.paisolsolutions.com/skills/create-component) · https://claudary.paisolsolutions.com