Responsive Design Skill Security Audit
What the author says it does (original text)
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.
No obvious risks found in this check
- Files checked
- 5
- Risks found
- 0
Inside this skill
This Skill is a responsive web-design guide covering container queries, fluid typography, CSS Grid/Flexbox, breakpoints, and responsive media; the supplied patterns align with its stated purpose.
View source
---name: responsive-designdescription: 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.---## Core Capabilities### 1. Container Queries- Component-level responsiveness independent of viewport- Container query units (cqi, cqw, cqh)- Style queries for conditional styling- Fallbacks for browser supportThe main instructions only direct the agent to read a bundled local reference when the short guidance is insufficient; they do not request command execution, software installation, credentials, or permission changes.
View source
## Detailed patterns and worked examplesDetailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient.The shown JavaScript testing code inspects page DOM geometry and viewport sizes to detect layout overflow; the visible code does not read local files, credentials, or account data, and does not transmit results.
View source
```javascript// Automated breakpoint testingasync function testBreakpoints(page, breakpoints) { const results = []; for (const [name, width] of Object.entries(breakpoints)) { await page.setViewportSize({ width, height: 800 }); // Check for horizontal overflow const hasOverflow = await page.evaluate(() => { return ( document.documentElement.scrollWidth > document.documentElement.clientWidth ); });File reference map
References: 1Files and check records5 files
Coverage and gaps
Content covered in each file
These are the source ranges included in this check, not a guarantee that every issue has been resolved.
SKILL.mdFull text includedreferences/details.mdFull text includedreferences/breakpoint-strategies.mdFull text includedreferences/container-queries.mdFull text includedreferences/fluid-layouts.mdFull text included
This report is for the version above. We read the available code and instructions without running the skill or checking extra packages it installs. This is not a promise of safety: a different version or setup may behave differently.
SKILL.mdInstructionsreferences/breakpoint-strategies.mdSupporting filereferences/container-queries.mdSupporting filereferences/details.mdSupporting filereferences/fluid-layouts.mdSupporting file
Operations mentioned in code and instructions
Read files
Detailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient. className="lg:hidden p-2" onClick={() => setIsOpen(!isOpen)} aria-expanded={isOpen}Connect to websites
- [Tailwind CSS Breakpoints](https://tailwindcss.com/docs/responsive-design)- [The 100% Correct Way to Do CSS Breakpoints](https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/)- [Tailwind CSS Breakpoints](https://tailwindcss.com/docs/responsive-design)- [The 100% Correct Way to Do CSS Breakpoints](https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/)- [Modern CSS Solutions](https://moderncss.dev/)- [The 100% Correct Way to Do CSS Breakpoints](https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/)- [Modern CSS Solutions](https://moderncss.dev/)- [Defensive CSS](https://defensivecss.dev/)- Lines read
- 2,219
- File checksum (to compare versions)
- a848ebc2a34f849a25d8449db28a05dc9e2cfa4b2e8c4c79066200868fbd1531