世界トップクラスのWebサイトを構築するためのClaude Codeのスキルの包括的なコレクション。 これらのスキルは、ビジュアル哲学とレスポンシブパターンからフルウェブサイトのリビルドパイプラインまで、一貫した設計システムとして機能します。

Ruh AI で Jesseangularn によって構築されました。

お問い合わせ

これらは何ですか?

これらはClaude Codeのスキル — 特定のドメインでClaudeの深い専門知識を与える構造化された指示です。 [~/.claude/skills/]ディレクトリとClaudeは、生産レベルのウェブサイトをエージェンシーレベルの品質で構築する能力を得る。

システムは、AI Slop Testを通過するサイトを生成するように設計されています。誰かが出力を見て、「AIがこれを作りました」と言いました。

お問い合わせ

スキルの概要

##1. フロントエンドデザイン([[T1])

中心の視覚設計哲学。 一般的なAIの美学を避ける大胆で特徴的なインターフェイスを作る方法を定義します。

主なコンセプト:

• 骨の美的方向 — 極端でコミットを選ぶ
• ティポグラフィ:独特のフォントペアリング(禁止されたフォントリスト付き)
• CSS カスタムプロパティのカラーシステム
• モーション:CSSのみのアニメーション、驚いた明らかに、スクロールトリガー効果

Web Design System Skills for Claude Code

A comprehensive collection of Claude Code skills for building world-class websites. These skills work together as an integrated design system — from visual philosophy and responsive patterns to full website rebuild pipelines.

Built by Jesse Anglen at Ruh AI.

---

What Are These?

These are Claude Code skills — structured instructions that give Claude deep expertise in specific domains. Drop them into your ~/.claude/skills/ directory and Claude gains the ability to build production-grade websites with agency-level quality.

The system is designed to produce sites that pass the AI Slop Test: if someone looked at the output and was told “AI made this,” they wouldn’t believe it.

---

Skills Overview

1. Frontend Design (01-frontend-design/)

The core visual design philosophy. Defines how to make bold, distinctive interfaces that avoid generic AI aesthetics.

Key concepts:

• Bold aesthetic direction — pick an extreme and commit
• Typography: distinctive font pairings (with a banned font list)
• Color systems with CSS custom properties
• Motion: CSS-only animations, staggered reveals, scroll-triggered effects
• Spatial composition: asymmetry, overlap, grid-breaking layouts
• Visual depth: textures, gradients, layered compositions

Use when: Building any UI component, page, or application.

---

2. Responsive Design (02-responsive-design/)

Mobile-first layout patterns, breakpoint systems, fluid typography, and container queries.

Key concepts:

• Standard breakpoint system (640/768/1024/1280/1536px)
• Mobile-first with min-width media queries only
• CSS Grid auto-responsive patterns (no media queries needed)
• Fluid typography with clamp()
• Container queries for component-level responsiveness
• Responsive images with srcset and ``
• Testing checklist for all viewport sizes

Use when: Any UI that must work across mobile, tablet, and desktop.

---

3. Web Design Guidelines (03-web-design-guidelines/)

Reviews UI code against Vercel’s Web Interface Guidelines for compliance.

How it works:

1. Fetches latest guidelines from Vercel’s repo
2. Reads specified files
3. Checks against all rules
4. Outputs findings in file:line format

Use when: Reviewing or auditing existing UI code.

---

4. Theme Factory (04-theme-factory/)

10 pre-built professional themes with color palettes and font pairings, plus custom theme generation.

Available themes:

1. Ocean Depths — Professional maritime
2. Sunset Boulevard — Warm, vibrant
3. Forest Canopy — Natural earth tones
4. Modern Minimalist — Clean grayscale
5. Golden Hour — Rich autumnal
6. Arctic Frost — Cool winter
7. Desert Rose — Soft, sophisticated
8. Tech Innovation — Bold, modern
9. Botanical Garden — Fresh, organic
10. Midnight Galaxy — Dramatic, cosmic