agentsclimarketplace

Responsive layout design

Skill planifest/planifest-framework/planifest-framework/external-skills/responsive-layout-design

A specification framework for agentic development. Agents build from complete specs - not guesses.

Install
npx -y skills add planifest/planifest-framework --skill responsive-layout-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Responsive layout design workflow for defining adaptive structure and component behavior across viewport ranges. Use when UI layouts must remain usable and readable across device contexts; do not use for backend data modeling or deployment pipeline decisions.

SKILL.md

2.2 KB, as published. Nobody here has run it

Responsive Layout Design

Overview

Use this skill to define responsive behavior that keeps critical workflows usable across supported screen sizes.

Scope Boundaries

  • Layouts break, overflow, or lose usability across devices.
  • Teams need explicit breakpoint and adaptation rules before implementation.
  • Localization/content growth increases truncation and wrapping risk.

Templates And Assets

  • Responsive rule template:
    • assets/responsive-rule-template.md
  • Breakpoint test checklist:
    • assets/breakpoint-test-checklist.md

Inputs To Gather

  • Device and viewport support matrix.
  • Critical tasks and layout priority by context.
  • Content constraints including localization expansion risk.
  • Interaction modality requirements (touch, pointer, keyboard).

Deliverables

  • Responsive rule set with breakpoint-specific behavior.
  • Component adaptation guidance for each viewport range.
  • Risk list for overflow, truncation, and interaction regressions.
  • Verification checklist for critical screens.

Workflow

  1. Define viewport model and breakpoint rationale.
  2. Specify component behavior per breakpoint (reflow, collapse, hide, or transform).
  3. Validate text expansion, dynamic data density, and media constraints.
  4. Define interaction affordance adjustments by modality.
  5. Verify critical workflows at each supported viewport range.
  6. Publish responsive rules with ownership and review cadence.

Quality Standard

  • Core tasks remain usable at all supported viewport ranges.
  • Overflow and truncation risks are addressed explicitly.
  • Interactive targets remain accessible and operable.
  • Rules are consistent and do not conflict across breakpoints.

Failure Conditions

  • Stop when breakpoint choices lack user/device evidence.
  • Stop when critical workflows fail in supported viewport ranges.
  • Escalate when responsive constraints conflict with required functionality.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.