ソース情報
- リポジトリ
- lxgicstudios/ai-responsive
- ソースの最終更新活動
- 2026年8月20日 19:07
- 検出された SKILL.md の言語
- 英語
- スター
- 0
- フォーク
- 0
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SKILL.md を表示中
SKILL.md
ソースの指示 · 読み取り専用プレビュー- name
- responsive-fix
- description
- Make components responsive with proper breakpoints
# Responsive Fixer
Paste your desktop-only component, get mobile-responsive code back.
## Quick Start
```bash
npx ai-responsive ./src/components/Dashboard.tsx
```
## What It Does
- Analyzes layout structure
- Adds proper breakpoints
- Converts fixed widths to responsive
- Handles grid/flex adjustments
- Adds mobile-first styles
## Usage Examples
```bash
# Fix a component
npx ai-responsive ./src/components/Sidebar.tsx
# Specify breakpoints
npx ai-responsive ./components/Nav.tsx --breakpoints sm,md,lg
# CSS-in-JS output
npx ai-responsive ./components/Card.tsx --format styled
```
## What It Fixes
- Fixed pixel widths → responsive units
- Desktop grids → mobile stacks
- Hidden mobile elements → proper show/hide
- Touch targets → 48px minimum
- Font sizes → responsive scaling
## Output Example
```tsx
// Before: grid-cols-4
// After: grid-cols-1 sm:grid-cols-2 lg:grid-cols-4
```
## Requirements
Node.js 18+. OPENAI_API_KEY required.
## License
MIT. Free forever.
GitHubで見る