From aj-geddes-useful-ai-prompts-4
Guides mobile-first responsive design for web apps and sites, prioritizing small screens with breakpoints, best practices, and progressive enhancement.
npx claudepluginhub joshuarweaver/cascade-code-languages-misc-1 --plugin aj-geddes-useful-ai-prompts-4This skill uses the workspace's default tool permissions.
- [Overview](#overview)
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
Mobile-first design prioritizes small screens as the starting point, ensuring core functionality works on all devices while leveraging larger screens for enhanced experience.
Minimal working example:
Mobile-First Approach:
Step 1: Design for Mobile (320px - 480px)
- Constrained space forces priorities
- Focus on essential content and actions
- Single column layout
- Touch-friendly interactive elements
Step 2: Enhance for Tablet (768px - 1024px)
- Add secondary content
- Multi-column layouts possible
- Optimize spacing and readability
- Take advantage of hover states
Step 3: Optimize for Desktop (1200px+)
- Full-featured experience
- Advanced layouts
- Rich interactions
- Multiple columns and sidebars
---
## Responsive Breakpoints:
Mobile: 320px - 480px
- iPhone SE, older phones
// ... (see reference guides for full implementation)
Detailed implementations in the references/ directory:
| Guide | Contents |
|---|---|
| Responsive Design Implementation | Responsive Design Implementation |
| Mobile Performance | Mobile Performance |
| Progressive Enhancement | Progressive Enhancement |