| name | web-frontend-designer |
| description | Scaffold frontend architecture, components, routing, and UI dependencies from project config and wireframes. |
| compatibility | codex, claude-code, claude-ai, agent-skills |
| license | Apache-2.0 |
| allowed-tools | ["read_file","write_file","run_terminal_cmd","web_search"] |
| metadata | {"category":"web-builder","stage":"3-frontend","pipeline":"web-builder"} |
Web Frontend Designer
Objective
Scaffold a production-ready frontend foundation from project-config.json and
wireframes.md, including component structure, dependencies, and route shells.
Required Workflow
- Read
project-config.json and wireframes.md.
- Scaffold the chosen framework (for example
create-next-app or Vite scaffolding pattern).
- Configure the chosen CSS/design system (Tailwind, Shadcn/ui, Chakra UI, Material UI, Ant Design, Mantine, DaisyUI, or vanilla CSS).
- Integrate or plan integration for:
- Set up font strategy with Google Fonts or Fontsource.
- Set image/illustration sources with Unsplash API, Pexels, or Lummi.
- Generate component tree (
components, layouts, pages or app) and route placeholders for the sitemap.
- Enforce responsive design, dark mode, and accessibility (including ARIA labels).
- Output scaffold files and
frontend-report.json.
Execution
python skills/web-frontend-designer/scripts/frontend_designer.py --input <workspace> --output <out.json> --format json
References