Skill: frontend-design-scanner

Activation Contract

Activate this skill when the user needs to:

• Scan a frontend codebase to understand its design system and CSS architecture
• Detect the presence and version of Tailwind CSS, CSS frameworks, or preprocessors
• Identify the design methodology: Atomic Design, BEM, SMACSS, ITCSS, OOCSS, or utility-first
• Extract branding tokens: fonts, sizes, weights, border radius, colors, spacing scales
• Map the component hierarchy and identify base components (buttons, inputs, selects, textareas)
• Audit the consistency of design tokens across the codebase

Do not activate for pure backend projects or when only trivial CSS is present.

Hard Rules