design-implement-web

You can generate token-compliant React components by providing design-tokens.json alongside generated tokens.css and tailwind.preset.js. This skill processes approved HTML mockups or PNG baselines to output Next.js code without hardcoded colors or spacing.

Yes, a design-tokens.json file plus generated tokens.css and tailwind.preset.js are required. These inputs ensure the generated React and Next.js components avoid hardcoded values and correctly map colors and spacing from your mockups.

Using a design token bridge workflow is the best way to turn approved HTML mockups into production-ready Tailwind code. This skill converts your mockups into Next.js components using tailwind.preset.js to enforce token compliance and prevent hardcoded styles.

Yes, you can use PNG baselines to generate React components. This skill prefers HTML mockups but will surface PNG baselines when needed, asking which screen to implement before generating the Next.js web components.

To ensure focus and hover states are included, this skill enforces compliance for every interactive element during generation. It runs a Dark Factory compliance pipeline to verify that token constraints and interactive states are honored before shipping.

A tailwind.preset.js file is required to prevent hardcoded values in your mockup-to-web workflow. This preset bridges design-tokens.json into Tailwind configuration, ensuring generated Next.js components maintain strict visual consistency.