Menú
Adapt existing UI across mobile, tablet, and desktop breakpoints.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
Use when designing functions, modeling data, choosing types, drawing module boundaries, or deciding what depends on what. Use when evaluating architecture, extracting abstractions, or shaping vertical slices.
Use when writing, reviewing, or refactoring code in any language. Use for architecture decisions, system design, component boundaries, and code quality judgment. Always relevant when touching source code.
Use when writing or reviewing comments, docstrings, names, control flow, or file organization. Use when evaluating readability, choosing identifiers, splitting files, or applying naming conventions. Use when removing AI tells (slop) from code prose — comments, docs, error messages, commit messages, PR descriptions. Covers the visible surface of code.
Run kirby's review engine on a PR or a commit, OUTSIDE the orchestrator loop. Local output only — findings are presented in-conversation, nothing is posted, no Provider config needed.
Launch kirby-bot orchestrator in background, relay phase transitions live from run.jsonl.
Extract and organize existing code into reusable modules, functions, and components with thoughtful APIs.
| name | ui-sh-make-responsive |
| description | Adapt existing UI across mobile, tablet, and desktop breakpoints. |
Use this when the user wants an existing desktop-oriented UI to work well across mobile, tablet, and desktop breakpoints.
Keep the user informed so longer runs do not look stuck.
Use these rule groups as an audit order: page shell first, navigation second, then text/forms, overflow, and component-specific patterns.
sm:, md:, lg:, etc.) to adjust grid columns, spacing, font sizes, and visibility at different screen sizesmin-h-dvh, min-h-svh, or min-h-lvh; never use min-h-screenlg, regardless of whether the desktop nav is in a header or sidebar — use a dialog or disclosure panel with a hamburger toggle; hide header nav with hidden lg:flex, hide sidebar nav with hidden lg:block, and hide the mobile toggle/menu at desktop widths with lg:hiddensm: — write the mobile (larger) size as the default and the desktop (smaller) size with sm: (e.g. text-2xl/8 sm:text-xl/8, text-base/7 sm:text-sm/6, text-lg/6 sm:text-sm/6, size-5 sm:size-4, py-2.5 sm:py-1.5); this applies to body text, subheadings, stat values, form input labels, badges, buttons, select/input padding, and icons — not h1s (page titles stay the same size or get smaller on mobile, not bigger)text-base (16px) on mobile — never use text-xs; text-sm is only acceptable at sm: or larger breakpoints (e.g. text-base/7 sm:text-sm/6, never text-sm/6 without a breakpoint prefix for body copy)16px, add max-sm:text-base/{lh} to bump it to 16px on mobilesm: — e.g. size-5 sm:size-4 for checkboxes/radios and w-11 sm:w-9 for togglesrelative and add a direct child <span class="absolute top-1/2 left-1/2 size-[max(100%,3rem)] -translate-1/2 pointer-fine:hidden" aria-hidden="true" /> when the visual button is smallermax-w-* or max-lg:max-w-* — constrain each text element directly with max-w-[*ch]min-w-0 to flex children that must shrink below their content size, especially fluid content beside fixed sidebars, truncated labels, and flexible inputs beside fixed buttonsshrink-0 to flex children that must not compress — icons, SVGs, images, logos, avatars, and fixed-size controlsoverflow-x-auto whitespace-nowrap div with matching negative container margins and an inner inline-block min-w-full align-middle div with matching horizontal paddingwhitespace-nowrap to <th> elements@container) for component-level responsiveness — anything whose layout depends on available space rather than the viewport (e.g. dashboard widgets, feature cards, pricing tiers, testimonial grids)@container element as close to the responsive content as possible — ideally a direct wrapper around the items, never on a page-level container5+1min() with viewport units for image and screenshot border radii instead of fixed rounded-* values — e.g. rounded-[min(1vw,12px)]lg.