Toolverse
All skills
Mobile

responsive-maker

by openclaw

Make components responsive with proper breakpoints. Use when your components look terrible on mobile.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
openclaw
Category
Mobile
Views
2
GitHub repo

About this skill

Make components responsive with proper breakpoints. Use when your components look terrible on mobile.

How to use

  1. Upewnij się, że masz zainstalowany Node.js w wersji 18 lub nowszej. Responsive Maker nie wymaga instalacji — uruchamiasz go bezpośrednio przez npx.

  2. Przejdź do katalogu projektu zawierającego komponenty, które chcesz uczynić responsywnymi.

  3. Uruchom narzędzie na wybranym pliku komponentu, na przykład: npx ai-responsive src/components/Hero.tsx. Narzędzie przeanalizuje strukturę komponentu i automatycznie doda breakpointy responsywne.

  4. Możesz również przetwarzać wiele plików naraz, podając ścieżkę do całego katalogu: npx ai-responsive src/components/ lub używając wzorca: npx ai-responsive "src/**/*.tsx".

  5. Sprawdź wygenerowany kod — narzędzie zachowuje Twoje istniejące style i dodaje warstwy responsywne z media queries lub prefiksami Tailwind.

  6. Przetestuj komponenty na rzeczywistych urządzeniach mobilnych, aby upewnić się, że layout, typografia i spacing działają prawidłowo na każdym rozmiarze ekranu.

Related skills

flutter-expert

by sickn33

Master Flutter development with Dart 3, advanced widgets, and multi-platform deployment. Handles state management, animations, testing, and performance optimization for mobile, web, desktop, and embedded platforms. Use PROACTIVELY for Flutter architecture, UI implementation, or

Mobile
54112

flutter-development

by aj-geddes

Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.

Mobile
1,1601,122

swift-best-practices

by sammcj

This skill should be used when writing or reviewing Swift code for iOS or macOS projects. Apply modern Swift 6+ best practices, concurrency patterns, API design guidelines, and migration strategies. Covers async/await, actors, MainActor, Sendable, typed throws, and Swift 6

Mobile
36140

interactive-portfolio

by davila7

Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio,

Mobile
1823

sequential-thinking

by mrgoonie

Use when complex problems require systematic step-by-step reasoning with ability to revise thoughts, branch into alternative approaches, or dynamically adjust scope. Ideal for multi-stage analysis, design planning, problem decomposition, or tasks with initially unclear scope.

Mobile
60238

godot

by bfollington

This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI

Mobile
547680