Design Reference Analysis
Use when analyzing screenshots, competitor sites, reference apps, visual samples, or design boards before implementing or refactoring UI.
Install
$ agentstack add skill-jukrap-ai-agent-playbook-design-reference-analysis ✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
About
Design Reference Analysis
Use this when reference material should inform design decisions without copying the reference into the product or public docs.
Workflow
- Capture the reference scope, source boundary, viewport, state, and why the reference is relevant.
- Analyze hierarchy, layout, spacing, typography, color, components, motion cues, content density, and accessibility risks.
- Separate reusable principles from distinctive source assets, copy, brand marks, and product-specific interaction patterns.
- Convert useful findings into a local brief, design-system handoff, visual QA checklist, or implementation acceptance criteria.
- Preserve evidence with portable locators or screenshots when allowed, but keep generated reports under runtime until reviewed.
Reference
Read references/reference-analysis-protocol.md for the analysis sequence and adoption rules.
Read references/design-system-audit-matrix.md when a reference should inform tokens, components, variants, density, or design-system rules.
Read references/visual-evidence-package.md for screenshot, annotation, and before/after evidence requirements.
Source & license
This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.
- Author: jukrap
- Source: jukrap/ai-agent-playbook
- License: MIT
- Homepage: https://www.npmjs.com/package/ai-agent-playbook
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet — be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.