Install
Install from the original repository with the author’s command. Choose the skills and agent supported by your environment in the installer; related workflows can require other skills from the same repository.
Install the repository
Run this in a terminal.
npx skills add jakubkrehel/skills
Exploded technical illustration of a hard disk drive, with its cover, head assembly, platters, enclosure and circuit board.
プロジェクトのスクリーンショットこのスキルについて
A collection of 14 agent skills for interface reviews, UI implementation, component testing and technical illustration.
おすすめする理由
An external listing linking to the author’s MIT-licensed repository.
コレクション内のスキル
14 件のスキル- 表示 →
Better Accessibility
Review keyboard focus, ARIA, forms, screen readers, motion and zoom against WCAG 2.2.
- 表示 →
Better Colors
Build and audit palettes, semantic color tokens and measured contrast.
- 表示 →
Better Interface
Review a screen or flow across accessibility, layout, copy, typography, color and UI polish.
- 表示 →
Better Layout
Review grouping, alignment, reading order and responsive layouts.
- 表示 →
Better Typography
Set and review type scales, spacing, font features and text wrapping.
- 表示 →
Better UI
Polish interface surfaces, icons and motion using the existing UI system.
- 表示 →
Better Writing
Write and review interface labels, errors, empty states and confirmations.
- 表示 →
Break: Component Stress Test
Render a chosen component in a temporary page under relevant stress scenarios.
- 表示 →
Build Design
Implement UI from Figma or an image with the project’s existing components and tokens.
- 表示 →
Explain Interface
Explain how a website, visual effect or animation works from a URL or screenshot.
- 表示 →
Interface Review
Review a branch, pull request or uncommitted change for introduced UI regressions.
- 表示 →
State Machine: Component States
Render a component’s states on a temporary page with mock data and a switcher.
- 表示 →
Teardown: Technical Illustrations
Create technical illustrations with coherent views and an interactive export page.
- 表示 →
Variant: UI Alternatives
Build multiple component variants in the real page and compare their tradeoffs.
役立つこと
- Review and refine an existing product interface or implement a design in its codebase.
- Test component scenarios, compare alternatives or explain a visual effect.
Cover illustration
The cover is the supplied hard-drive teardown SVG from the author’s website, rasterized on white and compressed for this listing.
使う前に
- An agent that can load SKILL.md files and access the relevant project. Browser-based checks need an available browser; report checks that could not be performed.
- Figma links in Build Design require a connected Figma MCP. Some review workflows use other skills in this repository.
対応エージェント
資料・参照元
元の資料は以下のリンクから確認できます。実践のヒントは SkillHey による編集上の提案です。
