cyanate.mercury

Generate Astro.js code (layouts, components, pages) from design briefs using Shadcn UI components. Use this skill when you need to create .astro files from a design-brief.json specification. Works with Shadcn Skill for component APIs, Frontend Design Skill for visual polish, and Astro AI Docs for best practices. Always use this skill when generating Astro code, creating .astro files, or implementing page layouts. The skill includes reference files for layout-specific, component-specific, and page-specific generation rules.

Generate a comprehensive design brief for Astro.js website generation from scraper output and design tokens. Use this skill when you have scraped website data (structure.json, schema.json, content.json) and design tokens, and need to create a section-by-section blueprint for each page. Works with Shadcn Skill to understand available components and composition patterns. Always use this skill when the user mentions "design brief", "site blueprint", "page planning", "component mapping", or needs to bridge scraped content to code generation.

Extract design tokens (colors, typography, spacing, borders, shadows) from a reference website using headless browser automation. Use this skill when you need to scrape a website's visual design values and convert them to OKLCH format for Shadcn theming. Works with Webapp Testing Skill for Playwright automation and Shadcn Skill for CSS variable mapping. Always use this skill when the user mentions "extract design", "scrape styles", "get colors from website", "design tokens", or wants to clone/mimic a site's visual design.

Iteratively fix specific failing files based on validation errors or quality feedback. Perform targeted re-generation of individual files with error context injected. Use this skill when validation fails, quality scores are too low, or specific files need re-generation. Always use this skill after validate-and-repair or test-and-quality when errors persist, or when the user mentions "fix this file", "re-generate", "iterate", or needs to address specific feedback.

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".

Run functional and visual quality tests on generated Astro.js websites. Start dev server, visit pages, check for errors, and evaluate visual quality using automated heuristic checks. Use Webapp Testing Skill for Playwright automation. Always use this skill after code generation, when user mentions "testing", "quality check", "visual review", or needs to verify the generated site works correctly.

Validate generated Astro.js code and apply auto-fixes for common errors. Run static checks (astro check, tsc, build) and repair known error patterns. Use this skill when you need to validate generated code, fix build errors, or repair common Astro/Shadcn integration issues. Always use this skill after code generation, when tests fail, or when the user mentions "validation", "fix errors", "repair code", or "build failed".

Use for ALL Nix flake configuration questions. This includes file structure (flake.nix, nix/, .envrc), adding/removing packages or binaries, PATH configuration, development shells, pre-commit hooks, formatters, linters, enforcers, environment variables, adding registries, and how the Nix template structure works. Use when user asks about nix, flake, packages, binaries, shells, PATH, formatting, linting, git hooks, or registries.

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".

Generate Astro.js code (layouts, components, pages) from design briefs using Shadcn UI components. Use this skill when you need to create .astro files from a design-brief.json specification. Works with Shadcn Skill for component APIs, Frontend Design Skill for visual polish, and Astro AI Docs for best practices. Always use this skill when generating Astro code, creating .astro files, or implementing page layouts. The skill includes reference files for layout-specific, component-specific, and page-specific generation rules.

Generate a comprehensive design brief for Astro.js website generation from scraper output and design tokens. Use this skill when you have scraped website data (structure.json, schema.json, content.json) and design tokens, and need to create a section-by-section blueprint for each page. Works with Shadcn Skill to understand available components and composition patterns. Always use this skill when the user mentions "design brief", "site blueprint", "page planning", "component mapping", or needs to bridge scraped content to code generation.

Extract design tokens (colors, typography, spacing, borders, shadows) from a reference website using headless browser automation. Use this skill when you need to scrape a website's visual design values and convert them to OKLCH format for Shadcn theming. Works with Webapp Testing Skill for Playwright automation and Shadcn Skill for CSS variable mapping. Always use this skill when the user mentions "extract design", "scrape styles", "get colors from website", "design tokens", or wants to clone/mimic a site's visual design.

Iteratively fix specific failing files based on validation errors or quality feedback. Perform targeted re-generation of individual files with error context injected. Use this skill when validation fails, quality scores are too low, or specific files need re-generation. Always use this skill after validate-and-repair or test-and-quality when errors persist, or when the user mentions "fix this file", "re-generate", "iterate", or needs to address specific feedback.

Run functional and visual quality tests on generated Astro.js websites. Start dev server, visit pages, check for errors, and evaluate visual quality using automated heuristic checks. Use Webapp Testing Skill for Playwright automation. Always use this skill after code generation, when user mentions "testing", "quality check", "visual review", or needs to verify the generated site works correctly.

Validate generated Astro.js code and apply auto-fixes for common errors. Run static checks (astro check, tsc, build) and repair known error patterns. Use this skill when you need to validate generated code, fix build errors, or repair common Astro/Shadcn integration issues. Always use this skill after code generation, when tests fail, or when the user mentions "validation", "fix errors", "repair code", or "build failed".