The Agent Skills Directory

[DYNAMIC_EXECUTION]: The script scripts/visual-check.mjs dynamically installs Node.js packages (playwright-core, pngjs, pixelmatch@5) using execSync at runtime if they are not already installed. Additionally, it utilizes a dynamic import() call to load the scripts/visual-targets.mjs configuration file from a path resolved during execution.
[INDIRECT_PROMPT_INJECTION]: The skill is designed to interpret data from products/design/DESIGN.md, products/prototype/, and products/fspec/ as the primary 'source of truth' for generating production code. This creates a surface where malicious instructions embedded within these design files could be followed by the agent, potentially leading to the injection of backdoors or malicious logic into the generated React components.
Ingestion points: products/design/DESIGN.md, products/prototype/, and various specification files in the products/ directory.
Boundary markers: None; the skill explicitly instructs the agent to treat these external files as authoritative sources for the visual and structural layer of the application.
Capability inventory: The skill has permissions to write to the project's source directory (src/) and execute shell/Node.js commands.
Sanitization: No sanitization or validation of the design input content is performed before processing it as a set of instructions for code generation.
[EXTERNAL_DOWNLOADS]: The skill fetches the shadcn library and other development tools from the public NPM registry. While these originate from a well-known and standard service for the skill's purpose, they represent the introduction of external code at runtime.
[COMMAND_EXECUTION]: The workflow relies on executing several CLI tools and custom scripts, including pnpm dlx, npm install, and the provided visual-check.mjs and visual-freeze.sh scripts. These operations allow the skill to read source code, interact with the local filesystem, and run automated tests against a live application URL.

design-to-code