📦
code-review-and-quality
785つの品質軸でコードをレビュー
コード変更には、正確性、セキュリティ、アーキテクチャ、可読性、パフォーマンスに関する問題が潜んでいる可能性があります。このスキルは、体系的なレビュープロセスを適用し、優先順位が明確で実行可能なフィードバックを提供します。
コーディング＆開発 表示
スキル frontend-ui-engineering
📦
frontend-ui-engineering
コンテンツリビジョン r1 安全 ⚙️ 外部コマンド📁 ファイルシステムへのアクセス
Build Accessible, Production-Ready Frontends
Frontend work can become inconsistent, inaccessible, or difficult to maintain. This skill guides component architecture, responsive layouts, state handling, and polished user experiences.
対応: Claude Codex Code(CC)
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
エージェントリクエスト
Review the Skillstore skill "frontend-ui-engineering" from https://skillstore.io/skills/addyosmani-frontend-ui-engineering.md and its manifest at https://skillstore.io/api/skills/addyosmani-frontend-ui-engineering/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「frontend-ui-engineering」を使用しています。 Design a task list that works on mobile and supports keyboard users.
期待される結果:
A component plan with a task list, task item, loading skeleton, error state, empty state, keyboard behavior, and responsive layout rules.
「frontend-ui-engineering」を使用しています。 Review a dialog that opens without moving focus.
期待される結果:
A focused accessibility review recommending initial focus, a labeled close control, focus containment, keyboard dismissal, and restoration of focus.
「frontend-ui-engineering」を使用しています。 Improve a dashboard using oversized cards and decorative gradients.
期待される結果:
A visual review prioritizing information hierarchy, purposeful spacing, design-system colors, restrained surfaces, and layouts optimized for scanning.
セキュリティ監査
安全v1 • 2026/9/19 バージョン別レポートを開く
All 36 static matches are false positives caused by Markdown fences, inline backticks, illustrative frontend code, or documentation links. No prompt injection, data exfiltration, or executable command instruction was found in SKILL.md.
1
スキャンされたファイル
329
解析済み行数
0
レビュー項目
0
誤検知を無視
リスク要因
⚙️ 外部コマンド (27)
SKILL.md:26-34 SKILL.md:34-40 SKILL.md:40-58 SKILL.md:58-62 SKILL.md:62-75 SKILL.md:75-79 SKILL.md:79-99 SKILL.md:99-105 SKILL.md:105-112 SKILL.md:112-137 SKILL.md:137-143 SKILL.md:143-149 SKILL.md:149-155 SKILL.md:155-161 SKILL.md:161 SKILL.md:171-185 SKILL.md:185-189 SKILL.md:189-199 SKILL.md:199-203 SKILL.md:203-220 SKILL.md:220-224 SKILL.md:224-240 SKILL.md:240-246 SKILL.md:246-254 SKILL.md:254-260 SKILL.md:260-293 SKILL.md:293-297
📁 ファイルシステムへのアクセス (1)
最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。
監査者: codex
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/addyosmani-frontend-ui-engineering/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/addyosmani-frontend-ui-engineering?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/addyosmani-frontend-ui-engineering?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/addyosmani-frontend-ui-engineering/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/addyosmani-frontend-ui-engineering.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学術引用 (APA · BibTeX · CFF)
APA形式の引用
addyosmani. (2026). frontend-ui-engineering security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/addyosmani-frontend-ui-engineering/audits/1BibTeX形式の引用
@techreport{addyosmani-addyosmani-frontend-ui-engineering-2026,
author = {addyosmani},
title = {frontend-ui-engineering security audit report (audit version 1)},
institution = {Skillstore},
year = {2026},
number = {1},
url = {https://skillstore.io/skills/addyosmani-frontend-ui-engineering/audits/1},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-ui-engineering security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
- name: "addyosmani"
date-released: "2026-09-19"
url: "https://skillstore.io/skills/addyosmani-frontend-ui-engineering/audits/1"
identifiers:
- type: other
value: "skillstore:addyosmani-frontend-ui-engineering:audit:1"
description: "Skillstore immutable audit report identifier"
Skillstore スコア
このスコアの理由 証拠の信頼度: 中 55
アーキテクチャ
85
保守性
87
コンテンツ
65
コミュニティ
91
仕様準拠
作成できるもの
Create a New Interface
Plan a responsive page with focused components, meaningful states, and accessible interactions.
Improve an Existing Screen
Review a screen for layout, hierarchy, responsiveness, accessibility, and maintainability issues.
Establish UI Standards
Turn design-system principles into practical component and interaction guidance for a shared codebase.
これらのプロンプトを試す
Plan a Simple Component
Design a focused component for [feature]. Define its props, states, accessibility behavior, and responsive layout.
Improve a Page Layout
Review this page structure: [description]. Recommend a mobile-first layout, component boundaries, spacing, and meaningful empty states.
Audit Accessibility
Review this interface for WCAG 2.1 AA issues. Check keyboard navigation, labels, focus management, contrast, and non-color cues.
Refine a Production UI
Evaluate this frontend implementation against its design system. Identify architectural, responsive, accessibility, state, and visual-quality improvements in priority order.
ベストプラクティス
- Start with the simplest state-management approach that meets the feature needs.
- Design loading, error, empty, and success states with the primary interface.
- Test keyboard access, screen-reader structure, responsive breakpoints, and contrast.
回避
- Do not use generic visual patterns without checking the product design system.
- Do not make color the only way users understand status or action.
- Do not postpone responsive behavior and accessibility until the end.
よくある質問
Which tools does this skill support?
It supports Claude, Codex, and Claude Code.
Can it build a complete application?
It can guide implementation and produce focused frontend changes, but it does not replace project code, assets, or testing.
Does it require React?
No. The principles apply broadly, although several examples use React and TypeScript.
Does it guarantee WCAG compliance?
No. It provides WCAG-oriented guidance, but teams must test with their users and appropriate accessibility tools.
What visual problems does it address?
It addresses weak hierarchy, generic layouts, excessive decoration, inconsistent spacing, poor responsive behavior, and inaccessible interactions.
When should I use it?
Use it when creating or modifying user-facing interfaces, components, layouts, interactions, or frontend state behavior.
開発者情報
作成者
addyosmaniライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
5d5054f8a23586f9b500fece1cb613a9dffc787b
メンテナンスの新しさ
2026/9/19
利用状況
0 ダウンロード · 0 閲覧
ファイル構成
📄 SKILL.md
addyosmani のその他のスキル
すべて表示📦
interview-me
78Clarify User Intent Before You Build
Underspecified requests cause teams to build the wrong outcome and discover misalignment late. This skill runs a focused, one-question interview that turns ambiguity into confirmed intent.
コミュニケーション 表示
📦
planning-and-task-breakdown
78Plan Work Into Verifiable Tasks
Large or vague software work can hide dependencies, missing acceptance criteria, and verification gaps. This skill converts a specification into ordered task slices with checkpoints, scope guidance, and clear completion conditions.
生産性 表示
📦
documentation-and-adrs
78Document Decisions and Architecture Clearly
Teams lose context when important technical decisions remain in chat, code comments, or individual memory. This skill turns architectural reasoning, API guidance, project instructions, and release changes into structured documentation.
ドキュメント 表示
📦
debugging-and-error-recovery
78Debug Errors with a Root-Cause Workflow
Debugging failures by guesswork wastes time and can hide the real cause. This skill provides a repeatable process for reproducing, isolating, fixing, and verifying problems.
コーディング＆開発 表示
📦
context-engineering
78Structure Better Context for Coding Agents
Coding agents lose accuracy when context is incomplete, stale, or excessive. This skill provides practical structures for focused sessions, durable rules, and reliable handoffs.
コーディング＆開発 表示
関連スキル
すべて表示📦
ui-styling
83Build Accessible Tailwind Interfaces
作成者 nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
デザイン＆クリエイティブ 表示
📦
web-accessibility
82WCAG準拠のためのWebアクセシビリティ監査
作成者 89jobrien
アクセシビリティ上のギャップは、ユーザーの利用を妨げ、コンプライアンスリスクを生む可能性があります。このスキルは、WCAG監査、スクリーンリーダーチェック、キーボードテスト、改善計画を支援します。
デザイン＆クリエイティブ 表示
📦
design-system
82Build Consistent Design Systems and Slides
作成者 nextlevelbuilder
Inconsistent tokens and components make design handoffs difficult. This skill structures tokens, validates usage, and generates brand-aligned presentation assets.
デザイン＆クリエイティブ 表示
📦
frontend-design
81個性的なフロントエンドインターフェイスを設計する
作成者 Atman36
一般的な生成インターフェイスは、予測可能で弱い印象になりがちです。このスキルは、Claude、Codex、Claude Code が個性的で本番品質のフロントエンドデザインへ向かうよう導きます。
デザイン＆クリエイティブ 表示
📦
vercel-react-view-transitions
82React View Transitions を実装する
作成者 vercel-labs
React view transitions は配置を誤りやすく、意図しない静かなアニメーションや目立つアニメーションを引き起こします。このスキルは、route、Suspense、list、shared element のアニメーション選択を導きます。
コーディング＆開発 表示
📦
senior-frontend
81本番環境対応のフロントエンド機能を構築
作成者 davila7
フロントエンドチームには、プロジェクト間で一貫したReactおよびNext.jsのガイダンスが必要です。このスキルは、フロントエンド分析のためのリファレンスワークフロー、品質プラクティス、ヘルパースクリプトを提供します。
コーディング＆開発 表示