{
  "schema_version": "2026-03-26",
  "id": "frontend-design",
  "slug": "frontend-design",
  "display_name": "Frontend Design",
  "description": "Frontend design workflow skill. Use this skill when a user needs UI structure, states, and interaction patterns before implementation.",
  "version": "0.0.1",
  "category": "frontend",
  "raw_category": "frontend",
  "taxonomy": {
    "raw_category": "frontend",
    "canonical_category": "frontend",
    "inferred_category": "frontend",
    "category_source": "frontmatter"
  },
  "tags": [
    "frontend",
    "ui",
    "ux",
    "layout",
    "interaction",
    "accessibility"
  ],
  "complexity": "intermediate",
  "risk": "safe",
  "source": "omni-team",
  "author": "Omni Skills Team",
  "dates": {
    "added": "2026-03-26",
    "updated": "2026-03-27"
  },
  "entrypoint": "skills/frontend-design/SKILL.md",
  "paths": {
    "root": "skills/frontend-design",
    "manifest": "dist/manifests/frontend-design.json",
    "metadata": "skills/frontend-design/metadata.json"
  },
  "compatibility": {
    "tools": [
      "claude-code",
      "cursor",
      "gemini-cli",
      "codex-cli",
      "antigravity",
      "opencode"
    ],
    "install_targets": [
      {
        "tool": "claude-code",
        "scope": "user-global",
        "default_path": "~/.claude/skills",
        "installer_flag": "--claude",
        "current_installer_behavior": "Installs the full Omni Skills library by default. Use --skill or --bundle to install only a selected subset.",
        "invocation": ">> /skill-name help me..."
      },
      {
        "tool": "cursor",
        "scope": "user-global",
        "default_path": "~/.cursor/skills",
        "installer_flag": "--cursor",
        "current_installer_behavior": "Installs the full Omni Skills library by default. Use --skill or --bundle to install only a selected subset.",
        "invocation": "@skill-name"
      },
      {
        "tool": "gemini-cli",
        "scope": "user-global",
        "default_path": "~/.gemini/skills",
        "installer_flag": "--gemini",
        "current_installer_behavior": "Installs the full Omni Skills library by default. Use --skill or --bundle to install only a selected subset.",
        "invocation": "Use @skill-name to..."
      },
      {
        "tool": "codex-cli",
        "scope": "user-global",
        "default_path": "~/.codex/skills",
        "installer_flag": "--codex",
        "current_installer_behavior": "Installs the full Omni Skills library by default. Use --skill or --bundle to install only a selected subset.",
        "invocation": "Use @skill-name to..."
      },
      {
        "tool": "antigravity",
        "scope": "user-global",
        "default_path": "~/.gemini/antigravity/skills",
        "installer_flag": "--antigravity",
        "current_installer_behavior": "Installs the full Omni Skills library by default. Use --skill or --bundle to install only a selected subset.",
        "invocation": "Use @skill-name to... (Agent Mode)"
      },
      {
        "tool": "opencode",
        "scope": "project-local",
        "default_path": ".opencode/skills",
        "installer_flag": "--opencode",
        "current_installer_behavior": "Installs the full Omni Skills library by default. Use --skill or --bundle to install only a selected subset.",
        "invocation": "opencode run @skill-name"
      }
    ]
  },
  "resources": {
    "sub_resources": [
      "agents",
      "examples",
      "references",
      "scripts"
    ],
    "artifacts_count": 8,
    "references_count": 1,
    "agents_count": 1,
    "assets_count": 0
  },
  "dependencies": {
    "skills": [],
    "external": []
  },
  "install": {
    "strategy": "copy-skill-directory",
    "current_installer": "npx omni-skills installs the full library by default today, and also supports selective installation with --skill and --bundle.",
    "recipes": [
      {
        "tool": "claude-code",
        "command": "npx omni-skills --claude",
        "scope": "user-global",
        "default_path": "~/.claude/skills",
        "behavior": "Installs the full Omni Skills library by default. Use --skill or --bundle to install only a selected subset."
      },
      {
        "tool": "cursor",
        "command": "npx omni-skills --cursor",
        "scope": "user-global",
        "default_path": "~/.cursor/skills",
        "behavior": "Installs the full Omni Skills library by default. Use --skill or --bundle to install only a selected subset."
      },
      {
        "tool": "gemini-cli",
        "command": "npx omni-skills --gemini",
        "scope": "user-global",
        "default_path": "~/.gemini/skills",
        "behavior": "Installs the full Omni Skills library by default. Use --skill or --bundle to install only a selected subset."
      },
      {
        "tool": "codex-cli",
        "command": "npx omni-skills --codex",
        "scope": "user-global",
        "default_path": "~/.codex/skills",
        "behavior": "Installs the full Omni Skills library by default. Use --skill or --bundle to install only a selected subset."
      },
      {
        "tool": "antigravity",
        "command": "npx omni-skills --antigravity",
        "scope": "user-global",
        "default_path": "~/.gemini/antigravity/skills",
        "behavior": "Installs the full Omni Skills library by default. Use --skill or --bundle to install only a selected subset."
      },
      {
        "tool": "opencode",
        "command": "npx omni-skills --opencode",
        "scope": "project-local",
        "default_path": ".opencode/skills",
        "behavior": "Installs the full Omni Skills library by default. Use --skill or --bundle to install only a selected subset."
      }
    ]
  },
  "classification": {
    "maturity": {
      "skill_level": 3,
      "skill_level_label": "resources",
      "has_scripts": true,
      "has_extra_files": true
    },
    "best_practices": {
      "score": 99,
      "tier": "excellent",
      "signals": {
        "workflow_steps_count": 5,
        "workflow_section_length": 557,
        "when_to_use_section_length": 216,
        "best_practices_items_count": 7,
        "best_practices_section_length": 562,
        "troubleshooting_items_count": 0,
        "troubleshooting_section_length": 733,
        "resources_items_count": 5,
        "resources_section_length": 442,
        "examples_section_length": 823,
        "examples_code_blocks_count": 6,
        "related_skills_section_length": 234,
        "decision_assets_count": 20,
        "table_count": 6,
        "linked_resource_families_count": 4,
        "linked_resource_families": [
          "agents",
          "examples",
          "references",
          "scripts"
        ],
        "support_links_count": 5,
        "support_files_count": 6,
        "references_files_count": 1,
        "scripts_files_count": 1,
        "examples_files_count": 3,
        "agents_files_count": 1,
        "assets_files_count": 0,
        "tools_count": 6,
        "tags_count": 6,
        "body_density": 6.04
      }
    },
    "quality": {
      "score": 97,
      "tier": "platinum",
      "breakdown": {
        "body": 16,
        "description": 9,
        "metadata": 12,
        "recency": 8,
        "resources": 10,
        "best_practices": 10,
        "semantic_depth": 16,
        "operational_depth": 10,
        "support_pack": 10
      }
    },
    "security": {
      "score": 95,
      "tier": "review",
      "status": "passed",
      "findings_count": 0,
      "findings": [],
      "signals": {
        "scanned_files": 7,
        "script_files": 1,
        "binary_like_files": 0
      },
      "scanners": {
        "static": {
          "enabled": true,
          "status": "completed"
        },
        "clamav": {
          "enabled": true,
          "status": "completed",
          "provider": "clamav",
          "detections": [],
          "infected_files": 0
        },
        "virustotal": {
          "enabled": true,
          "status": "completed",
          "provider": "virustotal",
          "lookups": 1,
          "positives": 0,
          "results": [
            {
              "path": "skills/frontend-design/scripts/render_ui_packet.py",
              "sha256": "7483005253eb71e001ffb8255048f0a8acde081418f0377a6e940527f308c6a5",
              "status": "not_found"
            }
          ],
          "details": "Hash lookups only. Unknown files are not uploaded during validation."
        }
      }
    },
    "validation": {
      "errors": [],
      "warnings": [],
      "status": "passed"
    }
  },
  "content": {
    "body_length": 4997,
    "content_length": 5484,
    "body_lines": 115,
    "word_count": 695,
    "has_code_blocks": true,
    "typed_code_blocks_count": 2,
    "has_examples_section": true,
    "example_count": 3,
    "has_workflow_section": true,
    "has_when_to_use_section": true,
    "has_best_practices_section": true,
    "has_troubleshooting_section": true,
    "problem_count": 3,
    "troubleshooting_pairs_count": 2,
    "has_additional_resources_section": true,
    "has_related_skills_section": true,
    "related_skills_count": 3,
    "has_local_support_links": true,
    "local_support_links_count": 2,
    "has_local_script_example": true,
    "local_script_example_count": 0,
    "semantic_signals": {
      "workflow_steps_count": 5,
      "workflow_section_length": 557,
      "when_to_use_section_length": 216,
      "best_practices_items_count": 7,
      "best_practices_section_length": 562,
      "troubleshooting_items_count": 0,
      "troubleshooting_section_length": 733,
      "resources_items_count": 5,
      "resources_section_length": 442,
      "examples_section_length": 823,
      "examples_code_blocks_count": 6,
      "related_skills_section_length": 234,
      "decision_assets_count": 20,
      "table_count": 6,
      "linked_resource_families_count": 4,
      "linked_resource_families": [
        "agents",
        "examples",
        "references",
        "scripts"
      ],
      "support_links_count": 5,
      "support_files_count": 6,
      "references_files_count": 1,
      "scripts_files_count": 1,
      "examples_files_count": 3,
      "agents_files_count": 1,
      "assets_files_count": 0,
      "tools_count": 6,
      "tags_count": 6,
      "body_density": 6.04
    }
  },
  "artifacts": [
    {
      "path": "skills/frontend-design/SKILL.md",
      "kind": "entrypoint",
      "size_bytes": 5504,
      "sha256": "03bf3df1efccf93451ca78a38fcc9cde90c8a57d874c853de71e1aeb46d7644d"
    },
    {
      "path": "skills/frontend-design/metadata.json",
      "kind": "support",
      "size_bytes": 6020,
      "sha256": "0142b63336c69f7f3ea078f66946d411fb04468c2b5d998484ecbcd447cff3a3"
    },
    {
      "path": "skills/frontend-design/agents/openai.yaml",
      "kind": "agent",
      "size_bytes": 294,
      "sha256": "a6f1fc18d3cd37bf258201d7e471d2b0b43ace38c88bbc96a487abc4a0fe46b3"
    },
    {
      "path": "skills/frontend-design/examples/component-handoff-worksheet.md",
      "kind": "support",
      "size_bytes": 301,
      "sha256": "dfff6ddf0ee79aed51638a1d6b1d61179d17b9a2463ba8d17f3179076ca5f1b9"
    },
    {
      "path": "skills/frontend-design/examples/dashboard-brief-template.md",
      "kind": "support",
      "size_bytes": 411,
      "sha256": "da779851f3fce49fc902f3d5b19da2e55885249d091ddc55ced8998f7de51047"
    },
    {
      "path": "skills/frontend-design/examples/state-coverage-rubric.md",
      "kind": "support",
      "size_bytes": 419,
      "sha256": "86dadf84a68df703fd621281bee97f9526215540222316f7bb2b9bd6bf5de9f3"
    },
    {
      "path": "skills/frontend-design/references/checklist.md",
      "kind": "reference",
      "size_bytes": 705,
      "sha256": "74ae00d927ee30e3c380609322127a6633fc8fb081df76174c06b410f4761a97"
    },
    {
      "path": "skills/frontend-design/scripts/render_ui_packet.py",
      "kind": "support",
      "size_bytes": 782,
      "sha256": "7483005253eb71e001ffb8255048f0a8acde081418f0377a6e940527f308c6a5"
    }
  ],
  "archives": [
    {
      "format": "zip",
      "path": "dist/archives/frontend-design.zip",
      "file_name": "frontend-design.zip",
      "size_bytes": 15716,
      "sha256": "667ad18aece47fa0f6e64cf2e32eb10439c4a12d3e639747ffd864a8bc9d6b05",
      "signature": {
        "status": "signed",
        "path": "dist/archives/frontend-design.zip.sig",
        "sha256": "9e7d2a72125fe25dfadea95dbcb3b7dad3bffa9b760726e5875302479969ad3f",
        "public_key_path": "dist/signing/omni-skills-public.pem",
        "algorithm": "sha256",
        "verify_command": "openssl dgst -sha256 -verify dist/signing/omni-skills-public.pem -signature dist/archives/frontend-design.zip.sig dist/archives/frontend-design.zip"
      }
    },
    {
      "format": "tar.gz",
      "path": "dist/archives/frontend-design.tar.gz",
      "file_name": "frontend-design.tar.gz",
      "size_bytes": 30743,
      "sha256": "d1edbd170b16c856ed9edbfae03d375b325c539ea346e5c9f38d771e07feec95",
      "signature": {
        "status": "signed",
        "path": "dist/archives/frontend-design.tar.gz.sig",
        "sha256": "49563432a23f87c28133f7e19c1f17cf6ac49a3c97c0f07eff1df5d9619a3cac",
        "public_key_path": "dist/signing/omni-skills-public.pem",
        "algorithm": "sha256",
        "verify_command": "openssl dgst -sha256 -verify dist/signing/omni-skills-public.pem -signature dist/archives/frontend-design.tar.gz.sig dist/archives/frontend-design.tar.gz"
      }
    }
  ],
  "archive_checksums": {
    "path": "dist/archives/frontend-design.checksums.txt",
    "file_name": "frontend-design.checksums.txt",
    "sha256": "c38e1e4dd2f0caa1723c80b79e17d7ddcd216ed30c0e903950fed3bef04ce365",
    "signature": {
      "status": "signed",
      "path": "dist/archives/frontend-design.checksums.txt.sig",
      "sha256": "10258b7a449eff31deac20562f4437c480c35dfde09259a74f9e546520803534",
      "public_key_path": "dist/signing/omni-skills-public.pem",
      "algorithm": "sha256",
      "verify_command": "openssl dgst -sha256 -verify dist/signing/omni-skills-public.pem -signature dist/archives/frontend-design.checksums.txt.sig dist/archives/frontend-design.checksums.txt"
    }
  },
  "checksums": {
    "entrypoint_sha256": "03bf3df1efccf93451ca78a38fcc9cde90c8a57d874c853de71e1aeb46d7644d",
    "package_sha256": "cbddc526e844b0106bd0dafdbc335615246272fdf846f4a159885052b5d00c09"
  }
}