responsive-designdi Seth Hobson

Responsive Design Skill.

Una skill per Claude Code e Codex per il design UI: layout responsivi con container query, tipografia fluida, CSS Grid e breakpoint mobile-first.

Web & UI
Codice UI

Scarica OpenDesign Guida all'uso

wshobson/agents · plugins/ui-design/skills/responsive-design/SKILL.mdSKILL.md

--- name: responsive-design description: Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior. --- ## When to Use This Skill ## Detailed patterns and worked examples ## Best Practices

Front matter e intestazioni di sezione lette dal file upstream il 2026-09-14 · 1.989 caratteri in totale

01 Cosa fa

Cosa fa la Skill responsive-design in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Questa skill implementa layout responsive moderni utilizzando container query, tipografia fluida, CSS Grid e strategie di breakpoint mobile-first. Copre la responsività a livello di componente, tipografia fluida e scale di spaziatura, layout complessi con CSS Grid e Flexbox, e strategie di breakpoint per i design system. La skill affronta immagini e media responsive, pattern di navigazione adattiva e tabelle e visualizzazioni di dati responsive.

Enfatizza lo sviluppo mobile-first, breakpoint basati sul contenuto piuttosto che sul dispositivo, e container query per l'adattamento a livello di componente. La skill include indicazioni su target touch, proprietà logiche per l'internazionalizzazione, e ottimizzazione delle performance tramite gestione delle immagini e lazy loading.

Codice UI

Vedi l'esempio di prompt ↗

Come funziona

01
Inizi mobile-first
Inizi con gli stili mobile come base, poi migliori progressivamente per schermi più grandi, invece di procedere dal desktop verso il basso.
02
Imposti breakpoint basati sul contenuto
Definisca i breakpoint in base a dove il contenuto deve ridisporsi, non in base alle dimensioni specifiche del dispositivo.

02 Trova la tua applicazione

Quando usare la skill responsive-design

Utilizzare lo skill responsive-design in Claude Code o Codex quando il lavoro è design UI di questo tipo. Ambito e limiti di seguito sono presi dal file dello skill stesso.

Buona applicazione

Implementazione di layout responsive mobile-first
Uso di container query per responsività basata sui componenti
Creazione di scale tipografiche e di spaziatura fluide
Progettazione di strategie di breakpoint per design system
Costruire tabelle e visualizzazioni di dati responsive

03 Dentro la skill

Regole che la Skill responsive-design dà a Claude Code e Codex

1 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

Ottimizzi e Applichi il Lazy Load
Ottimizzi le immagini per le performance e applichi il lazy load ai contenuti che appaiono inizialmente fuori schermo.

04 Mettila al lavoro

Installa responsive-design in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi responsive-design a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

npx skills add https://github.com/wshobson/agents --skill responsive-design

Forma generica della CLI skills per plugins/ui-design/skills/responsive-design/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna alla skill un primo compito di progettazione UI

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

Starter prompt

Build a responsive product card grid that uses container queries to adapt the card layout based on available space. Implement fluid typography for the product titles and descriptions, maintain 44x44px touch targets for all buttons, and use CSS Grid with mobile-first breakpoints. Include responsive product images with proper aspect ratios and lazy loading for cards below the fold.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Prima di accettare l'output, cerca questi elementi nella trascrizione e nei file:

Il risultato viene fornito come codice UI, come elenca il catalogo per questa skill.
L'agente nomina la skill responsive-design nel suo piano o trascrizione prima di produrre il risultato.
I tuoi contenuti, nomi e numeri appaiono invariati nell'output.

In OpenDesign importi responsive-design dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi lo selezioni nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
File della skill: plugins/ui-design/skills/responsive-design/SKILL.md Checksum del contenuto registrato alla verifica; commit 4236bb9
License: MIT Da LICENSE.
Stelle del repository: 39.635 Snapshot GitHub del 2026-09-14 per l'intero repository wshobson/agents, che contiene 18 skill in questo catalogo. Non è un rating o conteggio di utilizzo per responsive-design.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

Quando usare questo skillElenca otto scenari, tra cui layout mobile-first, container query, tipografia fluida e visualizzazioni di dati responsive
Pattern dettagliati ed esempi praticiRimanda a references/details.md per una documentazione più approfondita dei pattern quando necessario
Best PracticeOtto principi fondamentali, tra cui approccio mobile-first, breakpoint basati sul contenuto, valori fluidi, container query e prestazioni
Problemi comuniSette problemi frequenti come overflow orizzontale, larghezze fisse, altezza del viewport e dimensionamento delle aree touch

Descrizione della skill

"Implementa layout responsive moderni usando container query, tipografia fluida, CSS Grid e strategie di breakpoint mobile-first. Usa quando costruisci interfacce adattive, implementi layout fluidi o crei comportamento responsive a livello di componente."

Descrizione front-matter da SKILL.md. Il file completo è circa 1.989 caratteri. Leggi il file completo su GitHub.

Responsive Design

Esegui responsive-design su un'attività reale di progettazione UI.

Scarica OpenDesign, importa responsive-design dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

npx skills add https://github.com/wshobson/agents --skill responsive-design