Skills responsive-design

📦

responsive-design

Name: responsive-design
Author: wshobson

Content revision r1 Safe ⚙️ External commands🌐 Network access

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.

Supports: Claude Codex Code(CC)

📊 75 Adequate

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request

Review the Skillstore skill "responsive-design" from https://skillstore.io/skills/wshobson-responsive-design.md and its manifest at https://skillstore.io/api/skills/wshobson-responsive-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/wshobson-responsive-design.md Signed manifest GET /api/skills/wshobson-responsive-design/manifest Signed lockfile GET /api/skills/wshobson-responsive-design/lockfile

Test it

Using "responsive-design". A product grid uses four fixed columns and overflows on phones.

Expected outcome:

The skill would recommend a mobile-first auto-fit grid, a minimum card width, fluid gaps, and testing at narrow content widths.

Using "responsive-design". A dashboard card works in the main area but fails inside a narrow sidebar.

Expected outcome:

The skill would suggest container queries so the card adapts to its parent width instead of the viewport.

Using "responsive-design". A data table is unreadable on small screens.

Expected outcome:

The skill would compare horizontal scrolling with a mobile card layout and recommend the option that preserves scanning and labels.

Security Audit

Safe

v5 • 7/8/2026 Open versioned report

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.

Files scanned

2,221

Lines analyzed

Review items

False positives ignored

No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.

Audited by: codex View Audit History →

Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report

Copy report link

https://skillstore.io/skills/wshobson-responsive-design/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/wshobson-responsive-design/security.svg)](https://skillstore.io/skills/wshobson-responsive-design?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/wshobson-responsive-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-responsive-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/wshobson-responsive-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Academic citations (APA · BibTeX · CFF)

APA citation

wshobson. (2026). responsive-design security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-responsive-design/audits/5

BibTeX citation

@techreport{wshobson-wshobson-responsive-design-2026,
  author = {wshobson},
  title = {responsive-design security audit report (audit version 5)},
  institution = {Skillstore},
  year = {2026},
  number = {5},
  url = {https://skillstore.io/skills/wshobson-responsive-design/audits/5},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "responsive-design security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
  - name: "wshobson"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/wshobson-responsive-design/audits/5"
identifiers:
  - type: other
    value: "skillstore:wshobson-responsive-design:audit:5"
    description: "Skillstore immutable audit report identifier"

Compare variants

2 installable variants

Each author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.

Why this variant is first

Highest Skillstore Score

Author / source Skillstore Score Evidence Confidence Skillstore usage Updated

supercent-io Recommended

supercent-io-responsive-design

Skillstore Score 77

Evidence Confidence High

Skillstore usage 26

Updated

2026-08-21

wshobson Current

wshobson-responsive-design

Skillstore Score 75

Evidence Confidence High

Skillstore usage 18

Updated

2026-08-21

Skillstore Score

Why this score Evidence Confidence: High

Architecture

Maintainability

Content

Community

Spec Compliance

What You Can Build

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.

Try These Prompts

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.

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.

Avoid

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.

Frequently Asked Questions

What does this skill help build?

It helps build responsive layouts, components, typography, navigation, images, tables, and design system breakpoint rules.

Does it use container queries?

Yes. It includes container query patterns for cards, grids, dashboards, navigation, and Tailwind-style workflows.

Can it work with React?

Yes. The examples include TSX component patterns for responsive cards, grids, navigation, images, and tables.

Does it replace browser testing?

No. It gives implementation guidance, but real viewport, device, accessibility, and regression testing are still needed.

How does it choose breakpoints?

It favors content-based breakpoints, mobile-first rules, feature queries, and fluid layout techniques over device-only assumptions.

Can it help with Tailwind CSS?

Yes. It includes Tailwind breakpoint concepts and container query examples that can guide utility-based implementations.

Developer Details

Author

wshobson

License

MIT

Skillstore revision

Version notice

The author did not declare a version.

Repository

https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/responsive-design/

Ref

64ca8af0f54a325752f08bd54e52151061ea659a

Maintenance freshness

7/21/2026

Usage

12 downloads · 201 views

File structure

📁 references/

📄 breakpoint-strategies.md

📄 container-queries.md

📄 fluid-layouts.md

📄 SKILL.md

responsive-design

Install with my Agent

Agent-readable resources

Test it

Security Audit

Risk Factors

Copy report link

Markdown badge

HTML badge

Embed card

APA citation

BibTeX citation

CITATION.cff

Compare variants

Skillstore Score

What You Can Build

Modernize a Marketing Page

Standardize Design System Breakpoints

Improve Data Views on Mobile

Try These Prompts

Best Practices

Avoid

Frequently Asked Questions

Developer Details