# Build Reusable Frontend Components

Large frontend components are hard to reuse, test, and maintain. This skill guides Claude, Codex, and Claude Code to create focused React components with clear props and state boundaries.

## Install

```bash
npx skillstore add devanb/frontend-components
```

## Metadata

- Status: approved
- Slug: devanb-frontend-components
- Skillstore revision: r1
- Version status: missing
- Tree hash: a6b27b65c440d8804b617286a98f5e9a7ac817ad31518126ebeb3413f0bd913a
- Author: DevanB
- GitHub username: DevanB
- License: MIT
- Repository: https://github.com/DevanB/lucidlog/tree/master/.claude/skills/frontend-components
- Ref: 0519034dad657fb1f7706e0550e962beeda73fdf
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, filesystem
- Quality score: 79
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/devanb-frontend-components
- Manifest: https://skillstore.pages.dev/api/skills/devanb-frontend-components/manifest

## Capabilities

- Guides creation of focused React components in .tsx and .jsx files.
- Supports clear prop interfaces and TypeScript component types.
- Encourages composition from smaller UI components.
- Helps decide when to keep local state or lift state upward.
- Applies reusable component practices for shadcn/ui and shared component folders.

## Use Cases

- Create Shared UI Components: Use the skill to design reusable buttons, cards, modals, forms, and layout components with clear responsibilities.
- Refactor Large Components: Use the skill to split monolithic React components into smaller components with focused APIs and clearer state ownership.
- Standardize Component APIs: Use the skill to align prop naming, TypeScript types, and composition patterns across shared component directories.

## Prompt Templates

### Create a Basic Component

```
Create a reusable React component for this UI need. Keep one responsibility, clear props, and simple local state.
```

### Review Component Props

```
Review this component API. Suggest clearer prop names, TypeScript types, and defaults while keeping the public interface small.
```

### Refactor for Composition

```
Refactor this large component into smaller React components. Preserve behavior and explain the new ownership boundaries.
```

### Design a Shared Component Pattern

```
Design a shared component pattern for this feature. Include composition choices, state placement, file organization, and usage guidance.
```

## Limitations

- The skill provides guidance, not a runnable component library.
- It depends on project-specific standards that may not be included in the package.
- It does not validate visual accessibility or browser behavior by itself.
- It focuses on React-style components, not every frontend framework.

## Best Practices

- Keep each component focused on one responsibility.
- Prefer explicit prop interfaces over hidden coupling.
- Document shared components with expected usage and boundaries.

## Anti Patterns

- Do not place unrelated layout, data fetching, and business logic in one component.
- Do not expose broad props that leak internal implementation details.
- Do not create shared components before reuse requirements are clear.

## Security Audit

- Audited at: 2026-07-09T12:46:23.233\+00:00
- Summary: Two external command findings are false positives caused by markdown inline code examples. The path traversal finding is confirmed because SKILL.md directs the assistant to load guidance through a ../../../ relative link outside the skill directory.

## Stats

- Views: 193
- Downloads: 8
- Favorites: 0
- Popularity score: 0