メニュー
Implements UI improvements from designer:ui-analyse or /designer:ui review docs, applying Anti-AI design rules and visual verification. Use when applying review findings as code.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/MadAppGang/magus --skill frontend-implementコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Picks the browser-use agent brain LLM per task. Use when choosing a model for retry_with_browser_use_agent or a cloud session, or the user mentions a cheap, slow, or smart model.
Reference for the Browser Use MCP tools — parameters, returns, session lifecycle. Use when navigating, clicking, typing, evaluating JS, or extracting page content.
Visual UI debugging — screenshot capture and analysis, responsive layout checking at multiple viewport sizes, CSS validation via DOM state, visual regression detection, before/after state comparison.
SKILL.md を表示中
SOC 職業分類に基づく
| name | frontend-implement |
| description | Implements UI improvements from designer:ui-analyse or /designer:ui review docs, applying Anti-AI design rules and visual verification. Use when applying review findings as code. |
| user-invocable | false |
This skill provides patterns for implementing UI improvements based on design analysis. It transforms review findings into code changes following Anti-AI design principles.
| Skill | Purpose | Modifies Code? |
|---|---|---|
| designer:ui-analyse | Visual analysis, issue detection (requires designer plugin) | No |
| dev:frontend-implement | Apply improvements from analysis | Yes |
| designer:ui-style-format | Style file specification (requires designer plugin) | No |
| designer:design-references | Reference image management (requires designer plugin) | No |
This skill assumes analysis has been completed using:
designer:ui-analyse skill (requires designer plugin)/designer:ui command outputBefore implementing, ensure you have:
Extract actionable items from the review document.
# Extract actionable items from review
parse_review() {
local review_path="$1"
# Extract CRITICAL and HIGH issues
grep -A 2 "^\[CRITICAL\]" "$review_path"
grep -A 2 "^\[HIGH\]" "$review_path"
}
What to Look For:
If Gemini available and screenshot provided, understand the current visual state.
# Understand current visual state
npx claudish --model "$GEMINI_MODEL" --image "$CURRENT_SCREENSHOT" --quiet --auto-approve <<< "
Describe the current UI implementation:
1. Layout structure
2. Color scheme
3. Typography
4. Animation presence
5. Areas needing improvement
Output as structured data for implementation."
Model Resolution:
Pick a vision-capable model from list_models (claudish MCP) and assign to
GEMINI_MODEL. If the key is absent or the file does not exist, set GEMINI_MODEL=""
to fall back to text-only mode.
Apply the five core Anti-AI design rules to transform generic UI into distinctive design.
See Anti-AI Design Rules section below for detailed patterns.
If Gemini available after changes, verify improvements were applied correctly.
# Verify improvements
npx claudish --model "$GEMINI_MODEL" --image "$NEW_SCREENSHOT" --quiet --auto-approve <<< "
Verify these improvements were applied:
1. Asymmetric layout: {expected}
2. Texture/depth: {expected}
3. Typography drama: {expected}
4. Micro-interactions: {expected}
5. Bespoke colors: {expected}
Score 1-10 and note any remaining issues."
These rules transform generic, AI-generated looking UI into distinctive, human-crafted designs.
Rigid symmetric grids look AI-generated. Break them with asymmetric bento layouts.
// BEFORE: Symmetric grid
<div className="grid grid-cols-3 gap-4">
// AFTER: Asymmetric bento
<div className="grid grid-cols-12 gap-6">
<div className="col-span-7 row-span-2" />
<div className="col-span-5" />
<div className="col-span-3" />
<div className="col-span-2 -mt-8" />
</div>
Key Techniques:
Flat solid colors look AI-generated. Add gradients, glass effects, and depth.
// BEFORE: Flat
<div className="bg-white rounded-lg">
// AFTER: Textured
<div className="
bg-gradient-to-br from-white/80 to-white/40
backdrop-blur-xl
border border-white/20
shadow-[0_8px_32px_rgba(0,0,0,0.08),inset_0_1px_0_rgba(255,255,255,0.6)]
">
Key Techniques:
Generic typography looks AI-generated. Create dramatic visual hierarchy.
// BEFORE: Generic
<h1 className="text-2xl font-bold">Welcome</h1>
// AFTER: Dramatic
<h1 className="
text-[clamp(4rem,15vw,12rem)]
font-serif font-thin tracking-[-0.04em]
leading-[0.85]
bg-gradient-to-r from-zinc-900 via-zinc-600 to-zinc-900
bg-clip-text text-transparent
">
Welcome
</h1>
Key Techniques:
Static elements look AI-generated. Add motion and feedback.
// BEFORE: Static
<button className="bg-blue-500 hover:bg-blue-600">
// AFTER: Reactive
<motion.button
whileHover={{ scale: 1.02, y: -2 }}
whileTap={{ scale: 0.98 }}
transition={{ type: "spring", stiffness: 400, damping: 17 }}
className="
bg-gradient-to-r from-violet-600 to-indigo-600
hover:shadow-[0_0_40px_rgba(139,92,246,0.4)]
transition-shadow duration-300
"
>
Key Techniques:
Default Tailwind colors look AI-generated. Create custom palettes.
// BEFORE: Default palette
<div className="bg-blue-500 text-white">
// AFTER: Bespoke palette
<div className="
bg-[#0D0D0D]
text-[#E8E4DD]
bg-gradient-to-br
from-[#1a1a2e] via-[#16213e] to-[#0f3460]
">
Key Techniques:
When implementing, select an appropriate visual metaphor to guide decisions.
| Metaphor | Use Case | Key Characteristics |
|---|---|---|
| Cyberpunk Glass | Dashboards, tech | Neon accents + glassmorphism + dark backgrounds |
| Swiss Minimalist | Professional, B2B | Strict grid + high contrast + precise spacing |
| Neo-Brutalism | Creative, bold | Thick borders + clashing colors + raw shapes |
| Organic Luxury | Premium, fashion | Warm neutrals + serif typography + slow motion |
| Editorial Magazine | Marketing, content | Large display type + asymmetric images + whitespace |
Applying a Metaphor:
Ensure these are installed before implementing micro-interactions:
npm install framer-motion lucide-react
# or
bun add framer-motion lucide-react
Dependency Usage:
framer-motion: All animation and gesture handlinglucide-react: Icon library (consistent, customizable)When completing implementation, create a log documenting all changes.
## Implementation Log
**Component**: {component_path}
**Session**: {session_id}
**Date**: {timestamp}
### Changes Applied
1. **{Issue from Review}**
- Before: {description}
- After: {description}
- Code: {file:line}
2. **{Issue from Review}**
- Before: {description}
- After: {description}
- Code: {file:line}
### Visual Metaphor
{metaphor_name}: {brief explanation of why chosen and how applied}
### Anti-AI Rules Applied
- [x] Rule 1: Break Symmetry - {how applied}
- [x] Rule 2: Add Texture - {how applied}
- [x] Rule 3: Dramatic Typography - {how applied}
- [ ] Rule 4: Micro-Interactions - {not applicable or how applied}
- [x] Rule 5: Bespoke Colors - {how applied}
### Dependencies Added
{list if any, or "None"}
### Verification Status
- [ ] Visual verified with Gemini
- [ ] Manual testing recommended
- [ ] Responsive breakpoints checked
- [ ] Accessibility preserved