跳到正文
cccskills
免费在 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.

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(1)

  • SKILL.md2.4 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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 を割り、可読性を犠牲にする。

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

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.

中文简介正在准备中。当前显示原文说明。

Akira-Papa/claude-code-nextjs-mongo-template-162026年5月24日 更新

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.

中文简介正在准备中。当前显示原文说明。

Akira-Papa/claude-code-nextjs-mongo-template-162026年5月24日 更新

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

中文简介正在准备中。当前显示原文说明。

Akira-Papa/claude-code-nextjs-mongo-template-162026年5月24日 更新

bootstrap

免费

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.

中文简介正在准备中。当前显示原文说明。

Akira-Papa/claude-code-nextjs-mongo-template-162026年5月24日 更新

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.

中文简介正在准备中。当前显示原文说明。

Akira-Papa/claude-code-nextjs-mongo-template-162026年5月24日 更新

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.

中文简介正在准备中。当前显示原文说明。

Akira-Papa/claude-code-nextjs-mongo-template-162026年5月24日 更新

查看 Akira-Papa 的全部技能

报告此技能的问题