CtrlK
BlogDocsLog inGet started
Tessl Logo

sharaf/professional-design-system-architect

Design, build, or audit professional UI design systems across strategy, product language, foundations, tokens, components, patterns, accessibility, content, Figma/code libraries, documentation, QA, governance, adoption, measurement, theming, releases, and migration. Use when the user wants to create a design-system blueprint, review an existing design system, fix design-system drift, plan Figma/code parity, define token or component architecture, evaluate accessibility and governance maturity, or sequence design-system adoption and migration work.

100

1.75x
Quality

100%

Does it follow best practices?

Impact

100%

1.75x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

criteria.jsonevals/scenario-3/

{
  "context": "Tests whether the agent treats components as public APIs with all required documentation fields, avoids defining components without states and accessibility behavior, uses ARIA only to supplement native semantics rather than repair poor HTML, and does not count component presence as component quality.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Standard includes purpose + when not to use",
      "description": "The component documentation standard mandates a 'purpose' section AND a 'when not to use' section for every component — not just a positive description.",
      "max_score": 8
    },
    {
      "name": "Standard mandates anatomy",
      "description": "The standard requires an anatomy section that names and describes the parts of the component.",
      "max_score": 6
    },
    {
      "name": "Standard mandates variants and states",
      "description": "The standard requires documentation of all variants AND all interactive states (at minimum: default, hover, focus, active, disabled, loading where applicable, invalid/error).",
      "max_score": 10
    },
    {
      "name": "Standard mandates content rules",
      "description": "The standard requires a content rules section covering labels, placeholder text, error messages, and any character limits or formatting constraints.",
      "max_score": 8
    },
    {
      "name": "Standard mandates accessibility behavior",
      "description": "The standard requires an accessibility section covering keyboard interaction, focus management, and screen-reader announcements — not just a note that the component 'is accessible'.",
      "max_score": 10
    },
    {
      "name": "Standard mandates code API",
      "description": "The standard requires documentation of the full code API: props/attributes, slots or children patterns, events, and controlled vs. uncontrolled behavior.",
      "max_score": 8
    },
    {
      "name": "Standard mandates testing requirements",
      "description": "The standard requires each component to document expected testing requirements (e.g., unit tests, interaction tests, accessibility automation, visual regression).",
      "max_score": 8
    },
    {
      "name": "Standard mandates lifecycle status",
      "description": "The standard requires a lifecycle status field (e.g., experimental, stable, deprecated) on every component page.",
      "max_score": 6
    },
    {
      "name": "ARIA usage — supplements, not repairs",
      "description": "In the example component docs (DatePicker and/or DataTable), ARIA attributes are used only where native HTML semantics are insufficient — the docs do NOT recommend ARIA roles to compensate for non-semantic markup.",
      "max_score": 10
    },
    {
      "name": "Automated checks insufficient claim absent",
      "description": "The standard or accessibility sections do NOT imply that passing automated accessibility checks (axe, Lighthouse) alone proves full accessibility — manual or AT testing is mentioned as additionally required.",
      "max_score": 8
    },
    {
      "name": "Component docs applied to DatePicker",
      "description": "The DatePicker.md file includes at minimum: purpose, when not to use, anatomy, variants, all key states, accessibility behavior with keyboard interactions, and the code API.",
      "max_score": 9
    },
    {
      "name": "Component docs applied to DataTable",
      "description": "The DataTable.md file includes at minimum: purpose, when not to use, anatomy, variants, all key states (including empty state and loading state), accessibility behavior with keyboard interactions, and the code API.",
      "max_score": 9
    }
  ]
}

evals

README.md

SKILL.md

tile.json