⚠️Install with caution. This skill has very few installs. Always review the source and verify it on clawhub.ai before installing. Community-built skills run with agent permissions — only install ones you trust.

🖼️ Image Generation

Responsive Layoutv1.0.0

Name: Responsive Layout
Author: wangzhiming1999

responsive-layout

wangzhiming1999

Designs responsive layouts using mobile-first or desktop-first breakpoints, flex/grid, rem/vw units, and handles cross-device and safe area adaptations.

latest

Download Package View on ClawHub

Installs (all time)

Installs (current)

Downloads

644

Stars

CreatedApr 20, 2026

UpdatedMay 11, 2026

Install & Quick Start

Install via ClawdBot CLI:

clawdbot install wangzhiming1999/responsive-layout

Skill Package3 files

📋SKILL.mdmarkdown

Failed to load file.

Quality Score

C49/100

Grade Limited — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.

Market Validation1/35

· 37 downloads (minimal demand)
· No tracked installs (may still have real users via manual install)

Documentation16/25

· SKILL.md present
· Detailed documentation (≥3000 chars)
· Detailed summary

Package Completeness11/15

· skillAssets present (2 files)
· Includes README/AGENTS doc

Security Analysis

💙 Low Risk

UNDOCUMENTED_EXTERNALlow

Calls external URL not in known-safe list

https://github.com/wangzhiming1999/oliver-skill/issues

Audited Apr 21, 2026 · audit v1.0

💡

Usage Guide

Generated May 2, 2026

Frontend developers and UI engineersUX designers focusing on cross-device experiencesTechnical leads managing responsive web projectsintermediate

💡 Application Scenarios

Responsive E-commerce LayoutE-commerce

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.

Dashboard Responsive DesignSaaS / Analytics

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.

Mobile App Web View AdaptationMobile Development

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.

Content-heavy News/Media SiteMedia & Publishing

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.

Enterprise Landing PageMarketing / Enterprise

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.

💼 Business Models

Freemium/Pro UpgradeSubscription or one-time payment for pro features

Offer a basic responsive layout template for free, with advanced customization (custom breakpoints, complex grid systems) as a paid tier.

Consulting & Implementation ServicesHourly or project-based fees

Provide responsive layout consulting and code implementation for clients who need bespoke solutions for their platforms.

Component Library LicensingPer-developer license or enterprise subscription

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.