{
  "title": "Css Specificity Calculator",
  "human_url": "https://happytails.ai/en/developer-tools/css-specificity-calculator/",
  "agent_url": "https://happytails.ai/agents/en/developer-tools/css-specificity-calculator/",
  "language": "en",
  "markdown_url": "https://happytails.ai/en/developer-tools/css-specificity-calculator.md",
  "content": "Css Specificity Calculator\nAnalyze CSS locally with explicit inputs, bounded results and a complete downloadable report.\nHow can we improve this tool?\nReport a problem or share an idea.\nPlease leave out private information. Your message and the tool name go to our team via PostHog.\nHow to use Css Specificity Calculator\nPaste CSS or JSON using the example.\nReview the bounded report and assumptions.\nDownload complete JSON or CSV.\nUseful next steps\nCss Cascade Debugger\nCss Custom Property Resolver\nCss Media Query Simulator\nUse the documented input\nExplain which supplied selector wins and why",
  "content_format": "text/plain",
  "visibility": "public",
  "links": [
    {
      "name": "Css Cascade Debugger",
      "url": "https://happytails.ai/en/developer-tools/css-cascade-debugger/"
    },
    {
      "name": "Css Custom Property Resolver",
      "url": "https://happytails.ai/en/developer-tools/css-custom-property-resolver/"
    },
    {
      "name": "Css Media Query Simulator",
      "url": "https://happytails.ai/en/developer-tools/css-media-query-simulator/"
    }
  ],
  "tool": {
    "id": "css-specificity-calculator",
    "category": "developer-tools",
    "built": true,
    "requirements": "Process bounded CSS locally. Reports preserve complete input and assumptions.",
    "implementation": {
      "fields": [],
      "presentation": "metrics",
      "inputMaxLength": 200000,
      "inputErrorCode": "CSS_TOOL_INPUT",
      "note": "Compare selector specificity. Processing stays on your device. Reports are bounded and complete within the stated limits.",
      "example": {
        "input": "{\"selector\":\"#app .card, main .card\"}",
        "options": {}
      },
      "experience": {
        "automatic": false,
        "single": false,
        "inputMaxLength": 200000,
        "inputMode": "text",
        "label": "CSS",
        "placeholder": "a { color: #3366cc; }",
        "help": "Paste CSS rules, including their selectors. Up to 200,000 characters. Review the settings before running.",
        "action": null
      },
      "mode": "explicit",
      "interactive": false
    },
    "execution": "Browser interface",
    "api": null,
    "browser_agent": {
      "supported": true,
      "name": "run_current_tool",
      "discovery": "WebMCP on the human page in a supporting browser",
      "verification": "See audit/API-AUDIT.md; availability is not verification"
    }
  },
  "markdown": "# Css Specificity Calculator\n\n- Human page: https://happytails.ai/en/developer-tools/css-specificity-calculator/\n- Markdown: https://happytails.ai/en/developer-tools/css-specificity-calculator.md\n- Structured JSON: https://happytails.ai/agents/en/developer-tools/css-specificity-calculator/index.json\n- Visibility: public\n\n## Tool capabilities\n\n| Property | Value |\n| --- | --- |\n| Tool ID | `css-specificity-calculator` |\n| Category | developer-tools |\n| Implementation | Registered implementation. Registration alone is not a production-quality guarantee. |\n| Browser execution | Use the visible action or interactive controls. |\n| Browser processing | Browser; see tool notes for network behavior. |\n| HTTP API | Not callable through HTTP. |\n| Browser-agent interface | run_current_tool |\n\n### Implementation notes\n\nCompare selector specificity. Processing stays on your device. Reports are bounded and complete within the stated limits.\n\n### Inputs and settings\n\nText input: CSS.\n\nExample or placeholder shown in the interface (not a validated fixture):\n\n```text\na { color: #3366cc; }\n```\n\nPaste CSS rules, including their selectors. Up to 200,000 characters. Review the settings before running.\n\nNo additional settings are declared for this tool.\n\n### Browser-agent workflow\n\n1. Open the human page in a browser that supports WebMCP.\n2. Discover the interface exposed by that page; use its actual schema.\n3. Select files on the page first when the tool requires files.\n4. Call `run_current_tool` with valid input and settings.\n5. Inspect the returned result or error and the displayed output. Retrieve files from the displayed download links.\n\nCalls do not automatically copy or download results. Browser permissions still apply. Interface availability alone is not proof of successful execution.\n\n### Planning specification\n\nProcess bounded CSS locally. Reports preserve complete input and assumptions.\n\nThis describes intended requirements. Use the implementation notes, interface schema and observed output to determine current support.\n\n### Complete machine-readable capability record\n\n```json\n{\n  \"id\": \"css-specificity-calculator\",\n  \"category\": \"developer-tools\",\n  \"built\": true,\n  \"requirements\": \"Process bounded CSS locally. Reports preserve complete input and assumptions.\",\n  \"implementation\": {\n    \"fields\": [],\n    \"presentation\": \"metrics\",\n    \"inputMaxLength\": 200000,\n    \"inputErrorCode\": \"CSS_TOOL_INPUT\",\n    \"note\": \"Compare selector specificity. Processing stays on your device. Reports are bounded and complete within the stated limits.\",\n    \"example\": {\n      \"input\": \"{\\\"selector\\\":\\\"#app .card, main .card\\\"}\",\n      \"options\": {}\n    },\n    \"experience\": {\n      \"automatic\": false,\n      \"single\": false,\n      \"inputMaxLength\": 200000,\n      \"inputMode\": \"text\",\n      \"label\": \"CSS\",\n      \"placeholder\": \"a { color: #3366cc; }\",\n      \"help\": \"Paste CSS rules, including their selectors. Up to 200,000 characters. Review the settings before running.\",\n      \"action\": null\n    },\n    \"mode\": \"explicit\",\n    \"interactive\": false\n  },\n  \"execution\": \"Browser interface\",\n  \"api\": null,\n  \"browser_agent\": {\n    \"supported\": true,\n    \"name\": \"run_current_tool\",\n    \"discovery\": \"WebMCP on the human page in a supporting browser\",\n    \"verification\": \"See audit/API-AUDIT.md; availability is not verification\"\n  }\n}\n```\n\n## Page guide\n\nAnalyze CSS locally with explicit inputs, bounded results and a complete downloadable report.\n\nHow can we improve this tool?\n\nReport a problem or share an idea.\n\nPlease leave out private information. Your message and the tool name go to our team via PostHog.\n\n### How to use Css Specificity Calculator\n\n1. Paste CSS or JSON using the example.\n2. Review the bounded report and assumptions.\n3. Download complete JSON or CSV.\n\n## Useful next steps\n\n- [Css Cascade Debugger](https://happytails.ai/en/developer-tools/css-cascade-debugger/) ([Markdown](https://happytails.ai/en/developer-tools/css-cascade-debugger.md))\n\n- [Css Custom Property Resolver](https://happytails.ai/en/developer-tools/css-custom-property-resolver/) ([Markdown](https://happytails.ai/en/developer-tools/css-custom-property-resolver.md))\n\n- [Css Media Query Simulator](https://happytails.ai/en/developer-tools/css-media-query-simulator/) ([Markdown](https://happytails.ai/en/developer-tools/css-media-query-simulator.md))\n\n## Use the documented input\n\nExplain which supplied selector wins and why\n"
}