これは何

初めてSkillを作ってみる記事です。
いいな〜と思ったサイト・特定のUI要素の構造とスタイルを分析して、普段使っている言語で再構築してもらうSkillを作ってもらいました

Skillを作ってみたい方や、作る流れを知りたい方の助けになるかもです

まず、`skill-creator`をインストールしてみた

何から始めていいかわからなかったため、
こちらの記事を参考に、skill-creatorをインストールしました。

会話開始

/skill-creatorと入力すると、こんな感じの案内を出してくれます。歓迎ムード♪

⏺ Skill Creatorへようこそ！

  スキルの作成・改善をお手伝いします。現在どの段階にいらっしゃいますか？

  新しいスキルを作りたい場合:
  - どんなことをClaudeにできるようにしたいですか？
  - どんな場面で使いたいですか？

  既存のスキルを改善したい場合:
  - 改善したいスキルはどれですか？
  - どんな問題がありますか？

  具体的に教えていただければ、以下をお手伝いします：
  1. スキルの内容を一緒に考える
  2. ドラフトを書く
  3. テストケースを実行して結果を評価する
  4. フィードバックをもとに繰り返し改善する

  何を作りたいですか？

今回は試しに以下の要件を投げてみます

目的：いいな〜と思ったサイト・特定のUI要素の構造とスタイルを分析し、普段使っている言語で再構築してデモとしてみたい
- 自分の業務で使っている言語で再現可能か確認する
想定している流れ：URLとUI要素の指定→構造解析→スタイル抽出→コード生成→希望に合わせて微調整

要件を投げたら、3つの質問をされたので、以下のように回答しました

技術スタック：React / TypeScript
UI要素の指定：どれでも使えると嬉しい
生成されるコードに何を求めますか？：
- 見た目の忠実な再現
- コードの可読性・保守性
- アニメーション・インタラクション

※今回はデモを見ることができればOKなので、一旦アクセシビリティ外しました

 ☐ 技術スタック  ☐ 指定方法  ☐ 出力の重視点  ✔ Submit  →                                           
                              
普段使っている言語・フレームワークは何ですか？（スキルがデフォルトで考慮するものを決めるために聞いてい 
ます）
                                                                                                       
❯ 1. [ ] React / TypeScript                                                                            
  コンポーネントとして生成                                                                             
  2. [ ] Vue.js
  Single File Component形式で生成
  3. [ ] HTML / CSS / JS
  プレーンなウェブ標準で生成
  4. [ ] その他（後で教えます）
  スキル内で都度指定できるようにする
  5. [ ] Type something
     Next
───────────────────────────────────────────────────────────────────────────────────────────────────────
  6. Chat about this

←  ☒ 技術スタック  ☐ 指定方法  ☐ 出力の重視点  ✔ Submit  →

UI要素の指定はどのようにしたいですか？                        
                                              
❯ 1. [ ] URLのみ（ページ全体を解析）
     ページ全体の構造を解析して再現
  2. [ ] URLと自然言語（例：「ナビゲーションバー」）
     「ヘッダーのドロップダウン」のように言葉で指定
  3. [ ] URLとセレクター（CSS/XPath）
     より正確に要素を指定したい場合
  4. [ ] どれでも使えると嬉しい 
     状況に応じて使い分けたい  
  5. [ ] Type something.                
──────────────────────────────────────────────────────────────
  6. Chat about this
                                                              
Enter to select · Tab/Arrow keys to navigate · Esc to cancel

←  ☒ 技術スタック  ☒ 指定方法  ☐ 出力の重視点  ✔ Submit  →

生成されるコードに何を求めますか？                            
                                              
❯ 1. [ ] 見た目の忠実な再現     
  元のデザインにできるだけ近い見た目
  2. [ ] コードの可読性・保守性                 
  自分のコードベースに組み込みやすい               
  3. [ ] アクセシビリティ対応    
  aria属性なども含める             
  4. [ ] アニメーション・インタラクション
  ホバーやトランジションも再現する
  5. [ ] Type something             
     Submit                                                   
──────────────────────────────────────────────────────────────
  6. Chat about this

さらに二つ質問されました

CSSの書き方：styled-components / Emotion
対象サイト：
- 公開Webサイト（ログイン不要）
- デザインシステム・コンポーネントライブラリのサイト

←  ☐ CSSアプローチ  ☐ 対象サイト  ✔ Submit  →
                                                     
CSSの書き方はどれを好みますか？                                              

❯ 1. Tailwind CSS（推奨）                                                                                                       
     ユーティリティクラスでスタイリング。Figmaデザイン系スキルでも使われている
  2. CSS Modules                                                                                                                
     module.cssファイルに分離して管理
  3. styled-components / Emotion
     CSS-in-JSアプローチ
  4. 素のCSS / インラインスタイル
     シンプルに書く
  5. Type something.
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
  6. Chat about this

←  ☒ CSSアプローチ  ☐ 対象サイト  ✔ Submit  →

解析対象のサイトについて、どんなものを想定していますか？

❯ 1. [ ] 公開Webサイト（ログイン不要）
  通常のWebページ                                             
  2. [ ] SPA（React/Vueなど）
  JavaScriptで動的に生成されるUI
  3. [ ] デザインシステム・コンポーネントライブラリのサイト
  Chakra UI、shadcn/uiなどのドキュメントサイト
  4. [ ] 自分が作ったサービスのUI
  自分のコードベースのUIを別フレームワークで再現
  5. [ ] Type something
     Submit         
──────────────────────────────────────────────────────────────
  6. Chat about this

質問を5つ答えただけで、ドラフト作成を開始してくれました

必要な情報が揃いました。スキルのドラフトを書きますね。
                                                         
  スキルの概要：                                              
  - 名前: ui-cloner     
  - URL（＋要素指定）→ 構造・スタイル解析 → React/TypeScript +
   styled-components のコードを生成                           
  - 柔軟な要素指定（自然言語・CSSセレクター・URL全体）
  - アニメーション・インタラクション込み

作成後には、テストケースを出して、レビューする流れまで誘導してくれました。

⏺ スキルのドラフトができました。次にテストケースを考えましょう。
                                                                             
  想定するテストプロンプト（案）：
                                                                                                       
  1. シンプルなUI要素 — https://stripe.com のヒーローセクションのCTAボタンを再現したい
  2. ナビゲーション — https://vercel.com                                                               
  のナビバーをReactで実装したい。ハンバーガーメニューのアニメーションも含めて
  3. カードコンポーネント — https://ui.shadcn.com/docs/components/card
  を参考に、自分のプロジェクトで使えるカードコンポーネントが作れるか確認したい
  これらのテストケースを実際に試してみますか？試した結果をレビューして、スキルの改善点を見つけていく流
  れになります。

  あるいは、ドラフト自体に対してまずフィードバックがあれば聞かせてください。

⏺ ブラウザから直接開けない環境のようです。HTMLファイルは生成できています。

  Finder またはターミナルから開いてください：
  open /private/tmp/claude-502/ui-cloner-workspace/iteration-1/review.html

  ---
  ここまでで確認できたこと（ご参考）：

  定量アサーションは with_skill・without_skill 両方とも 100% パスでした。これは予想通りで、アサーションが「styled-componentsのim
  portがあるか」「hover状態があるか」といった最低要件しか確認していないためです。

  重要なのは 定性的な差異 です。reviewerの「Outputs」タブで以下を確認してほしいです：

  ┌──────────────────────┬─────────────────────────────────────────────────────────────────────────────────────────────┐
  │         観点         │                                        確認ポイント                                         │
  ├──────────────────────┼─────────────────────────────────────────────────────────────────────────────────────────────┤
  │ analysis.md の構造   │ スキルありは「Layout / Colors / Typography / Interactions / Limitations」と整理されているか │
  ├──────────────────────┼─────────────────────────────────────────────────────────────────────────────────────────────┤
  │ feasibility コメント │ shadcnカードでスキルありだけが「Feasibility: Excellent」のセクションを書いているか          │
  ├──────────────────────┼─────────────────────────────────────────────────────────────────────────────────────────────┤
  │ コードのコメント     │ 非自明なスタイリングに理由コメントがあるか                                                  │
  ├──────────────────────┼─────────────────────────────────────────────────────────────────────────────────────────────┤
  │ 全体的な一貫性       │ ワークフローが守られているか（解析→確認→コード生成）                                        │
  └──────────────────────┴─────────────────────────────────────────────────────────────────────────────────────────────┘

  レビューが終わったら「レビュー完了」と教えてください。フィードバックをもとにスキルを改善します。

作成したSkill

めっっちゃ英語。
日本語で作成してほしいのは、CLAUDE.mdに書いておいた方が良さそう。

---
name: ui-cloner
description: Analyze and reconstruct UI elements or full pages from any public website as React/TypeScript components with styled-components. Use this skill whenever the user shares a URL and wants to recreate, clone, reference, or rebuild a UI element or page layout in their own codebase. Trigger on phrases like "このサイトのUI", "このデザイン再現したい", "参考に実装したい", "UIをクローンして", "このコンポーネント作って", "似たようなUI", or whenever the user provides a URL alongside a description of a UI element they'd like to build, even if they don't say "clone" explicitly. Also trigger when the user wants to check if a design is feasible in their own tech stack.
---

# UI Cloner

## Goal

Fetch a URL, analyze its UI structure and visual design, then recreate the target element (or full page) as a clean React/TypeScript component with styled-components — faithful to the original visually, but idiomatic and maintainable in code.

This skill helps users check feasibility ("can I build something like this?") and get a working starting point they can adapt.

---

## Default Tech Stack

- **Framework**: React + TypeScript
- **Styling**: styled-components (or Emotion — use whichever the user prefers or specifies)
- **Animations**: CSS transitions/keyframes via styled-components; use Framer Motion only if the user requests or the animation is genuinely complex

If the user specifies a different framework (Vue, plain HTML/CSS, etc.), honor that instead.

---

## Input Interpretation

Accept any of these — no need to ask the user to change their format:

| Input | How to handle |
|-------|---------------|
| URL only | Analyze the full page; ask which section to focus on if it's complex |
| URL + natural language (e.g., "the sticky header", "the card grid") | Focus on that element |
| URL + CSS selector (e.g., `.hero-section`, `#nav`) | Precisely target that element |
| URL + screenshot or description | Use all available context |

---

## Workflow

### Step 1: Fetch and Analyze

Use WebFetch to retrieve the page. Write a detailed prompt like:

> "Extract the HTML structure, CSS classes, inline styles, color values, font families, spacing patterns, border/shadow details, and any animation-related classes (like Tailwind animate-*, CSS transitions). Focus on [element if specified]. Also note interactive states (hover, focus, active) if visible."

If the page references external CSS stylesheets (especially for design system documentation sites), consider fetching those as well for accurate style information.

**What to look for:**
- **Layout**: flexbox/grid structure, spacing rhythm, container widths
- **Colors**: exact hex/rgb values from inline styles; infer from class names (Tailwind, Bootstrap, custom design tokens)
- **Typography**: font families, sizes, weights, line heights, letter spacing
- **Borders & shadows**: box-shadow values, border-radius, border colors
- **Interactions**: hover effects, focus rings, active states, transitions
- **Animations**: keyframe names, transition durations and easings
- **Responsive hints**: breakpoint-related class names, media query patterns

**Known limitations:**
- WebFetch captures the initial HTML; JavaScript-rendered content may be incomplete
- Computed CSS is not available — infer styles from class names and inline styles
- Proprietary fonts will be substituted with a similar Google Font

For design system documentation sites (Chakra UI, shadcn/ui, Material UI, etc.), the source code is usually on GitHub. Consider searching for the component's source if the docs alone aren't enough.

### Step 2: Summarize Your Analysis

Before writing code, share what you found in a brief, scannable summary:

```
**What I found:**
- Layout: [e.g., flexbox row with gap-4, sticky top-0]
- Colors: [e.g., bg #1a1a2e, text #eee, accent #7c3aed]
- Typography: [e.g., Inter 16px/1.5, headings 600 weight]
- Interactions: [e.g., hover scale 1.02, 200ms ease transition on links]
- Limitations: [e.g., custom font → substituting with Inter from Google Fonts]
```

Then ask: **"Does this look right? Anything to adjust before I generate the code?"**

This step avoids wasting time on code the user won't like. Skip it only if the element is very simple.

### Step 3: Generate the Component

Output a complete, runnable React/TypeScript component. Structure based on complexity:

**Simple (single element):**
```
ComponentName.tsx  ← component + styled-components in one file
```

**Complex (multiple sub-elements or many styles):**
```
ComponentName/
├── index.tsx          ← main component logic
├── styled.ts          ← all styled-components
└── types.ts           ← TypeScript interfaces (if needed separately)
```

**Code quality guidelines:**
- Use semantic HTML (`<nav>`, `<main>`, `<section>`, `<article>`, `<button>`, etc.)
- Define TypeScript props with explicit types (no `any`)
- Use meaningful variable and component names — not `Wrapper1`, `Container2`
- Comment non-obvious styling decisions, e.g.:
  ```typescript
  // Original uses a subtle 1px shadow on hover to simulate elevation
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  ```
- Replicate hover, focus, and active states
- Include transitions and animations
- Use CSS variables or constants for repeated values like brand colors

**Example output structure:**
```tsx
// NavigationBar.tsx
import React, { useState } from 'react';
import styled from 'styled-components';

interface NavItem {
  label: string;
  href: string;
}

interface NavigationBarProps {
  items: NavItem[];
  logo?: React.ReactNode;
}

export const NavigationBar: React.FC<NavigationBarProps> = ({ items, logo }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Nav>
      <LogoWrapper>{logo}</LogoWrapper>
      <NavList>
        {items.map((item) => (
          <NavItem key={item.href}>
            <NavLink href={item.href}>{item.label}</NavLink>
          </NavItem>
        ))}
      </NavList>
    </Nav>
  );
};

const Nav = styled.nav`
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
  background: #ffffff;
  /* Subtle bottom border to visually ground the nav */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
`;

const NavLink = styled.a`
  color: #374151;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease;

  &:hover {
    background-color: #f3f4f6;
    color: #111827;
  }
`;
// ... etc.
```

### Step 4: Offer Adjustments

After generating, proactively offer:
- Color/spacing/typography tweaks
- Responsive breakpoints (if not already included)
- Integration with the user's existing design tokens or theme
- Additional interactive states or accessibility improvements (aria attributes, focus management)
- Framer Motion upgrade for smoother animations

---

## Handling Common Challenges

**JavaScript-rendered content (SPAs):**
WebFetch may only capture the skeleton HTML. In this case:
- Note it clearly: "This site renders with JavaScript — I can only see the initial HTML."
- Use visible structure + class names as your guide
- If the element is simple, proceed anyway; if complex, ask the user to paste the rendered HTML from browser DevTools

**Design system docs (Chakra, shadcn, MUI, etc.):**
These sites are often open source. Suggest looking up the component source on GitHub for exact styles and tokens. The documentation pages often include interactive examples with visible source code tabs — use those.

**Custom or proprietary fonts:**
- Name the font you found (e.g., "Geist Sans")
- Substitute with a visually similar Google Font (e.g., "Inter")
- Add the Google Fonts `<link>` import as a comment in the output

**Images and icons:**
- Use semantic placeholder descriptors for images, not hardcoded external URLs
- Describe icon shapes/meaning so the user can pick their preferred icon library
- Example: `{/* Replace with your icon: a right-pointing chevron */}`

**Complex scroll-triggered animations:**
- Implement with Intersection Observer API or note that it requires a library
- Provide a static approximation first, then offer to add the animation logic

---

## Notes on Feasibility Checks

If the user's goal is to check whether a design is achievable in their stack, after generating the component, briefly comment on:
- Any aspects that were tricky to recreate and why
- Browser compatibility considerations (if relevant)
- Performance considerations for animations or complex layouts

実際にSkillを元に生成されたもの

「https://vercel.com のナビゲーションバーを再現したい」というテストケースで、Claude にコード生成してもらいました。

生成したものを入れたCodeSandbox

Desktop

本家 https://vercel.com

hoverして表示される細かいメニューの再現はできてませんが、再現度は高そうです。URLとセレクターで指示して、細かいところの再現も試してみようと思います！

Skillを作ってみた感想

初めてでも形にはなりました！
Claudeに要件を伝えるとき、質問に回答する形式で初めての作成でもわかりやすかったです

もっとグラフィカルなhoverアニメーションなども再現できるように改造していこうと思います。

必要なことは聞いてくれるので、最初は「やりたいことをざっくり投げてみる。」で良いのかも

使用制限にすぐ当たらないように、かからないように工夫が必要

CLAUDE.md を整備して前提条件を自動で読み込ませる
具体的な指示でタスクを小さく分割して実行する
完了したら /clear で履歴をリセットし、トークンを節約する

参考：Claude Code の使用量上限とうまく付き合う方法

（今回はざっくり指示ばかり＋同じチャットで指示してたので、すぐ引っかかってしまいました💦）