Frontend Devtools Skill

Use this skill when a visual or layout problem is easier to solve with browser inspection than by reading source alone, or when you need to build a website that should look intentional and work well across screen sizes. The CLI/tool name is frontend-devtools-skill.

This skill is for:

• Building or refining a full website, landing page, or marketing page
• Researching an existing website the user wants to reference or be inspired by
• CSS cascade questions: "why is this style winning?"
• Box model and spacing issues
• Flex/grid parent-context inspection
• Overflow and clipping diagnosis
• Console and network checks tied to a real page
• Responsive debugging when you need a specific viewport or browser state
• Visual diff checks against a reference image

Do not use this skill when a simple source edit is enough and browser state is irrelevant.

Website-Building Default