Frontend UI Engineering

addyosmani/agent-skills

Build responsive UI components with project design systems, accessible interactions and complete application states.

内容更新日:

所属コレクションAddy's Agent Skills ↗
GitHub で見る
npx skills add addyosmani/agent-skills --skill frontend-ui-engineering
116,280スター12,180フォークリポジトリの最終プッシュ

このスキルについて

Build responsive UI components with project design systems, accessible interactions and complete application states. Follow existing component and state patterns, implement the required states and inspect the rendered interface across viewport sizes.

おすすめする理由

A task workflow in Addy's Agent Skills. Follow the upstream instructions and retain referenced shared files; host capabilities and project configuration determine which steps can run.

役立つこと

  • A page or component needs polished interaction, responsive layout and accessibility.

Workflow and deliverables

Follow existing component and state patterns, implement the required states and inspect the rendered interface across viewport sizes.

Implemented UI with keyboard behavior, responsive layouts and loading, empty, error and success states where applicable.

Frontend UI Engineering instructions

Install with the required references

Install the complete pack through a documented repository integration when shared references are needed. A per-skill skills CLI install copies only skills/<name>/ and can omit the repository-level references/ checklists; keep the needed shared files with the workflow.

Upstream overview and integrations

使う前に

  • An Agent that can load Skill Markdown and access your project. File edits, shell commands, builds and checks depend on the selected workflow and its environment.
  • Use your project's own runtimes, dependencies and verification commands. The Skill files provide instructions and do not install those project tools.
  • Install the complete pack through a documented repository integration when shared references are needed. A per-skill skills CLI install copies only skills/<name>/ and can omit the repository-level references/ checklists; keep the needed shared files with the workflow.

対応エージェント

Claude CodeCodex CLICursorGitHub CopilotGemini CLIOpenCodeKiroGoogle Antigravity

資料・参照元

元の資料は以下のリンクから確認できます。実践のヒントは SkillHey による編集上の提案です。