← Back to Skills Marketplace
1788
Downloads
0
Stars
19
Active Installs
1
Versions
Install in OpenClaw
/install responsive-design
Description
Implement responsive layouts using container queries, fluid typography, CSS Grid, mobile-first breakpoints, responsive images, and adaptive navigation.
Usage Guidance
This skill appears to be a documentation/tutorial package for responsive CSS and is coherent with its name. However: 1) The registry metadata lacks a homepage and the owner is an unfamiliar ID — verify the publisher before trusting it. 2) The README suggests running npx commands that will fetch code from the network; do not run npx install/add commands unless you review the remote repository or package contents first. 3) Because this is instruction-only, there are no requested secrets or binaries, but installing via clawhub/npx will pull code you should audit. If you want to proceed safely, inspect the GitHub repo (or package) referenced by the install instructions and confirm the source is trustworthy.
Capability Analysis
Type: OpenClaw Skill
Name: responsive-design
Version: 1.0.0
The skill bundle, including `_meta.json`, `SKILL.md`, `README.md`, and all `references/*.md` files, contains only documentation and code examples related to responsive web design (CSS, HTML/JSX, client-side JavaScript). There is no evidence of malicious intent, such as data exfiltration, unauthorized command execution, persistence mechanisms, or prompt injection attempts against the AI agent. The installation commands are standard for the OpenClaw ecosystem, and the embedded code snippets are purely illustrative of web development techniques.
Capability Assessment
Purpose & Capability
The skill's files (SKILL.md, README, reference docs) are documentation and examples for responsive CSS patterns which matches the skill name. There are no unrelated environment variables, binaries, or config-path requirements requested. Note: the skill has no short description field in metadata, but the bundled docs make its purpose clear.
Instruction Scope
Runtime instructions are documentation and code examples (CSS/JS/TSX). They do not instruct the agent to read system files, credentials, or transmit user data to external endpoints. The only actionable install instruction is an npx-based installer example; the SKILL.md itself does not request sensitive data.
Install Mechanism
There is no formal install spec included in the skill bundle (it's instruction-only). The README/SKILL.md suggest using 'npx clawhub@latest install responsive-design' and an 'npx add https://github.com/…/tree/…' example. Because npx commands fetch and run remote packages, a user should inspect the remote repository or package before executing these commands. The skill itself does not embed downloads or archives in the bundle.
Credentials
The skill requests no environment variables, credentials, or config paths. The scope of access requested is proportionate for a documentation/teaching skill.
Persistence & Privilege
always:false (no permanent force-install); user-invocable and model-invocation allowed (platform defaults). The skill does not request elevated privileges or system-wide config changes in its files. Autonomous invocation alone is not a concern here given the skill's documentation-only nature.
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install responsive-design - After installation, invoke the skill by name or use
/responsive-design - Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.0
Initial release: Modern, comprehensive responsive design techniques in CSS and React.
- Includes patterns for container queries, fluid typography, CSS Grid/Flexbox, and mobile-first breakpoints.
- Provides fluid spacing and typography scales using clamp().
- Features responsive images (art direction with <picture> and srcset) and navigation components.
- Demonstrates responsive grids and tables, with Tailwind CSS-ready code samples.
- Guides on common adaptive design scenarios for React and CSS.
Metadata
Frequently Asked Questions
What is Responsive Design?
Implement responsive layouts using container queries, fluid typography, CSS Grid, mobile-first breakpoints, responsive images, and adaptive navigation. It is an AI Agent Skill for Claude Code / OpenClaw, with 1788 downloads so far.
How do I install Responsive Design?
Run "/install responsive-design" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is Responsive Design free?
Yes, Responsive Design is completely free (open-source). You can download, install and use it at no cost.
Which platforms does Responsive Design support?
Responsive Design is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created Responsive Design?
It is built and maintained by wpank (@wpank); the current version is v1.0.0.
More Skills