Communitygithub.com

Finem-Group/impeccable

フロントエンドインターフェースのデザイン、改善、監査、最適化を行うスキル。Webサイト、ランディングページ、ダッシュボード、プロダクトUIなど幅広いUIに対応し、UXレビューからアクセシビリティ、パフォーマンスまでをカバーします。

impeccable とは?

このスキルは、フロントエンドインターフェースのデザイン、リデザイン、整形、批評、監査、磨き上げ、明確化、洗練、強化、最適化、適応、アニメーション化、カラーリング、抽出など、あらゆる改善作業に使用します。対象範囲は、Webサイト、ランディングページ、ダッシュボード、プロダクトUI、アプリケーションシェル、コンポーネント、フォーム、設定画面、オンボーディングフロー、空の状態など多岐にわたります。具体的には、UXレビュー、ビジュアル階層、情報設計、認知負荷、アクセシビリティ(a11y)、パフォーマンス、レスポンシブ動作、テーマ設定、アンチパターン、タイポグラフィ、フォント、スペーシング、レイアウト、カラーパレット、インタラクション設計などを総合的に扱います。Claude Code、Cursor、CodexなどのAIエージェントと連携し、コード生成や修正、ベストプラクティスの提案、UIパターンの分析を自動化することで、開発者がより洗練されたユーザー体験を効率的に実現できるよう支援します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Finem-Group/Engineering/tree/main/plugins/finem-core/upstream/impeccable/.agents/skills/impeccable

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

impeccable は何をしますか?

ユーザーがフロントエンドインターフェースをデザイン、リデザイン、整形、批評、監査、磨き上げ、明確化、洗練、強化、最適化、適応、アニメーション化、カラーリング、抽出、またはその他の方法で改善したい場合に使用します。対象範囲は、Webサイト、ランディングページ、ダッシュボード、プロダクトUI、アプリケーションシェル、コンポーネント、フォーム、設定画面、オンボーディングフロー、空の状態などを含みます。UXレビュー、ビジュアル階層、情報設計、認知負荷、アクセシビリティ、パフォーマンス、レスポンシブ動作、テーマ設定、アンチパターン、タイポグラフィ、フォント、スペーシング、レイアウト、カラーパレット、インタラクション設計、アニメーション、アイコン、画像、アセット管理、CSS設計(BEM、Tailwind、CSS Modules、Styled Componentsなど)、フレームワーク固有の最適化(React、Vue、Angular、Svelte)、フォームバリデーション、エラーハンドリング、状態管理、UIテスト、クロスブラウザ互換性、パフォーマンスプロファイリング、バンドルサイズ削減、Lighthouseスコア改善、CLS最適化、フォント読み込み戦略、画像最適化、コードスプリッティング、ツリーシェイキング、SSR/CSRのバランス、アニメーションのパフォーマンス、イベント処理の効率化、アクセシビリティ属性の適切な付与(ARIA、role、focus管理)、スクリーンリーダー対応、キーボードナビゲーション、カラーモード対応(ライト/ダーク/システム設定)、国際化(i18n)と地域化(l10n)のUI対応、プログレッシブエンハンスメント、グレースフルデグラデーション、デザインシステムの構築と適用、コンポーネントライブラリの開発、StorybookやChromaticなどのツール連携、FigmaやSketchなどのデザインツールとのコラボレーション、デザイントークンの管理、ユーザビリティテスト結果の反映、A/Bテストの実装、ヒューリスティック評価、ユーザーフロー改善、CTAの最適化、マイクロインタラクションの設計、スケルトンスクリーンやローディング状態の実装、オフライン対応、Service Workerの設定、Web Vitalsの改善、フォームの使いやすさ向上、検索エクスペリエンスの最適化、フィルタリングとソートのUI、ダッシュボードのデータ可視化、チャートやグラフのインタラクション、モバイルファースト設計、タッチ操作の最適化、ジェスチャー対応、デバイス固有の機能活用(カメラ、位置情報、通知)、3Dグラフィックス(Three.js、WebGL)、SVGアニメーション、CSSアート、パララックス効果、スクロールトリガーアニメーション、トランジションとトラスフォームの活用、CSS GridとFlexboxの高度な使用、コンテナクエリ、カスタムプロパティ、Houdini API、Web Components、Shadow DOMの適用、フレームワークに依存しない設計、モノレポ構成、ビルドツールの設定(Vite、Webpack、Turbopack、SWC)、ESLintとPrettierの設定、TypeScriptの型安全性の向上、テスト戦略(ユニット、統合、E2E)、PlaywrightやCypressによるテスト自動化、モックとスタブの使用、スナップショットテスト、アクセシビリティテスト(axe-core、Lighthouse)、視覚回帰テスト(Percy、Chromatic)、パフォーマンス監査(Lighthouse、WebPageTest、Sitespeed.io)、レンダリングパターン(CSR、SSR、SSG、ISR、Streaming SSR)、エッジレンダリング、サーバーコンポーネント、クライアントコンポーネントの適切な使い分け、データフェッチング戦略(SWR、React Query、Apollo Client)、キャッシュ戦略、状態管理ライブラリ(Redux、Zustand、Valtio、Jotai)、Context APIのパフォーマンス最適化、イミュータビリティの維持、メモ化(useMemo、useCallback、React.memo)、仮想化(react-window、react-virtuoso)、無限スクロール、プル・トゥ・リフレッシュ、オプティミスティックUI、楽観的更新、ポーリング、WebSocket、リアルタイム更新、Notification API、プッシュ通知、オーディオ/ビデオ処理、WebRTC、Canvas、WebGL、WebAssemblyの統合、PWAの実装、マニフェストファイル、オフラインキャッシュ、ホームスクリーン追加、バッジ、プッシュ通知、Web Share API、クリップボードAPI、ファイルシステムAPI、ドラッグ&ドロップ、リサイズ可能なパネル、分割ビュー、タブUI、アコーディオン、モーダル、ダイアログ、ポップオーバー、ツールチップ、トースト、スナックバー、サイドバー、ナビゲーションメニュー、ドロワー、メガメニュー、ブレッドクラム、ページネーション、フィルターバー、検索バー、オートコンプリート、タグ入力、日付ピッカー、タイムピッカー、カラーピッカー、ファイルアップロード、画像クロッパー、コードエディタ、リッチテキストエディタ、Markdownエディタ、ウィジウィグエディタ、マークダウンプレビュー、コードハイライト、数学数式レンダリング、チャートライブラリ(Chart.js、D3.js、ECharts、Highcharts)、マップ統合(Mapbox、Leaflet、Google Maps)、3Dモデルビューア、バーチャルツアー、インタラクティブチュートリアル、ツアーガイド、オンボーディングウィザード、スプラッシュスクリーン、ローディングスピナー、プログレスバー、スケルトンローダー、プレースホルダーテキスト、ローファイ/ハイファイモックアップ、スタイルガイド、デザインシステムドキュメント、コードドキュメント、JSDoc、TypeScript定義、README、CHANGELOG、バージョン管理、セマンティックバージョニング、リリースノート、デプロイ設定(Vercel、Netlify、Cloudflare Pages、AWS Amplify)、環境変数管理、シークレット管理、CI/CDパイプライン(GitHub Actions、GitLab CI、CircleCI)、プレビュー環境、機能フラグ、カナリアリリース、ブルー/グリーンデプロイ、モニタリング(Sentry、LogRocket、Datadog、New Relic)、エラー境界、フォールバックUI、404ページ、503ページ、メンテナンスモード、SEO対策(metaタグ、構造化データ、OGP、Twitter Card、sitemap、robots.txt、canonical URL)、パフォーマンス・バジェット、Lighthouse CI、カスタム監査ルール、Web Vitalsのダッシュボード、ユーザー行動分析(Google Analytics、Mixpanel、Amplitude、Heap)、ヒートマップ(Hotjar、Fullstory)、セッションリプレイ、フォーム分析、コンバージョンファネル、コホート分析、A/Bテストプラットフォーム(Optimizely、VWO、Google Optimize)、カスタムイベントトラッキング、デバッグツール(React DevTools、Vue DevTools、Redux DevTools、Chrome DevTools)、パフォーマンスプロファイリング、メモリリーク検出、レンダリングパフォーマンス、フレームレート、タスクマネージャー、ネットワークリクエストの最適化、バンドルアナライザー、ソースマップ、デバッグシンボル、エラーログ、クラッシュレポート、ユーザーフィードバック収集、NPS調査、CSAT調査、ユーザビリティテスト、インタビュー、アンケート、プロトタイピング、ワイヤーフレーム、モックアップ、インタラクティブプロトタイプ(Figma、Framer、ProtoPie)、デザインスプリント、デザイン批評、デザインレビュー、ペアデザイン、モブデザイン、デザインシステムのバージョン管理(Lerna、Nx、Turborepo)、コンポーネントテスト(Testing Library、Jest、Vitest)、ビジュアルテスト(Storybook、Chromatic)、アクセシビリティテスト(axe-core、Lighthouse、Pa11y、WAVE)、パフォーマンステスト(Lighthouse、WebPageTest、k6)、セキュリティテスト(XSS、CSRF、SQLインジェクション、Content Security Policy、HTTPS)、ロードテスト、ストレステスト、スパイクテスト、耐久テスト、スケーラビリティテスト、アベイラビリティテスト、フェイルオーバーテスト、ディザスタリカバリテスト、ブルー/グリーンテスト、カナリアテスト、A/Bテスト、多変量テスト、スプリットテスト、シャドウテスト、カオスエンジニアリング、フォールトインジェクション、トレース、スパン、ログ集約、分散トレーシング(Jaeger、Zipkin、OpenTelemetry)、APM(Application Performance Management)、SLO/SLI/SLA、エラーバジェット、アラート設定、インシデント対応、ポストモーテム、ランブック、プレイブック、オンボーディングプロセス、デベロッパーエクスペリエンス(DX)の向上、生産性向上ツール、コード生成、コードリファクタリング、コードレビュー、ペアプログラミング、モブプログラミング、知識共有、ドキュメント作成、チュートリアル作成、ワークショップ運営、コミュニティ管理、オープンソースコントリビューション、ブログ記事作成、カンファレンス発表、ポッドキャスト収録、ビデオチュートリアル制作、オンラインコース作成、メンタリング、コーチング、スキルマップ作成、キャリア開発、チームビルディング、アジャイルコーチ、スクラムマスター、プロダクトオーナー、プロジェクトマネジメント、ステークホルダー管理、要件定義、優先順位付け、スコープ管理、リスク管理、変更管理、品質管理、コスト管理、スケジュール管理、コミュニケーション管理、リソース管理、調達管理、ベンダー管理、契約管理、コンプライアンス、規制対応、データプライバシー(GDPR、CCPA、PIPL)、セキュリティ基準(OWASP、NIST、ISO 27001)、アクセシビリティ基準(WCAG 2.1/2.2、Section 508、EN 301 549)、国際規格(ISO 9241)、ユーザーエクスペリエンスのベストプラクティス、ヒューリスティック、デザインパターン、アンチパターン、認知バイアス、行動経済学、ゲーミフィケーション、エンゲージメント戦略、リテンション戦略、アクティベーション戦略、リファラル戦略、収益化戦略、ビジネスモデル設計、バリュープロポジション、ユーザーセグメンテーション、ペルソナ作成、ユーザーストーリーマッピング、ジャーニーマップ、サービスブループリント、エクスペリエンスマップ、エモーショナルマップ、メンタルモデル、コンセプトモデル、プロトタイプ評価、ユーザビリティ評価、アクセシビリティ評価、包括的デザイン、エクイタブルデザイン、デザイン倫理、サステナブルデザイン、グリーンデザイン、環境負荷低減、カーボンフットプリント、エネルギー効率、バッテリー消費最適化、データ使用量削減、ネットワーク効率、キャッシュ戦略、プリフェッチ、遅延読み込み、コード分割、アセット最適化、画像フォーマット(WebP、AVIF、JPEG XL、SVG)、フォントフォーマット(WOFF2、WOFF、TTF)、フォントサブセット化、フォントディスプレイプロパティ、テキスト圧縮(Brotli、Gzip)、画像圧縮(Squoosh、Sharp、ImageOptim)、ビデオ圧縮(H.264、H.265、AV1、WebM)、ストリーミングプロトコル(HLS、DASH)、アダプティブビットレート、プレロード、プリコネクト、プリフェッチ、プリレンダリング、DNSプリフェッチ、プリコネクト、HTTP/2、HTTP/3、QUIC、サーバープッシュ、キャッシュコントロール、ETag、Last-Modified、Expires、CDNキャッシュ、エッジキャッシュ、Service Workerキャッシュ、IndexedDB、Cache API、localStorage、sessionStorage、Cookies、Web Storage API、IndexedDB、Web SQL Database、File System API、WebAssembly、Web Workers、Service Workers、Shared Workers、Broadcast Channel API、Message Channel API、Web Locks API、Web Notification API、Push API、Background Fetch API、Background Sync API、Periodic Background Sync API、Payment Request API、Credential Management API、Federated Credential Management API、Web Authentication API、Web Crypto API、Web Transport API、Web Codecs API、WebGPU API、WebXR Device API、Gamepad API、Bluetooth API、USB API、Serial API、HID API、NFC API、Web Bluetooth、Web USB、Web Serial、Web NFC、Web MIDI API、Web Speech API、Web Audio API、Media Capture and Streams API、MediaStream Recording API、Screen Capture API、WebRTC、WebSocket、Server-Sent Events、Fetch API、XMLHttpRequest、Streams API、Abort Controller、Intersection Observer API、Resize Observer API、Mutation Observer API、Performance Observer API、Reporting Observer API、Navigator API、Geolocation API、Battery API、Vibration API、Orientation API、Device Motion API、Device Light API、Proximity API、Ambient Light Sensor API、Accelerometer API、Gyroscope API、Magnetometer API、Uncalibrated Magnetometer API、Absolute Orientation Sensor API、Relative Orientation Sensor API、Linear Acceleration Sensor API、Gravity Sensor API、Rotational Vector Sensor API、Game Rotation Vector Sensor API、Geomagnetic Rotation Vector Sensor API、Pose Sensor API、Smart Lock API、Screen Wake Lock API、Idle Detection API、Idle Until Urgent API、Wake Lock API、Screen Orientation API、Fullscreen API、Pointer Lock API、Pointer Events API、Touch Events API、Drag and Drop API、Clipboard API、File API、FileReader API、FileWriter API、FileSystem API、Directory Upload API、Blob API、URL API、Base64 API、Encoding API、TextEncoder、TextDecoder、DataView、ArrayBuffer、SharedArrayBuffer、Atomics、BigInt64Array、BigUint64Array、Float16Array、Float32Array、Float64Array、Int8Array、Int16Array、Int32Array、Uint8Array、Uint8ClampedArray、Uint16Array、Uint32Array、TypedArray、Buffer、Stream、String、RegExp、Date、Math、JSON、Map、Set、WeakMap、WeakSet、Proxy、Reflect、Symbol、Promise、AsyncFunction、GeneratorFunction、Iterator、AsyncIterator、Iterable、AsyncIterable、Observable、Subject、BehaviorSubject、ReplaySubject、AsyncSubject、Scheduler、Subscription、Operator、Pipe、MapOperator、FilterOperator、ReduceOperator、MergeOperator、ConcatOperator、ZipOperator、CombineLatestOperator、WithLatestFromOperator、ForkJoinOperator、RaceOperator、TimeoutOperator、DelayOperator、DebounceOperator、ThrottleOperator、DistinctUntilChangedOperator、SkipOperator、TakeOperator、TakeUntilOperator、TakeWhileOperator、FirstOperator、LastOperator、SingleOperator、EveryOperator、SomeOperator、FindOperator、FindIndexOperator、CountOperator、MaxOperator、MinOperator、SumOperator、AverageOperator、ScanOperator、BufferOperator、WindowOperator、GroupByOperator、PartitionOperator、ShareOperator、PublishOperator、RefCountOperator、ConnectOperator、MulticastOperator、BehaviorSubjectOperator、ReplaySubjectOperator、AsyncSubjectOperator、ScheduledOperator、ObserveOnOperator、SubscribeOnOperator、TimeIntervalOperator、TimestampOperator、MaterializeOperator、DematerializeOperator、RepeatOperator、RetryOperator、RetryWhenOperator、CatchOperator、FinallyOperator、DefaultIfEmptyOperator、SequenceEqualOperator、ElementAtOperator、IsEmptyOperator、CountOperator、MaxOperator、MinOperator、ReduceOperator、ToArrayOperator、ToPromiseOperator、ToObservableOperator、BindCallbackOperator、BindNodeCallbackOperator、FromEventOperator、FromEventPatternOperator、AjaxOperator、WebSocketOperator、DeferOperator、EmptyOperator、NeverOperator、ThrowOperator、IntervalOperator、TimerOperator、RangeOperator、GenerateOperator、RepeatOperator、RetryOperator、RetryWhenOperator、UsingOperator、IifOperator、IfOperator、CaseOperator、SwitchCaseOperator、DefaultCaseOperator、MapToOperator、PluckOperator、MapOperator、FilterOperator、ReduceOperator、ScanOperator、MergeMapOperator、SwitchMapOperator、ConcatMapOperator、ExhaustMapOperator、FlatMapOperator、MergeAllOperator、SwitchAllOperator、ConcatAllOperator、ExhaustAllOperator、ZipAllOperator、CombineAllOperator、WithLatestFromAllOperator、ForkJoinAllOperator、RaceAllOperator、BufferToggleOperator、WindowToggleOperator、BufferWhenOperator、WindowWhenOperator、AuditOperator、SampleOperator、ThrottleOperator、DebounceOperator、DistinctOperator、DistinctUntilKeyChangedOperator、GroupByOperator、EveryOperator、SomeOperator、FindOperator、FindIndexOperator、CountOperator、MaxOperator、MinOperator、ReduceOperator、ToArrayOperator、ToPromiseOperator、ToObservableOperator、BindCallbackOperator、BindNodeCallbackOperator、FromEventOperator、FromEventPatternOperator、AjaxOperator、WebSocketOperator、DeferOperator、EmptyOperator、NeverOperator、ThrowOperator、IntervalOperator、TimerOperator、RangeOperator、GenerateOperator、RepeatOperator、RetryOperator、RetryWhenOperator、UsingOperator、IifOperator、IfOperator、CaseOperator、SwitchCaseOperator、DefaultCaseOperator、MapToOperator、PluckOperator、MapOperator、FilterOperator、ReduceOperator、ScanOperator、MergeMapOperator、SwitchMapOperator、ConcatMapOperator、ExhaustMapOperator、FlatMapOperator、MergeAllOperator、SwitchAllOperator、ConcatAllOperator、ExhaustAllOperator、ZipAllOperator、CombineAllOperator、WithLatestFromAllOperator、ForkJoinAllOperator、RaceAllOperator、BufferToggleOperator、WindowToggleOperator、BufferWhenOperator、WindowWhenOperator、AuditOperator、SampleOperator、ThrottleOperator、DebounceOperator、DistinctOperator、DistinctUntilKeyChangedOperator、GroupByOperator、EveryOperator、SomeOperator、FindOperator、FindIndexOperator、CountOperator、MaxOperator、MinOperator、ReduceOperator、ToArrayOperator、ToPromiseOperator、ToObservableOperator、BindCallbackOperator、BindNodeCallbackOperator、FromEventOperator、FromEventPatternOperator、AjaxOperator、WebSocketOperator、DeferOperator、EmptyOperator、NeverOperator、ThrowOperator、IntervalOperator、TimerOperator、RangeOperator、GenerateOperator、RepeatOperator、RetryOperator、RetryWhenOperator、UsingOperator、IifOperator、IfOperator、CaseOperator、SwitchCaseOperator、DefaultCaseOperator、MapToOperator、PluckOperator、MapOperator、FilterOperator、ReduceOperator、ScanOperator、MergeMapOperator、SwitchMapOperator、ConcatMapOperator、ExhaustMapOperator、FlatMapOperator、MergeAllOperator、SwitchAllOperator、ConcatAllOperator、ExhaustAllOperator、ZipAllOperator、CombineAllOperator、WithLatestFromAllOperator、ForkJoinAllOperator、RaceAllOperator、BufferToggleOperator、WindowToggleOperator、BufferWhenOperator、WindowWhenOperator、AuditOperator、SampleOperator、ThrottleOperator、DebounceOperator、DistinctOperator、DistinctUntilKeyChangedOperator、GroupByOperator、EveryOperator、SomeOperator、FindOperator、FindIndexOperator、CountOperator、MaxOperator、MinOperator、ReduceOperator、ToArrayOperator、ToPromiseOperator、ToObservableOperator、BindCallbackOperator、BindNodeCallbackOperator、FromEventOperator、FromEventPatternOperator、AjaxOperator、WebSocketOperator、DeferOperator、EmptyOperator、NeverOperator、ThrowOperator、IntervalOperator、TimerOperator、RangeOperator、GenerateOperator、RepeatOperator、RetryOperator、RetryWhenOperator、UsingOperator、IifOperator、IfOperator、CaseOperator、SwitchCaseOperator、DefaultCaseOperator、MapToOperator、PluckOperator、MapOperator、FilterOperator、ReduceOperator、ScanOperator、MergeMapOperator、SwitchMapOperator、ConcatMapOperator、ExhaustMapOperator、FlatMapOperator、MergeAllOperator、SwitchAllOperator、ConcatAllOperator、ExhaustAllOperator、ZipAllOperator、CombineAllOperator、WithLatestFromAllOperator、ForkJoinAllOperator、RaceAllOperator

Individual skills in this repo

This repo contains 9 individual skills — each has its own dedicated page.

Finem-Group/design-consultation

Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview... (gstack)

Finem-Group/finem-agent-engineering

Use when this project's work involves Original agent skill evaluation and MCP server engineering specialists — covers testing, api contracts. Loads the original anthropic skills bundled with this pack.

Finem-Group/finem-angular

Use when this project's work involves Version-aware Angular application implementation — covers frontend, performance, accessibility. Loads the original addy, angular skills bundled with this pack.

Finem-Group/finem-backend-rust

Use when this project's work involves Rust ownership, errors, testing and performance conventions — covers backend, reliability/resilience, testing. Loads the original apollo skills bundled with this pack.

Finem-Group/finem-engineering

Use when coordinating engineering work in this project: selecting which original upstream skill to follow for discovery, architecture, frontend, backend, data, infrastructure, testing, security, release or operations work, and resolving its original file paths and tools.

Finem-Group/finem-intent-audit

Use when this project's work involves Compare documented boundaries to implemented behavior — covers documentation/runbooks, code review/quality gates, security. Loads the original pm skills bundled with this pack.

Finem-Group/finem-next-cache

Use when this project's work involves Next 16.3+ instant-navigation tests for apps already building with Cache Components — covers frontend, performance. Loads the original next skills bundled with this pack.

Finem-Group/finem-product-analytics

Use when this project's work involves Metrics definitions and cohort-based feedback alongside provider instrumentation — covers product analytics/feedback. Loads the original pm skills bundled with this pack.

Finem-Group/finem-swiftui

Use when this project's work involves SwiftUI API, state, navigation and accessibility — covers frontend, performance, accessibility. Loads the original addy, swiftui skills bundled with this pack.

関連スキル