# Review Frontend Component Fundamentals

Frontend reviews often miss architecture, state, accessibility, and performance issues until components become hard to maintain. This skill guides Claude, Codex, and Claude Code through focused checklist questions and review patterns for component quality.

## Install

```bash
npx skillstore add danielpodolsky/frontend-fundamentals
```

## Metadata

- Status: approved
- Slug: danielpodolsky-frontend-fundamentals
- Skillstore revision: r1
- Version status: missing
- Tree hash: b390d8c4f73dc41c42145fc0e3a232f2d9ef1e31db5a1bb55320cda8e8fe41d3
- Author: DanielPodolsky
- GitHub username: DanielPodolsky
- License: MIT
- Repository: https://github.com/DanielPodolsky/mentor-spec/tree/main/.claude/skills/fundamentals/frontend
- Ref: 34f316ba14ef36c7a620fc09f2676d2429997a77
- 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: 79
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/danielpodolsky-frontend-fundamentals
- Manifest: https://skillstore.pages.dev/api/skills/danielpodolsky-frontend-fundamentals/manifest

## Capabilities

- Reviews React, Vue, and Svelte component code for maintainability concerns.
- Checks component responsibility, file size, prop count, and naming clarity.
- Evaluates state location, prop drilling, context usage, and server state separation.
- Flags performance risks involving memoization, callbacks, re-renders, and lazy loading.
- Prompts accessibility checks for semantic HTML, ARIA usage, and keyboard navigation.
- Provides Socratic questions that help junior developers reason through frontend decisions.

## Use Cases

- Review a pull request: Apply a structured checklist before merging frontend component changes.
- Coach component design: Use guided questions to help a developer identify splitting, state, and naming issues.
- Audit UI maintainability: Assess a component set for repeated patterns that increase complexity and review cost.

## Prompt Templates

### Basic component review

```
Review this frontend component with the frontend-fundamentals checklist. Focus on one responsibility, prop count, and accessibility.
```

### State placement review

```
Review these related components for state management. Identify which state should stay local, move upward, or use server state tools.
```

### Performance and accessibility pass

```
Audit this UI change for avoidable re-renders, heavy rendering work, lazy loading opportunities, semantic HTML, and keyboard access.
```

### Mentor-style review

```
Review this pull request as a mentor. Ask Socratic questions first, then list the highest-impact frontend architecture changes.
```

## Limitations

- Does not run tests, lint commands, or browser checks by itself.
- Does not provide framework-specific configuration files or automated fixes.
- Relies on the reviewer to provide relevant component code and project context.
- References a standards document path that is not included in this skill package.

## Best Practices

- Provide the complete component and nearby callers so the review can judge responsibility boundaries.
- Ask for the highest-impact findings first when reviewing large pull requests.
- Pair checklist results with project conventions before requesting code changes.

## Anti Patterns

- Using the checklist as a rigid rule without considering product context.
- Requesting broad reviews without sharing the component code or user flow.
- Treating performance suggestions as required before measuring real impact.

## Security Audit

- Audited at: 2026-07-06T09:26:51.09\+00:00
- Summary: All eight static findings are false positives caused by Markdown fenced examples in SKILL.md, not Ruby or shell backtick execution. The skill is prose guidance for frontend code review, and no semantic evidence of prompt injection, data exfiltration, or unsafe operational intent was found.

## Stats

- Views: 181
- Downloads: 19
- Favorites: 0
- Popularity score: 0