FerroxLabs/murage

murage 是做什麼的？

來自 FerroxLabs/murage 的 AI 代理技能。

概述

本技能專為前端開發者設計，旨在簡化 React 元件的建立流程。它利用 AI 的能力，從設計描述或規範中自動產生語意明確、結構清晰的 UI 元件。

功能特色

• 設計到程式碼轉換：輸入設計說明，即可取得符合現代 React 最佳實踐的程式碼。
• CSS-in-JS 整合：產生的元件會內嵌經過最佳化的樣式，支援 styled-components 或 Emotion 等函式庫。
• 跨代理相容性：無論您使用 Claude Code、Cursor 或 Codex 等代理，都能獲得一致的輸出品質。
• 可維護性優先：生成的程式碼遵循元件化設計原則，易於後續修改與擴充套件。

運作方式

1. 輸入：使用者提供設計需求（例如：「建立一個包含登入表單的卡片元件，具有陰影效果與圓角」）。
2. 處理：Murage 技能會分析輸入，參考常見的 UI 模式與 React 慣例。
3. 輸出：返回一個完整的 React 元件檔案，包含邏輯、樣式與 PropTypes 定義。

使用範例

import React from 'react';
import styled from 'styled-components';

const Card = styled.div`
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
  background: white;
`;

const LoginForm = () => {
  return (
    <Card>
      <h2>登入</h2>
      <form>
        <input type="email" placeholder="電子郵件" />
        <input type="password" placeholder="密碼" />
        <button type="submit">提交</button>
      </form>
    </Card>
  );
};

export default LoginForm;

支援的代理平台

• Claude Code
• Cursor
• Codex
• 其他相容的 AI 代理

注意事項

• 確保您的代理環境已正確設定，以支援技能呼叫。
• 產生的程式碼可能需要根據專案的特定 ESLint 規則或相依性進行微調。
• 本技能會自動根據最新 React 版本調整輸出語法。

授權條款

請參閱原始儲存庫的授權檔案以取得詳細資訊。