skill CX Codex

responsive-design · manutej — Claude Code skill: what it does, how to install

Q: How to install responsive-design in Claude Code?

Run `npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a claude-code`. You can also save the file directly to `~/.claude/skills/responsive-design/SKILL.md`.

Q: What breakpoint strategy does this skill follow?

It uses progressive enhancement via `@media (min-width: ...)` starting above mobile baselines, anchoring breakpoints to content requirements and standard screen widths.

Guides coding agents in mobile-first responsive layout work using CSS Grid, Flexbox, and fluid sizing. Useful when interfaces need consistent adaptation across screens.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a claude-code

Open on GitHub

What responsive-design does

The skill instructs the agent to construct layouts starting from mobile viewports with min-width media queries. This avoids desktop-first overrides. Base styles start at 320px, then progressively adapt as the screen widens.

Included patterns cover Flexbox flows and multi-column CSS Grid templates with named areas. Sizing relies on clamp() for fluid scaling. It also addresses pointer detection queries like hover capabilities and orientation adjustments.

Heavy reliance on modern CSS properties means legacy browsers need fallbacks.

What it helps with

Build mobile-first navigation that stacks vertically on small screens
Configure fluid typography and margins using CSS clamp()
Construct two-dimensional page layouts using CSS Grid template areas
Differentiate interface interactions for touchscreens versus precision mice

Example prompts for the agent

Convert this desktop navigation into a mobile-first flexbox layout
Create an auto-fitting product grid using CSS Grid and clamp spacing
Add responsive typography to the hero section without fixed media queries

How to install responsive-design

1Skills CLI (Vercel)

npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a claude-code

2Manually: put the files in place

~/.claude/skills/responsive-design/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/responsive-design/

1Skills CLI (Vercel)

npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a codex

2Manually: put the files in place

.agents/skills/responsive-design/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a cursor

2Manually: put the files in place

.cursor/skills/responsive-design/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install manutej/luxor-claude-marketplace responsive-design

2Manually: put the files in place

.github/skills/responsive-design/SKILL.md

1Skills CLI (Vercel)

npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a gemini-cli

2Platform CLI

gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/responsive-design

Manually: put the files in place

.devin/skills/responsive-design/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about responsive-design

How to install responsive-design in Claude Code?

Run npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a claude-code. You can also save the file directly to ~/.claude/skills/responsive-design/SKILL.md.

What does the responsive-design skill do?

It provides patterns for coding agents to generate mobile-first layouts using CSS Grid, Flexbox, and fluid typography.

What breakpoint strategy does this skill follow?

It uses progressive enhancement via @media (min-width: ...) starting above mobile baselines, anchoring breakpoints to content requirements and standard screen widths.

Similar skills

Everything for Frontend and UI →

responsive-design by other authors comes first.

responsive-design Seth Hobson Guides responsive UI work with mobile-first styles, container queries, and fluid values. Use it when pages or components need to adapt to available space. CX Codex 20,956installs responsive-design Owl-Listener A skill that steers your coding agent toward layouts and interactions that hold up across screen sizes and input methods. CX Codex +1 2,300installs responsive-design Mindrally A skill that hands your coding agent a set of responsive design rules: mobile-first CSS, flexible layouts, media queries, adaptive images and type. CX Codex +1 830installs responsive-design akillness The skill turns a vague “breaks on mobile” report into one named responsive surface, a strategy packet and a verification plan. CX Codex +1 478installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set59

ci-cd-pipeline-patterns Teaches coding agents GitHub Actions patterns for continuous integration and delivery. Helps structure multi-platform test runs, Docker builds, and cloud deployments. CX Codex +1 537installs spring-boot-development A skill that gives your coding agent a Spring Boot reference: auto-configuration, dependency injection, REST controllers, Spring Data and Spring Security. CX Codex +1 534installs enterprise-architecture-patterns Reference for architecture patterns: DDD, event sourcing, CQRS, sagas, API gateway, service mesh. Useful when you design microservices or split a monolith. CX Codex +1 527installs rest-api-design-patterns A reference skill for designing REST APIs: resource modeling, versioning, pagination, HATEOAS and HTTP method semantics. CX Codex +1 525installs grpc-microservices Guides your agent in designing gRPC microservices and Protocol Buffers schemas. Useful when building low-latency APIs and real-time streaming architectures. CX Codex +1 509installs vuejs-development A skill that gives your coding agent a Vue 3 reference: reactivity, Composition API, single-file components and directives. Useful when building an SPA or moving off the Options API. CX Codex +1 509installs redis-state-management Guides AI coding agents through Redis caching workflows, distributed state persistence, and redis-py integration. CX Codex +1 489installs asyncio-concurrency-patterns A skill on Python concurrency: event loops, coroutines, tasks, semaphores and locks. Useful when you are writing an async service or client. CX Codex +1 489installs