# Build Responsive Interfaces

Responsive interfaces often break across cards, grids, tables, and navigation. This skill supplies practical CSS and React patterns for fluid, component-aware layouts.

## Install

```bash
npx skillstore add wshobson/responsive-design
```

## Metadata

- Status: approved
- Slug: wshobson-responsive-design
- Skillstore revision: r1
- Version status: missing
- Tree hash: f363f9a0426508d7b7f9229b85228f22ec24930820d3a378be9fe4dcc0b2145d
- Author: wshobson
- GitHub username: wshobson
- License: MIT
- Repository: https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/responsive-design/
- Ref: 64ca8af0f54a325752f08bd54e52151061ea659a
- 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, network
- Quality score: 75
- Public page: https://skillstore.pages.dev/skills/wshobson-responsive-design
- Manifest: https://skillstore.pages.dev/api/skills/wshobson-responsive-design/manifest

## Capabilities

- Designs mobile-first breakpoint strategies based on content needs.
- Applies container queries for component-level responsive behavior.
- Creates fluid typography and spacing scales with CSS clamp\(\).
- Builds responsive CSS Grid, Flexbox, navigation, image, and table patterns.
- Recommends fallbacks, feature queries, and viewport unit choices.

## Use Cases

- Modernize a Marketing Page: Turn fixed-width sections into fluid layouts with responsive typography, images, and grid behavior.
- Standardize Design System Breakpoints: Define practical breakpoint tokens, container query rules, and layout guidance for reusable components.
- Improve Data Views on Mobile: Adapt dense tables and dashboards into scrollable, card-based, or container-aware layouts.

## Prompt Templates

### Make a Page Responsive

```
Review this page and make it responsive for mobile, tablet, and desktop. Use mobile-first CSS and explain the main layout changes.
```

### Add Fluid Type and Spacing

```
Create a fluid typography and spacing scale for this interface. Use clamp() with clear minimum and maximum values.
```

### Convert to Container Queries

```
Refactor these reusable components to use container queries where appropriate. Keep viewport media queries only where they are still needed.
```

### Audit a Responsive System

```
Audit this responsive design system for breakpoint quality, overflow risk, fluid scaling, component reuse, and fallback behavior. Provide prioritized fixes.
```

## Limitations

- Does not test layouts on real devices unless the host agent runs browser checks.
- Does not replace accessibility, performance, or visual regression testing.
- Does not provide a complete design system by itself.
- Requires project-specific content, components, and browser support targets.

## Best Practices

- Start from mobile styles, then enhance for wider screens and richer containers.
- Set breakpoints where content breaks, not only at common device widths.
- Use fluid values with minimum and maximum bounds for type, spacing, and media.

## Anti Patterns

- Do not rely on fixed desktop widths and patch mobile behavior afterward.
- Do not create many device-specific breakpoints without content reasons.
- Do not use 100vh on mobile without considering dynamic viewport units.

## Security Audit

- Audited at: 2026-07-08T13:31:37.269\+00:00
- Summary: AI review found the static matches to be false positives in documentation examples. The skill contains responsive design guidance, CSS and TSX snippets, and resource links, with no evidence of command execution, credential material, network behavior, reconnaissance, prompt injection, or malicious intent.

## Stats

- Views: 201
- Downloads: 18
- Favorites: 0
- Popularity score: 0