| name | preview |
| description | Preview expected output, UX flows, copy, interaction design, or generated content before implementing. Use when the user wants to see what something will look like. Triggers: preview, mockup, show me, xem trước, thử xem, mô phỏng. |
| encoding | UTF-8 |
| agents | ["frontend-specialist","documentation-writer"] |
| related-skills | ["create","ui-ux-pro-max","plan"] |
Memory Protocol
START: Read .ai-memory.md from project root. Check UI patterns, design decisions, existing previews, brand guidelines, and user flow notes.
END: Update .ai-memory.md using Memory Compaction Rules with: what was previewed, assumptions, feedback, and confirmed decisions.
Goal
Show the user what the result will look or feel like before full implementation.
Agent Routing
- If previewing UI/UX → read
.kiro/skills/agents/agents/frontend-specialist.md and apply its knowledge
- If previewing documentation → read
.kiro/skills/agents/agents/documentation-writer.md and apply its knowledge
- If previewing API response → read
.kiro/skills/agents/agents/backend-specialist.md and apply its knowledge
Socratic Gate
Before previewing, verify:
- What artifact is being previewed? (UI, API output, document, flow?)
- What level of fidelity is expected? (wireframe, mockup, full sample?)
- Any specific requirements or constraints?
If any answer is unclear, ASK before proceeding.
Workflow
- Read Memory — Load
.ai-memory.md for project context and design history.
- Infer the artifact being previewed: UI, API output, document, message, workflow, or report.
- Produce a faithful mock, sample output, walkthrough, or structured preview.
- Highlight assumptions behind the preview.
- Identify what could change during implementation.
- Update Memory — Save preview details and decisions to
.ai-memory.md.
Checklist
Rules
- Keep previews realistic and consistent with the current project.
- Label illustrative content clearly when it is mock data.
- Avoid implying broad code changes; if the preview would require major refactor, CALL IT OUT and ASK before implementation.
- Always read and update the memory file.
Quality Gate
After completing, read .kiro/skills/_scripts/checklist.md for cross-cutting quality checks.
Related Skills
/create → read .kiro/skills/create/SKILL.md — Implement the previewed design/ui-ux-pro-max → read .kiro/skills/ui-ux-pro-max/SKILL.md — Advanced UI/UX design/plan → read .kiro/skills/plan/SKILL.md — Plan implementation of previewed feature
Encoding
All code snippets and example files referenced or produced by this skill must be UTF-8 encoded. When applicable, include encoding: "UTF-8" in SKILL.md front-matter and ensure saved files use UTF-8 (no BOM).
