# Build Responsive Frontend Interfaces

Frontend layouts often break across mobile, tablet, and desktop screens. This skill guides responsive React, Tailwind, and CSS implementation with mobile-first patterns.

## Install

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

## Metadata

- Status: approved
- Slug: devanb-frontend-responsive
- Skillstore revision: r1
- Version status: missing
- Tree hash: 1d4a28c43f87ac5db083466acd4d6955b3bd092bd2b3d630a80104992ad8494d
- Author: DevanB
- GitHub username: DevanB
- License: MIT
- Repository: https://github.com/DevanB/lucidlog/tree/master/.claude/skills/frontend-responsive
- 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: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/devanb-frontend-responsive
- Manifest: https://skillstore.pages.dev/api/skills/devanb-frontend-responsive/manifest

## Capabilities

- Guide React component layout updates for .tsx and .jsx files.
- Apply Tailwind responsive utilities across standard breakpoints.
- Plan CSS Grid and Flexbox layouts for changing viewport sizes.
- Improve navigation, typography, spacing, and tap targets for smaller screens.
- Check responsive behavior across mobile, tablet, and desktop breakpoints.

## Use Cases

- Adapt React Screens: Make existing React screens adapt cleanly across viewport sizes.
- Standardize Components: Review components for consistent breakpoints, spacing, typography, and touch targets.
- Plan Responsive Checks: Create responsive test scenarios for mobile, tablet, and desktop layouts.

## Prompt Templates

### Make a Component Responsive

```
Review this React component and update the layout for mobile, tablet, and desktop screens. Keep the existing design intent.
```

### Convert Fixed Spacing

```
Replace fixed pixel-heavy layout choices with relative units and responsive spacing. Explain the main layout changes.
```

### Improve Navigation Behavior

```
Adapt this navigation menu for small screens with touch-friendly controls, clear breakpoints, and accessible interaction states.
```

### Audit a Full Screen

```
Audit this page for responsive risks across React structure, Tailwind classes, typography, media assets, and breakpoint behavior. Prioritize fixes by impact.
```

## Limitations

- Does not include the external responsive standards file referenced by the skill.
- Does not run browser tests by itself.
- Does not provide visual assets or design system tokens.
- Depends on the host project for framework and CSS configuration.

## Best Practices

- Start with mobile layout before adding tablet and desktop breakpoints.
- Use relative units and fluid containers when fixed pixels would break layouts.
- Test key workflows at mobile, tablet, and desktop widths.

## Anti Patterns

- Adding desktop-only styles before defining a usable mobile layout.
- Using fixed widths that force horizontal scrolling on small screens.
- Reducing visual size without checking tap targets and readable typography.

## Security Audit

- Audited at: 2026-07-09T11:07:30.507\+00:00
- Summary: Most static findings are false positives caused by frontend terms and inline Markdown backticks. The relative link at SKILL.md line 28 is confirmed because it traverses outside the skill package and depends on an external local file. No prompt injection or data exfiltration intent was found.

## Stats

- Views: 218
- Downloads: 13
- Favorites: 0
- Popularity score: 0