Skills
.Work. You
Rest

Adaptador responsive

Community

Make UIs look great everywhere.

Design & Creative#mobile-first#responsive#ui adaptation#css breakpoints#primeflex#prime-ng
AuthorRodrigoVeraCandia
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill transforms desktop-first or non-responsive UI components and views into mobile-first, adaptive designs, ensuring a seamless user experience across all devices.

Core Features & Use Cases

  • Responsive Grid Conversion: Adapts fixed grids to use PrimeFlex's mobile-first breakpoints.
  • Table to Card Transformation: Renders tables as stacked cards on smaller screens for better readability.
  • Adaptive Forms & Dialogs: Adjusts form layouts and dialog sizes based on screen width.
  • Use Case: You have a complex product listing page designed for desktops. This Skill will refactor it so that on mobile, products stack vertically in cards, and navigation elements collapse into a hamburger menu.

Quick Start

Apply responsive design principles to the provided product list component, ensuring it adapts gracefully from mobile to desktop views.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: Adaptador responsive
Download link: https://github.com/RodrigoVeraCandia/Template_verona/archive/main.zip#adaptador-responsive

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.