# responsive-layout

> Scans frontend files, audits them for responsive layout issues, and applies minimal CSS/className fixes to prevent overflow at small window or mobile sizes.

- Skill: `nagarenegishi/responsive-layout` (Agent Skill)
- Install (CLI): `npx skillmds add nagarenegishi/responsive-layout`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nagarenegishi/responsive-layout/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, CSS & Styling, Web Performance
- Tags: Audit, Css, Fix, Frontend, Mobile, Responsive Layout, Tailwind
- Author: NagareNegishi (https://skillmd.com/u/nagarenegishi)
- Updated: 2026-08-22
- Page: https://skillmd.com/skills/nagarenegishi/responsive-layout

---


# Responsive Layout

## State files

- `.claude/skills/responsive-layout/files.json` — frontend file inventory
- `.claude/skills/responsive-layout/issues.md` — open issue list

Outside of fix mode, these two files are the ONLY files this skill may write.
Fix mode may additionally edit files listed in `files.json`.

## Constraints (all modes)

- No functional changes — className / CSS edits only
- No new npm dependencies
- Match the project's existing styling system — do not introduce a new one
- Do not run git commands or dev servers — suggest commands in a code block for the user to run

## Mode selection

Argument `scan`, `audit`, or `fix` selects the mode.
No argument: ask which mode to run — do not read any files first.

## Mode: scan — build or update the file inventory

1. Detect the frontend root (first scan only): find a `package.json` with a UI framework
   dependency; the frontend root is that package's source folder (usually `src/`).
   If none or several match, ask the user. Store the result in `files.json` under
   `"config"` and reuse it on later runs.
2. Glob markup and style files under the root: `**/*.{tsx,jsx,vue,svelte,html}` and
   `**/*.{css,scss}`. Keep files that render styled markup (pages, components, layouts,
   global stylesheets). Exclude folders holding only types, API clients, hooks, state
   stores, tests, or generated code — read a sample file when unclear from the folder name.
3. Read `files.json` (missing → `{}`). Add new files with `"audited": null`, keep existing entries unchanged, delete entries whose file no longer exists.
4. Write `files.json`. Report what changed.

Schema — file paths relative to the detected root:
```json
{
  "config": { "root": "frontend/src" },
  "files": { "components/Board.tsx": { "audited": "2026-07-03" } }
}
```

## Mode: audit — find issues, record only, fix nothing

1. Read `files.json`. If missing or empty, run scan mode first.
2. Process files with `"audited": null` one at a time: read the file, apply the checklist, append findings to `issues.md`, set the file's `audited` date. (Re-audit all files only if the user explicitly asks.)
3. Checklist — names below are Tailwind; look for the equivalent pattern in whatever
   styling system the project uses. Flag any of:
   - Fixed widths/heights on containers: `w-[Npx]`, `min-w-[Npx]`, `w-96`+, inline `style` widths
   - Multi-column layout without responsive prefixes: `grid-cols-N` (N ≥ 2) or side-by-side flex rows with no `sm:`/`md:` variant
   - Flex rows of multiple fixed-size children without `flex-wrap`
   - Tables or wide content without an `overflow-x-auto` wrapper
   - `absolute`/`fixed` positioning with hard pixel offsets
   - Dialogs/popovers with fixed width and no `max-w-*` viewport fallback
   - Large fixed horizontal padding (`px-10`+) on page-level containers
   - Hardcoded `px` widths in CSS files with no media query
4. Report what was found and what remains unaudited.

Issue entry format in `issues.md` — one `##` block per issue, located by
component + element description + a short class snippet (NOT line numbers):

```markdown
## frontend/src/components/Board.tsx — board column container
- Snippet: `className="grid grid-cols-5 gap-4"`
- Risk: 5 fixed columns overflow below ~1024px
- Suggestion: `grid-cols-1 sm:grid-cols-2 lg:grid-cols-5`
```

## Mode: fix — resolve one issue per pass

1. Read `issues.md` with `limit: 30` — only enough to get the FIRST issue block.
2. Read the target file, locate the element via the snippet. If the snippet no longer matches, report it and remove the stale entry instead of guessing.
3. Apply the smallest change that resolves the risk — do not restyle surrounding code.
4. Remove the fixed issue's block from `issues.md`.
5. Show what changed and why, state how many issues remain, then STOP and wait for approval before the next fix. Suggest the user verify at a narrow window width with the project's frontend dev command.