Agent-Skills-Hub web-frontend-designer

Scaffold frontend architecture, components, routing, and UI dependencies from project config and wireframes.

install

source · Clone the upstream repo

git clone https://github.com/0x-Professor/Agent-Skills-Hub

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/0x-Professor/Agent-Skills-Hub "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/web-frontend-designer" ~/.claude/skills/0x-professor-agent-skills-hub-web-frontend-designer && rm -rf "$T"

manifest: skills/web-frontend-designer/SKILL.md

source content

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:
- Font Awesome: https://fontawesome.com/
- React Bits (+ MCP if available): https://reactbits.dev/ and https://reactbits.dev/get-started/mcp
- Spline: https://spline.design/
- Lucide Icons: https://lucide.dev/
- Shadcn/ui: https://ui.shadcn.com/
- Aceternity UI: https://ui.aceternity.com/
- Magic UI: https://magicui.design/
- Framer Motion: https://www.framer.com/motion/
- React Three Fiber: https://docs.pmnd.rs/react-three-fiber
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

```
references/tools.md
```