Agent skill
responsive-design
Mobile-first responsive design specialist for SARAISE React/TypeScript/Tailwind applications. Provides guidance on breakpoints, fluid typography, flexible layouts, touch targets, and progressive enhancement. Use when creating responsive layouts, optimizing for mobile, or ensuring cross-device compatibility.
Install this agent skill to your Project
npx add-skill https://github.com/buildworksai/aistrale/tree/main/docs
SKILL.md
Responsive Design Principles
Status: ✅ Last Validated: 2025-01-02
Purpose
Invoked when creating responsive layouts or optimizing SARAISE UI for mobile/tablet devices. Provides mobile-first design principles aligned with Tailwind CSS breakpoints and SARAISE design system.
Mobile-First Approach
- Design for mobile first, then scale up
- Progressive enhancement over graceful degradation
- Touch targets minimum 44x44px
- Avoid hover-only interactions
- Test on real devices
Breakpoints (Tailwind CSS)
- sm: 640px (mobile landscape) -
@media (min-width: 640px) - md: 768px (tablet portrait) -
@media (min-width: 768px) - lg: 1024px (tablet landscape / small desktop) -
@media (min-width: 1024px) - xl: 1280px (desktop) -
@media (min-width: 1280px) - 2xl: 1536px (large desktop) -
@media (min-width: 1536px)
Fluid Typography
- Use rem for font sizes
- Base size: 16px
- Scale: 1.125 (major second) or 1.2 (minor third)
- Use clamp() for fluid scaling
- Line length: 45-75 characters optimal
Flexible Layouts (Tailwind)
- Use
gridclasses for page layouts (grid-cols-1 md:grid-cols-2 lg:grid-cols-3) - Use
flexclasses for component layouts (flex flex-col md:flex-row) - Avoid fixed widths, use
w-fullwithmax-w-* - Content containers:
max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 - Use
gap-*instead of margins in flex/grid (gap-4,gap-6)
Images & Media
- Use responsive images (srcset, sizes)
- Use object-fit for aspect ratios
- Lazy load below-the-fold images
- Optimize for different densities (@1x, @2x)
- Use CSS for simple graphics
Common Patterns
- Hamburger menu for mobile navigation
- Card layouts that stack on mobile
- Side-by-side columns that stack
- Hidden elements on mobile (use wisely)
- Bottom navigation on mobile apps
Testing
- Test on actual devices
- Use browser DevTools device mode
- Test at various viewport sizes
- Test with slow connections
- Test landscape and portrait orientations
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
mattpocock/skills
git-guardrails-claude-code
Set up Claude Code hooks to block dangerous git commands (push, reset --hard, clean, branch -D, etc.) before they execute. Use when user wants to prevent destructive git operations, add git safety hooks, or block git push/reset in Claude Code.
mattpocock/skills
setup-pre-commit
Set up Husky pre-commit hooks with lint-staged (Prettier), type checking, and tests in the current repo. Use when user wants to add pre-commit hooks, set up Husky, configure lint-staged, or add commit-time formatting/typechecking/testing.
mattpocock/skills
obsidian-vault
Search, create, and manage notes in the Obsidian vault with wikilinks and index notes. Use when user wants to find, create, or organize notes in Obsidian.
mattpocock/skills
handoff
Compact the current conversation into a handoff document for another agent to pick up.
mattpocock/skills
scaffold-exercises
Create exercise directory structures with sections, problems, solutions, and explainers that pass linting. Use when user wants to scaffold exercises, create exercise stubs, or set up a new course section.
mattpocock/skills
edit-article
Edit and improve articles by restructuring sections, improving clarity, and tightening prose. Use when user wants to edit, revise, or improve an article draft.
Didn't find tool you were looking for?