skills.rest
phananhtuan09
phananhtuan09COMMUNITY
Explore all skills by this author →
GitHub

design-responsive

Generate mobile-first responsive design guidelines for multi-device UIs.

1|Updated Oct 30, 2025
Search Tags:#typography#design#ui#mobile#responsive#breakpoints
One-click install
npx skills add https://github.com/phananhtuan09/ai-agent-workflow --skill design-responsive
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-responsive
Source: https://github.com/phananhtuan09/ai-agent-workflow/tree/main/.opencode/skill/design-responsive
Command: npx skills add https://github.com/phananhtuan09/ai-agent-workflow --skill design-responsive

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides mobile-first, responsive design guidance and patterns to help build UIs that adapt across devices, saving time and ensuring consistent experiences.

Core Features & Use Cases

  • Mobile-first guidelines for typography, spacing, and layouts across breakpoints.
  • Pattern catalog for responsive layouts, navigation, and component behavior across mobile, tablet, and desktop.
  • Use Case: When designing a web app, apply predefined breakpoints and fluid typography to ensure a cohesive UI on 360px to 1440px wide screens.

Quick Start

Describe your target devices and design goals to auto-generate responsive UI guidelines.

Frequently Asked Questions about design-responsive

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate mobile-first responsive design guidelines for multi-device UIs?▼

To generate responsive design guidelines, provide your target devices and design goals to automatically output mobile-first typography, spacing, and layout patterns across mobile, tablet, and desktop breakpoints.

What are the best responsive breakpoints and fluid typography rules for scaling UI from 360px to 1440px?▼

For screens from 360px to 1440px, applying predefined mobile-first breakpoints and fluid typography ensures a cohesive UI that scales layouts and text beautifully across mobile, tablet, and desktop devices.

How do I adapt navigation and component behavior across mobile, tablet, and desktop breakpoints?▼

You can adapt component behavior by applying a responsive pattern catalog that defines navigation and layout adjustments across mobile, tablet, and desktop breakpoints for consistent multi-device experiences.

Does this responsive design approach support touch optimization for mobile-first web apps?▼

Yes, this mobile-first approach supports touch optimization by generating responsive UI guidelines that include touch targets and interaction patterns tailored for multi-device web apps.

Do I need a specific framework to apply these responsive component patterns?▼

No specific framework is required to apply these responsive component patterns, as the guidelines generate framework-agnostic breakpoints and fluid typography rules that integrate into any web app project.

Related Skills

Explore More Design & Creative Skills→
apexbusiness-systemsapexbusiness-systems
4

test-driven-development

Define and enforce test-driven development workflows with failing tests first.

Community
Basic
iButtersiButters
3

responsive-design

Creates mobile-first web layouts with fluid typography, breakpoints, and container queries.

Community
Advanced
augustoheissaugustoheiss

agency-ui-designer

Create tokenized UI design systems with WCAG AA accessibility and developer handoff packages.

Community
Advanced
RamonsDkaRamonsDka
1

responsive-design

Apply container queries, fluid typography, and grid layouts for cross-device interfaces.

Community
Intermediate