# Scaffold Accessible React Components

Building consistent component files across web and native projects takes repeated design work. This skill structures components, types, styles, tests, stories, and exports.

## Install

```bash
npx skillstore add sickn33/frontend-mobile-development-component-scaffold
```

## Metadata

- Status: approved
- Slug: sickn33-frontend-mobile-development-component-scaffold
- Skillstore revision: r2
- Version status: missing
- Tree hash: 6b3ebe9f602269b8783a8bdc3a3f5503aed38f1e22da4e284460a839bb713a55
- Author: sickn33
- GitHub username: sickn33
- License: MIT
- Repository: https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-mobile-development-component-scaffold
- Ref: 88a8e9a07f4c54ab105c1c41b6267c287146b07b
- 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
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/sickn33-frontend-mobile-development-component-scaffold
- Manifest: https://skillstore.pages.dev/api/skills/sickn33-frontend-mobile-development-component-scaffold/manifest

## Capabilities

- Analyzes component names, types, props, state, hooks, styling, and target platforms.
- Structures functional React components with TypeScript prop interfaces and exports.
- Provides a React Native component pattern with typed props and StyleSheet styles.
- Outlines Testing Library tests for rendering, interaction, and accessibility.
- Generates patterns for CSS Modules, styled-components, Tailwind, and Storybook stories.
- Includes accessibility roles and labels when the requested component needs them.

## Use Cases

- Create a Design System Component: Define a typed, styled, tested component with stories and accessibility behavior.
- Start a React Native Feature: Produce a consistent native component structure with props, styles, and test guidance.
- Standardize Team Scaffolding: Turn component requirements into a repeatable file set for team review.

## Prompt Templates

### Basic Web Component

```
Create a TypeScript React Button with label, disabled, and onClick props. Use CSS Modules and include a basic test.
```

### Accessible Form Control

```
Scaffold an accessible EmailField component with validation states, helper text, CSS Modules, Testing Library tests, and Storybook stories.
```

### React Native Data Card

```
Create a React Native ProfileCard with typed data, loading and error states, press handling, StyleSheet styles, and interaction tests.
```

### Universal Component Architecture

```
Design a universal SearchPanel for web and native. Separate shared logic, define platform adapters, include accessibility behavior, tests, stories, and export structure.
```

## Limitations

- The examples are architectural templates and omit several helper method implementations.
- Generated components still require project-specific validation, dependency checks, and test execution.
- The React Native example uses a basic View structure and may need platform-specific interaction controls.
- Accessibility roles, labels, and tests must be reviewed against the final component behavior.

## Best Practices

- Provide explicit props, states, platform targets, and styling requirements before generation.
- Review generated accessibility semantics against actual interactions and content.
- Run formatting, type checking, tests, and Storybook within the target project.

## Anti Patterns

- Do not accept placeholder component content as a completed implementation.
- Do not copy project aliases, hooks, or dependencies without confirming they exist.
- Do not reuse web roles and interactions on React Native without platform review.

## Security Audit

- Audited at: 2026-07-23T23:00:54.827\+00:00
- Summary: All 46 external-command matches are TypeScript template literals or Markdown code fences, with no command runner or shell invocation. The array join is ordinary source generation, and no prompt injection or malicious intent was found.

## Stats

- Views: 80
- Downloads: 10
- Favorites: 0
- Popularity score: 0