Skip to content
cccskills
FreePublished on GitHub

frontend-design-house

Use this skill when creating new UI from scratch, doing a visual design pass, or when output risks looking like generic AI-generated design. Trigger words: UI 作成, デザイン, 画面を作る, 見た目を良く, デザイン改善, ランディング, ヒーロー, おしゃれに, AIっぽい, design pass.

The English summary is being prepared. Showing the original description.

See how to install

Files included (1)

  • SKILL.md2.4 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Frontend Design House(脱・AIっぽさ)

いつ使うか

  • 画面・ランディング・コンポーネントを新規にデザインするとき。
  • 「もっと良い見た目に」「おしゃれに」とデザイン改善を頼まれたとき。
  • 出力が「いかにも AI 生成」になりそうなとき(/design-pass の中核)。

やること

  • 先にコンセプト(誰に・どんな印象を・1 つの主役)を言語化してから作る。
  • タイポグラフィに個性を持たせる(本文と見出しでコントラスト、Inter 一択にしない)。
  • 色は意味のあるパレット(ブランド 1 + アクセント + ニュートラル)。グラデは多用しない。
  • レイアウトに緩急(余白・サイズ・非対称)をつけ、等間隔グリッドの単調さを避ける。
  • 公式の frontend-design / theme-factory / brand-guidelines スキル(_external/)があれば参照。

守るルール

  • ❌ 紫グラデ + Inter + 平凡な等間隔カードグリッドの量産禁止。
  • ✅ コンポーネントは shadcn/ui ベース(tailwind-v4-shadcn と併用)。
  • ✅ アクセシビリティ(AA・focus-visible・aria)は装飾より優先。
  • ✅ 1 画面に主役を 1 つ。情報の優先順位を視覚的に表す。

典型例(設計の進め方)

1. 目的とトーンを 1 行で(例:「個人開発者向け、無骨で速そうな印象」)
2. タイポ: 見出し=幾何サンセリフ太め / 本文=可読性重視。サイズ比は最低 1.33
3. 色: brand=深い青緑 / accent=橙 / neutral=温かいグレー。グラデは影程度に限定
4. レイアウト: ヒーローは非対称、以降はリズムを変えるセクション
5. 実装: shadcn/ui + Tailwind トークン。最後にコントラスト/フォーカス検証

アンチパターン

  • 紫〜青の斜めグラデ背景 + 白文字 + 同サイズカード 3 列(テンプレ感の塊)。
  • 全テキスト同色・同サイズで階層が無い。
  • 装飾を盛ってコントラスト AA を割り、可読性を犠牲にする。

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Use this skill when creating or reviewing Next.js Route Handlers (app/api), adding rate limiting, input validation, or auth to API endpoints. Trigger words: API ルート, Route Handler, app/api, エンドポイント, レート制限, 入力検証, CORS, ヘッダー, 認証付き API, hardening.

The English summary is being prepared. Showing the original description.

Akira-Papa/claude-code-nextjs-mongo-template-16Updated May 24, 2026

Use this skill when implementing full-text search, autocomplete, or vector/semantic search and RAG with MongoDB Atlas. Trigger words: 全文検索, あいまい検索, オートコンプリート, ベクトル検索, セマンティック検索, 類似検索, Atlas Search, $search, $vectorSearch, RAG, embedding.

The English summary is being prepared. Showing the original description.

Akira-Papa/claude-code-nextjs-mongo-template-16Updated May 24, 2026

Use this skill when implementing sign-in, sessions, authorization checks, or protecting routes and Server Actions. Trigger words: 認証, ログイン, サインイン, セッション, 認可, 権限チェック, Better Auth, Auth.js, 保護, ミドルウェア, getSession.

The English summary is being prepared. Showing the original description.

Akira-Papa/claude-code-nextjs-mongo-template-16Updated May 24, 2026

Use this skill when starting a new session, opening this project for the first time, or when you need to recall the project's tech stack, hard rules, and which other skills exist. Trigger words: セッション開始, このプロジェクト, 全体像, どのスキル, 何から, getting started, overview.

The English summary is being prepared. Showing the original description.

Akira-Papa/claude-code-nextjs-mongo-template-16Updated May 24, 2026

Use this skill when setting up or modifying CI pipelines, GitHub Actions workflows, or automated checks (lint, typecheck, test, build) for this project. Trigger words: CI, GitHub Actions, ワークフロー, パイプライン, 自動テスト, lint チェック, typecheck, ビルド検証, .github/workflows.

The English summary is being prepared. Showing the original description.

Akira-Papa/claude-code-nextjs-mongo-template-16Updated May 24, 2026

Use this skill when writing end-to-end tests, browser automation, or verifying user flows in a real browser. Trigger words: E2E, Playwright, ブラウザテスト, ユーザーフロー, 結合テスト, シナリオテスト, ログインテスト, getByRole, expect.

The English summary is being prepared. Showing the original description.

Akira-Papa/claude-code-nextjs-mongo-template-16Updated May 24, 2026

See all skills by Akira-Papa

Report a problem with this skill