Skip to the rows

agentsclimarketplace

Frontend responsive design

Skill ryanbaumann/fieldwork/.agents/skills/frontend-responsive-design

Fieldwork by Ryan Baumann: developer tools, Field Notes, working Labs, and agent evals.

Install

npx -y skills add ryanbaumann/fieldwork --skill frontend-responsive-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Design and review responsive frontend layouts, styling, accessibility, interaction behavior, Tailwind usage, and visual QA for the portfolio and demo apps. Use before changing layout, CSS, semantic HTML, map controls, responsive behavior, or other perceptible frontend interactions.

SKILL.md

3.7 KB, as published. Nobody here has run it

Frontend Responsive Design Skill

Use this skill for tasks involving layout, styling, accessibility, responsive behavior, Tailwind utility usage, HTML structure, visual QA, or frontend interaction design in either app.

Primary References

Prefer current platform documentation for behavior questions:

Responsive web design basics: https://web.dev/articles/responsive-web-design-basics
MDN container queries: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
MDN responsive images: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/HTML/Responsive_images
WCAG quick reference: https://www.w3.org/WAI/WCAG22/quickref/
Tailwind CSS docs when editing Tailwind-heavy markup: https://tailwindcss.com/docs

Workflow

Determine the app and styling system:
- demos/strava-explorer/ uses Vite and app-local CSS.
- demos/aqi-map/ uses Vite and app-local CSS.
Inspect the relevant HTML and JavaScript before changing classes or structure.
Start from the smallest supported viewport and progressively enhance for larger containers/viewports.
Prefer resilient modern CSS:
- clamp() for fluid spacing/type with limits.
- CSS Grid/Flexbox with minmax(), auto-fit, and sensible intrinsic sizing.
- Container queries for component-level changes when the component can appear in multiple page contexts.
- Viewport media queries for major page-shell changes.
Maintain accessibility while changing visuals:
- Explicit labels for inputs and controls.
- Meaningful alt text for images.
- Semantic buttons/links instead of clickable divs.
- Visible focus states and keyboard operability.
- Distinct hover, focus, active, selected, disabled, loading, and error states. Render related states together: a hover treatment that copies the focus ring makes keyboard focus stop carrying information.
- Announced loading/error states when practical.
Account for map UX: use 100svh or 100dvh instead of a desktop 100vh assumption, include safe-area padding, and keep interactive targets at least 44×44 CSS pixels. Bottom sheets need a useful default state, an independently scrollable content region, and drag handling that does not scroll the page underneath or steal map gestures. Avoid covering required map controls. For custom map markers, keep text high-contrast and thumbnails legible over satellite/photorealistic backgrounds.
If animation or camera behavior changes, respect prefers-reduced-motion where practical.
Validate with the relevant build command and, for perceptible UI changes, use a browser/screenshot check when available. Exercise the affected interaction states in light and dark schemes at narrow and wide viewports; do not approve a state from its isolated screenshot.

Review Checklist

No horizontal scrolling at common mobile widths unless intentionally part of a map canvas.
Form controls are reachable by keyboard and have accessible names.
Interactive targets are at least 44×44 CSS pixels or have an equivalent 44×44 hit area.
Mobile map shells remain usable with collapsing browser chrome, safe areas, an open panel, and page/map gestures.
Text remains legible over map backgrounds, custom markers, popovers, and side panels.
Layout works with long activity names, empty states, loading states, and error messages.
External CSS frameworks do not override map internals unexpectedly.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.