Agent skill
web-ux-architect
Generate sitemap and wireframe specifications from project-config.json and produce UX planning artifacts.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/web-ux-architect
Metadata
Additional technical details for this skill
- stage
- 2-ux
- category
- web-builder
- pipeline
- web-builder
SKILL.md
Web UX Architect
Objective
Read project-config.json and generate information architecture artifacts for
page routes and wireframe structure.
Required Workflow
- Read
project-config.jsonfrom priorweb-stack-planneroutput. - Generate a full sitemap with top-level and nested routes.
- For each page, create a wireframe spec table with layout zones:
- header
- hero
- content
- sidebar
- footer
- Reference these design tools for visual generation:
- Google Stitch: https://stitch.withgoogle.com/
- Relume: https://relume.io/
- v0 by Vercel: https://v0.dev/
- Framer AI: https://framer.com/
- Uizard: https://uizard.io/
- Produce:
sitemap.mdwireframes.mdux-report.json
Execution
python skills/web-ux-architect/scripts/ux_architect.py --input <workspace> --output <out.json> --format json
References
references/tools.md
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?