responsive-layoutDesigns responsive layouts using mobile-first or desktop-first breakpoints, flex/grid, rem/vw units, and handles cross-device and safe area adaptations.
Install via ClawdBot CLI:
clawdbot install wangzhiming1999/responsive-layoutGrade Limited — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://github.com/wangzhiming1999/oliver-skill/issuesAudited Apr 21, 2026 · audit v1.0
Generated May 2, 2026
Designing a mobile-first, responsive layout for an e-commerce site with product grids, navigation, and checkout flows using Flex and Grid, ensuring cross-device consistency.
Creating a responsive dashboard with complex data visualizations and control panels that adapt from desktop to tablet and mobile, using Grid for 2D layout and rem for scaling.
Adapting a web-based interface for mobile app embedding, handling safe areas, touch targets (44x44px), and orientation changes with env(safe-area-inset) and media queries.
Building a responsive layout for a news site with article lists, images, and sidebars, using Flex for card rows and Grid for multi-column text, with clamp() for fluid typography.
Designing a responsive landing page with hero sections, feature grids, and CTA buttons, employing desktop-first strategy and CSS variables for consistent spacing and breakpoints.
Offer a basic responsive layout template for free, with advanced customization (custom breakpoints, complex grid systems) as a paid tier.
Provide responsive layout consulting and code implementation for clients who need bespoke solutions for their platforms.
Develop and license a set of responsive UI components (e.g., nav, grids, cards) with built-in best practices for rem, vw, and mobile-first design.
💬 Integration Tip
Use CSS variables for breakpoints and spacing tokens for consistency; integrate with Tailwind or custom component library for faster adoption.
Scored Apr 21, 2026
Generate images using multiple AI models — Midjourney (via Legnext.ai), Flux, Nano Banana Pro (Gemini), Ideogram, Recraft, and more via fal.ai. Intelligently...
Perform image manipulation tasks like background removal, resizing, format conversion, rounding corners, watermarking, and color adjustments using ImageMagic...
Improves the quality of images, especially screenshots, by enhancing resolution, sharpness, and clarity. Perfect for preparing images for presentations, docu...
A specialized skill for generating high-quality, consistent children's bilingual picture books using 'banana nano'. Supports 18 visual styles across 4 catego...
从图片中提取表格数据并输出为表格和CSV格式；当用户需要从图片提取表格数据、识别表格内容或导出CSV时使用；触发条件：试验图片表格提取，图片表格提取，试验图片数据提取，提取图片数据，提取试验数据
Generate AI videos, images and speech (text-to-video, image-to-video, reference-to-video, speech-to-video, animate, text-to-image, image-to-image, image edit, text-to-speech), bring your own LoRA models, and generate AI product/model photography for e-commerce (Image Studio) via the Phosor AI platform. Use when the user wants to create videos or images from text prompts, animate images, generate lip-synced video from audio, synthesize speech from text, generate images with a custom LoRA, generate product photography or model/clothing photography for e-commerce listings, or manage generation jobs.