agentleFS
Sign inStart free
UwayxtUwayxt/agent-skills/.agents/skills/adaptive-component-behavior/SKILL.md

adaptive-component-behavior

Skill4 starsChanged 2 months agoMITView on GitHub

Define how components change interaction patterns across devices, not just size. Use when adapting UI for mobile, component transformation, sidebar to bottom-nav, table to card, or touch interaction patterns.

The file

We split this skill into the rules it gives an agent

4 rules. About 0 are common, 3 are distinctive, and 1 is very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈3

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Ensure breakpoints used in transformations reference bp-* tokens, not raw pixel values.

    line 25
  2. Distinctive:

    Every component classified (transform / resize / unchanged)

    line 34
  3. Distinctive:

    Every "transform required" component has explicit desktop + tablet + mobile patterns

    line 35
  4. Distinctive:

    No component left as "just shrinks" without justification

    line 36

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Responsive is not the same as adaptive. Responsive shrinks. Adaptive transforms. A sidebar that becomes a 200px-wide icon column on mobile is not adaptive — it is broken.

1. Inventory the components

List every distinct component type in the project: navigation, data tables, forms, modals, dropdowns, tooltips, sidebars, tabs, carousels, etc.

2. Classify by transformation need

Three classes:

  • Transform required: component needs a fundamentally different pattern on mobile (sidebar → bottom-nav, table → card-list, modal → fullscreen)
  • Resize + reflow: component keeps its pattern but adjusts layout (multi-column form → single column, wide card → full-width card)
  • Unchanged: component works identically at all sizes (standalone button, icon, badge)

3. Define transformations explicitly

For every "Transform required" component, specify:

  • Desktop pattern: what it is and how it works
  • Tablet adaptation: intermediate transformation
  • Mobile pattern: the new interaction model Reference the TRANSFORMATION-TABLE.md for the canonical table.

4. Coordinate with design-tokens

Ensure breakpoints used in transformations reference bp-* tokens, not raw pixel values.

5. Coordinate with component-style-guide

Each transformed variant needs its own state matrix (hover/tap states differ between pointer and touch devices).

6. Output the adaptive spec

For each component: transformation table (device → pattern → notes). This feeds directly into design-to-code-handoff.

Completion Criteria

  • Every component classified (transform / resize / unchanged)
  • Every "transform required" component has explicit desktop + tablet + mobile patterns
  • No component left as "just shrinks" without justification
  • Adaptive spec referenced in design-to-code-handoff artifact

Output

Adaptive component spec (table per component) + TRANSFORMATION-TABLE.md filled for the project.

Anti-patterns

  • Calling a component "responsive" because it has width: 100% on mobile
  • Sidebar that becomes a tiny icon strip instead of a bottom-nav
  • Data table with horizontal scroll on mobile instead of card-list transformation
  • Assuming hover states work on touch devices (they do not reliably)

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free