gsp-add-reference

References are loaded by design, build, and research commands and passed to their agents as additional context.

Input: User-provided files, URLs, or descriptions Output: {project}/references/ with organized reference files + references/INDEX.md

Scan .design/projects/ for project directories. If only one project exists, use it. If multiple, ask the user which project to work on.

Set PROJECT_PATH = .design/projects/{project}

Step 1: Ensure references directory

mkdir -p {PROJECT_PATH}/references

Step 2: Determine reference type

If the user provided a file path, URL, or description in the skill invocation, use that. Otherwise, ask:

Use AskUserQuestion with options:

• Screenshot or image — "Add a screenshot, mockup, or wireframe"
• URL — "Save a webpage or design reference from a URL"
• Competitor example — "Document a competitor's approach"
• Brand guidelines — "Add existing brand guidelines or style guide"
• Design spec — "Add a design specification or requirements doc"
• Other — "Add any other reference material"

Step 3: Process reference

For file paths (images, PDFs, documents):

1. Verify the file exists
2. Copy to {PROJECT_PATH}/references/ with a descriptive name
3. If it's an image, read it to generate a text description
4. Write a companion .md file with metadata (source, date added, description, relevant screens/phases)

For URLs:

1. Fetch the URL content
2. Write a summary to {PROJECT_PATH}/references/url-{kebab-name}.md with:
   • Source URL
   • Date captured
   • Key takeaways
   • Relevant screens/phases
   • Screenshots or key quotes