applying-responsive-standards
Rules for mobile-first responsive design using Tailwind CSS. Use on every UI component to ensure cross-device compatibility.
Best use case
applying-responsive-standards is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Rules for mobile-first responsive design using Tailwind CSS. Use on every UI component to ensure cross-device compatibility.
Teams using applying-responsive-standards should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/applying-responsive-standards/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How applying-responsive-standards Compares
| Feature / Agent | applying-responsive-standards | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Rules for mobile-first responsive design using Tailwind CSS. Use on every UI component to ensure cross-device compatibility.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Responsive Design Standards
## When to use this skill
- Adding any new UI element or layout.
- Fixing layout bugs on mobile or tablet.
## Coding Style
- **Mobile First**: Write base styles for mobile, then use `md:`, `lg:`, `xl:` to upgrade for larger screens.
- **Stacking**: Use `flex-col` on mobile and `flex-row` on desktop (`md:flex-row`).
- **Grid**: Default to 1 column on mobile, 2 on tablet, and 3+ on desktop.
## Example
```html
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Tour Cards -->
</div>
```
## Instructions
- **Testing**: Frequently resize the browser or use DevTools device emulator.
- **Padding**: Increase horizontal padding on desktop (`px-4` vs `md:px-20`).Related Skills
write-coding-standards-from-file
Write a coding standards document for a project using the coding styles from the file(s) and/or folder(s) passed as arguments in the prompt.
readme-standards
README template structure and required sections
documentation-standards
Clear technical documentation with JSDoc, READMEs, Mermaid diagrams, ISMS policy references, and comprehensive code examples
Naming & Tagging Standards
Establish consistent resource naming conventions and mandatory tagging for cost allocation, security, and governance
standards-typescript
This skill provides TypeScript coding standards and is automatically loaded for TypeScript projects. It includes naming conventions, best practices, and recommended tooling.
standards-python
This skill provides Python coding standards and is automatically loaded for Python projects. It includes naming conventions, best practices, and recommended tooling.
standards-frontend
Frontend component and UI development standards for modern React/Next.js applications. Includes React 19 patterns, Tailwind CSS v4, Server Components, accessibility, and the Anthropic frontend-design aesthetic philosophy.
security-environment-standards
Security and environment configuration standards for web applications, including environment variable management, secure coding practices, and production deployment security. Use when setting up environments, configuring security, or deploying applications.
responsive-strategist
Plans responsive behavior across breakpoints for the Jasmine kindergarten website — layout transformations, typography scaling, image behavior, navigation adaptation, spacing adjustments, and content prioritization. Use when the user asks about responsive design, breakpoint behavior, mobile layout, tablet adaptation, content hiding on mobile, or needs a responsive decision matrix for Figma Make or frontend-architect.
modern-python-standards
Strict adherence to modern (3.11+), idiomatic, and type-safe Python development.
mcp-standards
MCP server standardization patterns for Claude Code plugins. Use when implementing MCP servers, designing tool interfaces, configuring MCP transports, or standardizing MCP naming conventions. Trigger keywords - "MCP", "MCP server", "MCP tools", "MCP transport", "tool naming", "MCP configuration".
global-standards
Project-wide coding standards and conventions specialist. Use PROACTIVELY when writing code, making architectural decisions, or establishing project conventions. Covers coding style, commenting, error handling, validation, tech stack consistency, and project conventions across all languages and frameworks.