juliobsz/skills

これは何？

主な機能

• 01一行の brief からコンセプト、デザインシステム、完成したサイトを制作
• 02配色、タイポグラフィ、グリッド、モーションのルールをDESIGN.mdに記述
• 03GSAP、Lenis、OGLを使い、Next.js（App Router）またはAstroで構築
• 04production build、クローリング監査、axe、実ブラウザーのスクリーンショットで成果物をチェック
• 05任意のWebサイトを採点し、期待できる効果に基づいて改善案を順位付けする/juryを同梱

ユースケース

• AIコーディングエージェントを使い、短い説明から個人ポートフォリオやスタジオサイトを生成する
• 既存のランディングページを、より視覚的なインパクトの強いデザインに刷新する
• juryスクリプトでサイトのSEO、アクセシビリティ、パフォーマンスを監査する
• 構造化されたデザインルーブリックに沿って競合サイトを評価する

クイックスタート

1. 1

   skills CLI を使って awwwards スキルをグローバルにインストールします

   npx skills add juliobsz/skills -g
2. 2

   新しいエージェントセッションを開き、ウェブサイトを作るよう依頼するか、/awwwards と入力します

使う前に知っておきたいこと

• !一連の処理には長時間のセッションと大量のトークンが必要です。
• !結果は、基盤となるモデルが自分で生成したスクリーンショットを評価する能力に左右されます。
• !サイトにはプレースホルダーのコンテンツが含まれているため、実際のプロジェクトや文章に差し替える必要があります。
• !/jury のスコアは、提携関係のない推定値で、検証されたサイトは2件のみです。

トピック

よくある質問

skills とは？

AIコーディングエージェントが一行の brief から受賞作のようなWebサイトを制作し、/juryで採点できるスキル。 awwwardsは、Claude Code、Codex、Antigravityなどのコーディングエージェント向けスキルです。「ポートフォリオを作って。名前はJulio」のような短い brief を受け取り、コンセプト、アートディレクション、実装、QAの順に進め、AI生成サイトにありがちなありきたりなテンプレート感を避けることを目指します。DESIGN.mdにデザインシステムを記述し、コンセプトと印象に残るモーション演出を決めたうえで、モーションとWebGLにはGSAP、Lenis、OGLを使い、Next.jsまたはAstroでサイトを構築します。

skills は無料で使えますか？ライセンスは？

skills は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

skills は今もメンテナンスされていますか？

活発にメンテナンス中。skills の最終コミットは 2026年10月18日 です。

skills は何に使えますか？

AIコーディングエージェントを使い、短い説明から個人ポートフォリオやスタジオサイトを生成する 既存のランディングページを、より視覚的なインパクトの強いデザインに刷新する juryスクリプトでサイトのSEO、アクセシビリティ、パフォーマンスを監査する 構造化されたデザインルーブリックに沿って競合サイトを評価する

skills のインストール方法は？

skills CLI を使って awwwards スキルをグローバルにインストールします: npx skills add juliobsz/skills -g 新しいエージェントセッションを開き、ウェブサイトを作るよう依頼するか、/awwwards と入力します

skills はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/juliobsz/skills