Frontend Responsive

Implement responsive layouts using Material-UI's grid system for mobile devices.

Updated Aug 23, 2026

Search Tags:#web development #frontend #responsive design #UI/UX #mobile-first #Material-UI #CSS media queries #adaptive design

One-click install

npx skills add https://github.com/alenon/portfolios --skill frontend-responsive-alenon

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: Frontend Responsive
Source: https://github.com/alenon/portfolios/tree/main/.claude/skills/frontend-responsive
Command: npx skills add https://github.com/alenon/portfolios --skill frontend-responsive-alenon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures that frontend designs adapt seamlessly to various screen sizes and devices, providing an optimal user experience across desktops, tablets, and mobile phones. It eliminates the complexity of manual responsive adjustments, saving development and testing time.

Core Features & Use Cases

Adaptive Layouts: Guides AI to implement flexible layouts using CSS media queries or responsive frameworks like Material-UI's grid system.
Cross-Device Compatibility: Ensures UI elements render correctly and are fully usable on any device, expanding your application's reach.
Use Case: When designing a new page, this skill ensures the AI uses Material-UI's responsive grid system to make the layout fluid and accessible on mobile, without requiring manual breakpoint adjustments.

Quick Start

Use the Frontend Responsive skill to adjust the layout of the PortfolioOverview page in frontend/src/pages/PortfolioOverview.tsx to ensure it displays correctly on mobile devices.