skills.rest
nawwwal
nawwwalCOMMUNITY
Explore all skills by this author →
Website𝕏@naawwwalGitHub

blade-score

Measure Blade design system coverage on live pages with Playwright.

1|Updated Mar 24, 2026
Search Tags:#automation#playwright#design-system#frontend-testing#web-analytics#blade#component-coverage
One-click install
npx skills add https://github.com/nawwwal/dex --skill blade-score
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: blade-score
Source: https://github.com/nawwwal/dex/tree/main/plugins/design/skills/blade-score
Command: npx skills add https://github.com/nawwwal/dex --skill blade-score

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) components.

What problem does it solve?

Blade adoption on live pages is hard to measure and optimize in real time.

Core Features & Use Cases

  • Real-time blade coverage metrics on pages with Blade components.
  • Clear counts of blade nodes vs total nodes to identify adoption gaps.
  • Use cases include dashboards, product pages, and component health checks.

Quick Start

Run the blade-score script on a live URL to obtain blade coverage metrics.

Frequently Asked Questions about blade-score

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I measure Blade design system coverage on a live web page?▼

Blade design system coverage is measured by running a headless Playwright evaluation on a live URL to count Blade nodes versus total nodes. This quantifies component adoption and identifies usage gaps on dashboards or product pages.

Can I run frontend testing for Blade components on pages requiring authentication?▼

Yes, you can run Blade component coverage evaluation on authenticated pages by passing the --storage-state flag. This allows the headless Playwright session to access secure dashboards and internal product pages.

How do I exclude navigation bars from web analytics when checking component coverage?▼

You can exclude navbars from Blade coverage measurement using an optional flag during the Playwright evaluation. This ensures navigation elements do not skew the Blade design system adoption metrics for page content.

Does this component coverage tool support setting a minimum adoption threshold?▼

Yes, the Blade coverage script supports a --threshold flag to define a minimum adoption percentage. This allows you to programmatically verify that a live page meets your design system coverage standards.

How do I get machine-readable web analytics output for Blade design system usage?▼

You can output Blade coverage metrics in machine-readable format by passing the --json flag. This returns bladeCoverage, bladeNodes, and totalNodes as structured data for automated component health checks.

Do I need Playwright to automate Blade design system coverage checks?▼

Yes, Playwright is a required dependency for running Blade coverage checks. The script uses a headless Playwright browser session to evaluate the live page and calculate the Blade component usage metrics.

Related Skills

Explore More Design & Creative Skills→
RxFitRxFit

setup-browser-cookies

Import browser cookies into Playwright headless sessions for authenticated page testing.

Community
Intermediate
vrcmsvrcms
1

canary-watch

Monitor deployed web applications for functional and performance regressions.

Community
Advanced
murphytruemanmurphytrueman
155

cicd-integration

Generate CI/CD pipeline configurations for design system quality checks.

Community
Advanced
whmathews15whmathews15
1

design-system-audit

Audit design system usage and identify component coverage gaps across projects.

Community
Intermediate