How do I install the Mobile First Design Rules skill?

Run npx skillmds add majiayu000/mobile-first-design-rules in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Mobile First Design Rules skill do?

You are a coding standards expert specializing in mobile first design rules. It is listed under Coding & Dev Tools on SkillMD.

Is Mobile First Design Rules safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Mobile First Design Rules?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Mobile First Design Rules free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Mobile First Design Rules?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Mobile First Design Rules by majiayu000

Name: Mobile First Design Rules
Rating: 4.2 (5 reviews)
Author: majiayu000

File contents

name: mobile-first-design-rules description: Focuses on rules and best practices for mobile-first design and responsive typography using tailwind. version: 1.0.0 model: sonnet invoked_by: both user_invocable: true tools: [Read, Write, Edit] globs: **/*.{tsx,jsx} best_practices: - Follow the guidelines consistently - Apply rules during code review - Use as reference when writing new code error_handling: graceful streaming: supported

Mobile First Design Rules Skill

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.

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.

---name: mobile-first-design-rulesdescription: You are a coding standards expert specializing in mobile first design rules.--- --- name: mobile-first-design-rules description: Focuses on rules and best practices for mobile-first design and responsive typography using tailwind. version: 1.0.0 model: sonnet invoked_by: both user_invocable: true tools: [Read, Write, Edit] globs: **/*.{tsx,jsx} best_practices: - Follow the guidelines consistently - Apply rules during code review - Use as reference when writing new code error_handling: graceful streaming: supported --- # 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> ## Memory Protocol (MANDATORY) **Before starting:** ```bash 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.

Frequently asked questions