skills.rest
AHMADJAN-New
AHMADJAN-NewCOMMUNITY
Explore all skills by this author →
GitHub

nazim-responsive

Enforce mobile-first responsive design patterns for the Nazim UI.

Updated Nov 15, 2025
Search Tags:#responsive design#mobile-first#frontend development#ui patterns#nazim ui
One-click install
npx skills add https://github.com/AHMADJAN-New/nazim-web --skill nazim-responsive
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nazim-responsive
Source: https://github.com/AHMADJAN-New/nazim-web/tree/main/.cursor/skills/nazim-responsive
Command: npx skills add https://github.com/AHMADJAN-New/nazim-web --skill nazim-responsive

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enforces mobile-first responsive design principles across the Nazim UI, ensuring a consistent and user-friendly experience on all devices.

Core Features & Use Cases

  • Mobile-First Components: Provides patterns for page containers, headers, filters, tabs, grids, tables, charts, cards, and buttons that prioritize mobile usability.
  • Responsive Layouts: Guides developers on how to implement layouts that adapt gracefully from small screens to larger ones.
  • Use Case: When building a new data table for the student management module, use this Skill's guidelines to ensure the table is easily readable and interactive on a mobile phone before it's optimized for desktop.

Quick Start

Apply the nazim-responsive skill to ensure the new student registration form is mobile-first.

Frequently Asked Questions about nazim-responsive

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce mobile-first responsive design patterns for frontend components?▼

Mobile-first responsive design is enforced by adhering to specific class names and structural patterns for containers, grids, and interactive elements across pages, tables, forms, and charts to ensure a consistent user experience on all screen sizes.

What is the best way to make data tables readable and interactive on mobile screens?▼

Making data tables readable on mobile screens requires applying mobile-first UI patterns that prioritize mobile usability, ensuring the table layout adapts gracefully from small screens to larger ones before desktop optimization.

Do I need specific class names to build responsive layouts for page containers and grids?▼

Yes, building responsive layouts requires adherence to specific class names and structural patterns for containers, headers, filters, tabs, and grids to maintain a user-friendly experience across all devices.

How do I apply mobile-first design to a student registration form?▼

To apply mobile-first design to a student registration form, utilize the Skill's guidelines to ensure the form is easily readable and interactive on a mobile phone before it is optimized for desktop use.

Can I use these UI patterns for both small screens and larger desktop displays?▼

Yes, the UI patterns guide developers to implement responsive layouts that adapt gracefully from small screens to larger ones, ensuring consistent user experience across all devices for cards, charts, and buttons.

Related Skills

Explore More Software Engineering Skills→
RhettArkRhettArk

UI/UX Specialist

Design accessible, responsive UI components with semantic HTML and ARIA labeling.

Community
Basic
coreyjacoreyja
6

Frontend Responsive

Build responsive frontend layouts using breakpoints, media queries, and relative units.

Community
Basic
iulianditaiuliandita
2

frontend-design

Build and critique responsive frontend interfaces with WCAG-compliant, mobile-first markup.

Community
Advanced
pitabwirepitabwire

responsive-design

Implement responsive layouts with container queries, fluid typography, and CSS Grid.

Community
Intermediate