Responsive Design

Name: Responsive Design
Author: cepradar

Use when implementing responsive behavior in pages, forms, tables, modals, and panels. Prefer Tailwind breakpoints first and centralize JS breakpoint logic in reusable hooks when needed.

by cepradar(0) 0 installs

Free

Free account. Installing gives you the manifest plus copy-paste snippets.

See reviews

About

Instruction file imported from cepradar/servi_frontend (.github/instructions/responsive.instructions.md). Copyright stays with the author.

Responsive Rules

Strategy

Mobile-first behavior should be preserved and improved incrementally.
Prefer Tailwind responsive utilities before adding JavaScript viewport logic.
Reuse existing breakpoint hooks when JS logic is necessary.

JavaScript Responsive Logic

Avoid adding repeated resize listeners inside multiple components.
If viewport logic is required, centralize it in a reusable hook.
Keep breakpoint conventions aligned with existing project breakpoints.

Layout and Overflow

Avoid unnecessary fixed widths.
Prevent uncontrolled horizontal overflow.
Validate large tables and dense panels on small screens.
Ensure actionable controls remain touch-friendly.

Scope

Do not hide critical information on mobile without an accessible alternative.
Keep behavior parity across desktop, tablet, and mobile when feasible.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/cepradar-servi-frontend-responsive-instructions/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

cepradar-servi-frontend-responsive-instructions.ocm.jsonjson

{
  "ocm": "1",
  "id": "cepradar-servi-frontend-responsive-instructions",
  "kind": "skill",
  "name": "Responsive Design",
  "description": "Use when implementing responsive behavior in pages, forms, tables, modals, and panels. Prefer Tailwind breakpoints first and centralize JS breakpoint logic in reusable hooks when needed.",
  "publisher": "cepradar",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "github-instructions"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Use when implementing responsive behavior in pages, forms, tables, modals, and panels. Prefer Tailwind breakpoints first and centralize JS breakpoint logic in reusable hooks when needed."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github-instructions",
      "repository": "https://github.com/cepradar/servi_frontend",
      "path": ".github/instructions/responsive.instructions.md",
      "ref": "03c712a00334c026a70d1b37ceda1d1ed8313047",
      "url": "https://github.com/cepradar/servi_frontend/blob/03c712a00334c026a70d1b37ceda1d1ed8313047/.github/instructions/responsive.instructions.md",
      "key": "cepradar/servi_frontend/.github/instructions/responsive.instructions.md"
    },
    "applies_to": [
      "src/components/**/*.jsx",
      "src/components/**/*.js",
      "src/hooks/**/*.js",
      "src/hooks/**/*.jsx"
    ]
  },
  "instructions": "# Responsive Rules\n\n## Strategy\n- Mobile-first behavior should be preserved and improved incrementally.\n- Prefer Tailwind responsive utilities before adding JavaScript viewport logic.\n- Reuse existing breakpoint hooks when JS logic is necessary.\n\n## JavaScript Responsive Logic\n- Avoid adding repeated resize listeners inside multiple components.\n- If viewport logic is required, centralize it in a reusable hook.\n- Keep breakpoint conventions aligned with existing project breakpoints.\n\n## Layout and Overflow\n- Avoid unnecessary fixed widths.\n- Prevent uncontrolled horizontal overflow.\n- Validate ",
  "cost": {
    "context_tokens": 215
  }
}

Fetch it by URL: GET /api/v1/registry/cepradar-servi-frontend-responsive-instructions/manifest?version=1.0.0