congiuluc/responsive-design
skills/responsive-design/SKILL.md
Build responsive layouts and components using mobile-first CSS with TailwindCSS. Use when: creating page layouts, responsive grids, navigation menus, responsive images, fluid typography, touch-friendly interfaces, or implementing mobile/tablet/desktop breakpoints.
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add congiuluc/my-awesome-copilot responsive-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 1:22 PM5.1s5 files scanned
SKILL.md
- name:
- responsive-design
- description:
- >-
- Use when:
- creating page layouts, responsive grids, navigation menus, responsive
- argument-hint:
- Describe the layout, page, or component that needs responsive design.
Responsive Design
When to Use
- Creating page layouts that work across mobile, tablet, and desktop
- Building responsive navigation (hamburger menus, collapsible sidebars)
- Implementing responsive grids and card layouts
- Optimizing images and media for different screen sizes
- Making touch targets large enough for mobile interaction
- Adding fluid typography that scales with viewport
- Creating responsive forms and data tables
Official Documentation
- TailwindCSS Responsive Design
- MDN Responsive Design
- web.dev Responsive Design
- Container Queries (MDN)
- Viewport Units (MDN)
Procedure
- Start mobile-first: write base styles for smallest screens
- Layer breakpoints progressively — see breakpoint system
- Build layouts with responsive patterns
- Make navigation responsive — see navigation patterns
- Optimize images and media — see media patterns
- Review complete samples
- Test at all breakpoints: 320px, 640px, 768px, 1024px, 1280px, 1536px
- Verify touch targets ≥ 44×44px on mobile
Quick Reference — Tailwind Breakpoints
| Prefix | Min Width | Target Device |
|--------|-----------|---------------|
| (base) | 0px | Mobile phones (portrait) |
| sm: | 640px | Large phones (landscape) |
| md: | 768px | Tablets |
| lg: | 1024px | Laptops / small desktops |
| xl: | 1280px | Desktops |
| 2xl: | 1536px | Large desktops |
Completion Checklist
- [ ] Base styles target mobile (no prefix)
- [ ] Content readable at 320px width without horizontal scroll
- [ ] Grid columns adjust across breakpoints
- [ ] Navigation collapses on mobile with toggle button
- [ ] Touch targets ≥ 44×44px on mobile
- [ ] Images use
loading="lazy"and responsive sizing - [ ] Typography scales appropriately (not too large or small)
- [ ] No content is hidden or inaccessible on any viewport
- [ ] Tested on at least 3 breakpoints (320px, 768px, 1280px)
Related Skills
congiuluc/vscode-extension
tools
VerifiedTrustedCommunity
Build VS Code extensions with TypeScript. Covers extension anatomy, activation events, commands, tree views, webview panels, language features, testing, and publishing. Use when: creating a new VS Code extension, adding commands/views/providers, building webview UIs, implementing language server features, testing extensions, or packaging for the marketplace.
SKILL.mdUpdated Apr 16, 2026
congiuluc/version-tracking
development
VerifiedTrustedCommunity
Track implementations, features, bugs, and releases in a versioning document. Use when: adding a commit, completing a feature, fixing a bug, or preparing a release. Automatically updates CHANGELOG.md following Keep a Changelog format and Semantic Versioning.
SKILL.mdUpdated Apr 16, 2026
congiuluc/testing-frontend
development
VerifiedTrustedCommunity
Write frontend tests using Vitest and React Testing Library. Use when: testing React components, hooks, user interactions, form submissions, accessibility assertions, or mocking API services.
SKILL.mdUpdated Apr 16, 2026
congiuluc/testing-frontend-angular
development
VerifiedTrustedCommunity
Write Angular frontend tests using Jasmine, Karma, and Angular TestBed. Use when: testing Angular components, services, pipes, directives, user interactions, form submissions, accessibility assertions, or mocking HTTP services.
SKILL.mdUpdated Apr 16, 2026