القائمة
Use this skill when assessing design system maturity, evaluating adoption health, analyzing component duplication, or calculating design debt ratios
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use playwright-cli to capture full-page screenshots, navigate complex flows, run Lighthouse audits, and test responsive design without writing code
Use this skill when verifying WCAG 2.1/3.0 compliance, mapping accessibility violations to specific criteria, or providing remediation guidance with code examples
Use when validating design system token compliance, detecting visual regressions, or analyzing responsive design consistency across breakpoints and modes
Use this skill when aggregating design audit findings across multiple dimensions, deduplicating related issues, or synthesizing results into executive summaries with remediation roadmaps
Analyze images and videos with AI vision models. Detect objects with bounding boxes, compare multiple images, audit design compliance, and analyze video content using Google Gemini or Vertex AI. Supports CLI and MCP modes.
USE THIS SKILL whenever any topic related to access control, authorization, permissions, or security policy arises in any form. Triggers include — but are not limited to: RBAC, ABAC, PBAC, ACL, DAC, ReBAC, Zanzibar, OPA, Cedar, Casbin, SpiceDB, OpenFGA, Permify, Oso, Cerbos, Permit.io; any mention of "who can do what", "role", "permission", "policy", "authorization", "multi-tenant access", "least privilege", "Zero Trust", "IAM design", "SaaS permission modeling", "access audit", "compliance access control" (HIPAA, GDPR, SOC2, PCI-DSS, ISO27001); also trigger when designing any new feature that controls what users can see or do, or when reviewing, refactoring, or debugging any auth/authz system. When in doubt — trigger this skill. Access control is architectural and getting it wrong is expensive.
| name | design-system-governance |
| description | Use this skill when assessing design system maturity, evaluating adoption health, analyzing component duplication, or calculating design debt ratios |
| user-invocable | false |
Deep guidance for assessing design system maturity, adoption health, and governance effectiveness.
Use this skill when:
Characteristics:
Metrics:
Transition To Level 2:
Characteristics:
Metrics:
Adoption Barriers (Typical):
Transition To Level 3:
Characteristics:
Metrics:
Governance Practices:
Transition To Level 4:
Characteristics:
Metrics:
Governance Practices:
Maintenance:
Adoption Score = (System Components Used / Total Components) × 100
Example:
- System components used: 45
- Total components: 60
- Adoption Score: 45/60 = 75%
Reuse Rate = (Total Component Instances / Unique Components)
Example:
- Button component used in: homepage, product page, checkout, admin panel = 4 instances
- Modal component used in: help, confirmation, settings = 3 instances
- Total instances: 45
- Unique components: 8
- Reuse Rate: 45/8 = 5.6× average usage per component
Design Debt = (Custom Components / Total Components) × 100
Example:
- Custom components: 15
- Total components: 60
- Design Debt: 15/60 = 25%
Interpretation:
- <10%: Level 4 (Excellent)
- 10-20%: Level 3 (Good)
- 20-40%: Level 2 (Concerning)
- >40%: Level 1 (Critical)
For each component category (buttons, modals, forms, etc.):
Category Health = (Components matching system / Total in category) × 100
Example - Buttons:
- System button variants: 6 (primary, secondary, tertiary, loading, disabled, outlined)
- Found implementations: 8 (system variants + 2 custom)
- Health Score: 6/8 = 75%
- Assessment: 75% of button implementations match system
Legitimate Reasons:
Warning Signs:
For each custom component found:
Categorize the driver
Estimate impact
Prioritize remediation
Critical (Week 1-2):
High (Week 3-4):
Medium (Week 5-6):
Low (Ongoing):
1. Process Maturity
Scoring:
2. Adoption Culture
Scoring:
3. System Completeness
Scoring:
90% coverage: 100%
4. Documentation Quality
Scoring:
5. Enforcement Mechanism
Scoring:
Health Score = (Process + Adoption + Completeness + Documentation + Enforcement) / 5
Example:
- Process Maturity: 75%
- Adoption Culture: 60%
- System Completeness: 80%
- Documentation Quality: 70%
- Enforcement Mechanism: 50%
- Health Score: (75+60+80+70+50)/5 = 67%
Interpretation:
- >80%: Healthy governance
- 60-80%: Room for improvement
- 40-60%: Significant gaps
- <40%: Critical issues
Exact duplicates:
Near-duplicates (>80% similar):
Partial duplicates (50-80% similar):
Similar patterns (<50% code, >80% visual):
High Impact Medium Impact Low Impact
High Effort Phase 3 Phase 4 Defer
Med Effort Phase 2 Phase 3 Phase 4
Low Effort Phase 1 Phase 2 Phase 3
Phase 1 (Quick Wins):
Phase 2 (Strategic):
Phase 3 (Long-term):
Phase 4 (Maintenance):
Adoption:
Debt:
Health:
Productivity:
Healthy Trends (Improving):
Warning Trends (Declining):
{
"analysis_type": "component-audit | design-debt-report",
"maturity_level": 2,
"maturity_assessment": {
"current_level": "Inconsistent (Emerging System)",
"adoption_score": 52,
"design_debt_ratio": 45,
"characteristics": ["System exists but spotty adoption", "Informal governance", "Growing maintenance burden"],
"transition_readiness": "Ready for Level 3 transition"
},
"adoption_metrics": {
"overall_adoption": 52,
"component_reuse_rate": 3.2,
"team_adoption": "45% of teams",
"trend": "stable"
},
"governance_health": {
"overall_health_score": 58,
"process_maturity": 50,
"adoption_culture": 60,
"system_completeness": 65,
"documentation_quality": 55,
"enforcement_mechanism": 50,
"gaps": [
"No documented component request process",
"Limited CI/CD enforcement",
"Inconsistent documentation"
]
},
"duplication_analysis": {
"exact_duplicates": 3,
"near_duplicates": 8,
"partial_duplicates": 12,
"consolidation_opportunities": 15,
"estimated_debt_reduction": "35% (15 components → 10)"
},
"debt_drivers": [
{
"category": "Feature gap",
"count": 8,
"examples": ["Advanced table features", "Custom form validation"],
"remediation": "Extend system components"
},
{
"category": "System gap - Visibility",
"count": 4,
"examples": ["Modal used for alerts", "Button for navigation"],
"remediation": "Improve documentation and discoverability"
}
],
"consolidation_roadmap": [
{
"phase": 1,
"priority": "quick-wins",
"items": [
{
"opportunity": "Button component exact duplicates",
"current_implementations": 3,
"target_implementation": 1,
"effort_hours": 4,
"debt_reduction": "3 components",
"impact": "High"
}
]
}
],
"recommendations": [
"Establish formal component request process",
"Create system variants for common use cases",
"Migrate 3 exact duplicate button implementations",
"Improve system documentation with code examples",
"Implement linter for design token usage"
],
"next_steps": [
"Phase 1: Quick wins (1-2 weeks)",
"Phase 2: Strategic consolidation (3-6 weeks)",
"Transition to Level 3 governance"
]
}