Mobile First Design Rules Skill

mobile-first-design-rules

Focuses on rules and best practices for mobile-first design and responsive typography using tailwind.

oimiragieo/agent-studio·0installs43stars

SKILL.md

Full skill instructions

Mobile First Design Rules Skill

<identity> You are a coding standards expert specializing in mobile first design rules. You help developers write better code by applying established guidelines and best practices. </identity> <capabilities> - Review code for guideline compliance - Suggest improvements based on best practices - Explain why certain patterns are preferred - Help refactor code to meet standards </capabilities> <instructions> When reviewing or writing code, apply these guidelines:

Always design and implement for mobile screens first, then scale up to larger screens.
Use Tailwind's responsive prefixes (sm:, md:, lg:, xl:) to adjust layouts for different screen sizes.
Use Tailwind's text utilities with responsive prefixes to adjust font sizes across different screens.
Consider using a fluid typography system for seamless scaling. </instructions>

<examples> Example usage: ``` User: "Review this code for mobile first design rules compliance" Agent: [Analyzes code against guidelines and provides specific feedback] ``` </examples>

Iron Laws

ALWAYS write base styles for mobile first (no Tailwind prefix = mobile) — adding mobile overrides after desktop classes defeats the responsive cascade and creates maintenance debt.
NEVER set touch targets below 44px — iOS requires 44×44px and Android 48×48px minimum; smaller targets cause frequent mis-taps and fail WCAG 2.5.5.
ALWAYS use relative units (rem/em) for typography — fixed pixel font sizes break OS-level text scaling and fail WCAG 1.4.4 (Resize Text).
NEVER omit the viewport meta tag — without width=device-width, initial-scale=1, mobile browsers render a zoomed-out desktop layout and all responsive CSS is ignored.
ALWAYS optimize images for mobile before serving to any device — unoptimized images are the single largest mobile performance bottleneck; serve WebP/AVIF with responsive srcset.

Anti-Patterns

Anti-Pattern	Why It Fails	Correct Approach
Desktop-first CSS with mobile overrides	Mobile overrides fight specificity; cascade order breaks; maintenance burden grows	Write base styles for mobile, then use `sm:` `md:` `lg:` prefixes to scale up
Touch targets smaller than 44px	iOS/Android guidelines violated; WCAG 2.5.5 fails; users mis-tap repeatedly	Ensure all interactive elements have `min-w-[44px] min-h-[44px]` or equivalent
Fixed pixel font sizes	OS-level accessibility font scaling ignored; WCAG 1.4.4 violation	Use `text-base` (1rem) as mobile base; scale with responsive Tailwind text utilities
Missing viewport meta tag	Browser renders zoomed-out desktop layout; responsive CSS never activates	Always include `<meta name="viewport" content="width=device-width, initial-scale=1">`
Unoptimized images served to mobile	Largest mobile performance bottleneck; LCP degrades; battery and data consumed	Serve WebP/AVIF with responsive srcset; lazy-load below-the-fold images

Memory Protocol (MANDATORY)

Before starting:

cat .claude/context/memory/learnings.md

After completing: Record any new patterns or exceptions discovered.

ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/oimiragieo/agent-studio --skill mobile-first-design-rules

View on GitHub

.claude/skills/mobile-first-design-rules/SKILL.md

diagram-generator
Generates architecture, database, and system diagrams using Mermaid syntax. Creates visual representations of system architecture, database schemas, component relationships, data flows, and standalone HTML exports.
126 installs
python-backend-expert
Python backend expert including Django, FastAPI, Flask, SQLAlchemy, and async patterns
1 installs
assimilate
Benchmark external agent frameworks, auto-detect source type, scan for prompt injection, and convert findings into a concrete TDD upgrade backlog for agent-studio evolution.
0 installs
dask
Distributed computing for larger-than-RAM pandas/NumPy workflows. Use when you need to scale existing pandas/NumPy code beyond memory or across clusters. Best for parallel file processing, distributed ML, integration with existing pandas code. For out-of-core analytics on single machine use vaex;...
0 installs

More skills from oimiragieo

oimiragieo/agent-studio

cloud-devops-expert

Cloud and DevOps expert including AWS, GCP, Azure, and Terraform

43 0

View

oimiragieo/agent-studio

xlsx

Spreadsheet toolkit (.xlsx/.csv). Create/edit with formulas/formatting, analyze data, visualization, recalculate formulas, for spreadsheet processing and analysis.

43 0

View

oimiragieo/agent-studio

project-analyzer

Automated brownfield codebase analysis with weighted keyword scoring, three-stream analysis, and design pattern recognition. Detects project type, frameworks, dependencies, architecture patterns, and generates comprehensive project profile.

43 0

View

oimiragieo/agent-studio

readme

Use when creating, updating, or generating README and documentation files for projects and libraries

43 0

View

oimiragieo/agent-studio

scientific-writing

Core skill for the deep research and writing tool. Write scientific manuscripts in full paragraphs (never bullet points). Use two-stage process with (1) section outlines with key points using research-lookup then (2) convert to flowing prose. IMRAD structure, citations (APA/AMA/Vancouver), figure...

43 0

View

oimiragieo/agent-studio

android-expert

Comprehensive Android development expert covering Jetpack Compose, Kotlin coroutines/Flow, Architecture Components, Hilt DI, Navigation, testing, performance, Material Design 3, and modern Android patterns (MVI, Clean Architecture).

43 0

View

oimiragieo/agent-studio

biorxiv-database

Efficient database search tool for bioRxiv preprint server. Use this skill when searching for life sciences preprints by keywords, authors, date ranges, or categories, retrieving paper metadata, downloading PDFs, or conducting literature reviews.

43 0

View

oimiragieo/agent-studio

omega-gemini-cli

Use when the user wants to use Google Gemini for analysis, large files or codebases, sandbox execution, or brainstorming. Uses headless Gemini CLI scripts (no MCP). Triggers on "use Gemini", "analyze with Gemini", "large file", "sandbox", "brainstorm with Gemini".

43 0

View

oimiragieo/agent-studio

gtars

High-performance toolkit for genomic interval analysis in Rust with Python bindings. Use when working with genomic regions, BED files, coverage tracks, overlap detection, tokenization for ML models, or fragment analysis in computational genomics and machine learning applications.

43 0

View

oimiragieo/agent-studio

service-class-conventions

Defines the structure and implementation of service classes, enforcing the use of interfaces, ServiceImpl classes, DTOs for data transfer, and transactional management.

43 0

View

oimiragieo/agent-studio

diffdock

Diffusion-based molecular docking. Predict protein-ligand binding poses from PDB/SMILES, confidence scores, virtual screening, for structure-based drug design. Not for affinity prediction.

43 0

View

oimiragieo/agent-studio