Skip to content
Agentmart
Submit a tool

web-frontend-designer

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

Skill by 0x-Professor

IndexedApache-2.0★ 11
Write a review

Chalk Labs

Need help deploying web-frontend-designer?

Chalk Labs sets up agents like this inside real teams: connected to your tools, tested on your data, with a human in the loop where it matters.

Book a call

Install

Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.

npx agentmarket install skill/0x-professor-web-frontend-designer

Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.

Get the weekly diff

The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.

We use your email only for this newsletter. Privacy

About

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

Use cases: design, frontend

Reviews

Write a review

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.

Tools
No tools found
Secrets
None asked for
Install scripts
None found
Runs as
Python package

Network hosts it talks to 1

  • codeload.github.com · found in install command

Files it touches

  • ~/.claude/skills/web-frontend-designer

What's inside

Skill name
web-frontend-designer
Description
Scaffold frontend architecture, components, routing, and UI dependencies from project config and wireframes.
License
Apache-2.0
Compatibility
codex, claude-code, claude-ai, agent-skills
Metadata
stage: 3-frontend · category: web-builder · pipeline: web-builder
Instructions
39 lines in SKILL.md · view on GitHub

Before installing

  • Ships executable scripts

Agent Skills spec issues

  • allowed-tools: must be a space-separated string

Files (4)

  • SKILL.md
  • openai.yaml · agents/
  • tools.md · references/
  • frontend_designer.py · scripts/

SKILL.md (first lines)

# 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

1. Read `project-config.json` and `wireframes.md`.
2. Scaffold the chosen framework (for example `create-next-app` or Vite scaffolding pattern).
3. Configure the chosen CSS/design system (Tailwind, Shadcn/ui, Chakra UI, Material UI, Ant Design, Mantine, DaisyUI, or vanilla CSS).
4. 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
5. Set up font strategy with Google Fonts or Fontsource.
6. Set image/illustration sources with Unsplash API, Pexels, or Lummi.
7. Generate component tree (`components`, `layouts`, `pages` or `app`) and route placeholders for the sitemap.
8. Enforce responsive design, dark mode, and accessibility (including ARIA labels).
9. Output scaffold files and `frontend-report.json`.

## Execution

```bash
python skills/web-frontend-designer/scripts/frontend_designer.py --input <workspace> --output <out.json> --format json
```

## References

- `references/tools.md`

From 0x-Professor/Agent-Skills-Hub, Apache-2.0.

More from 0x-Professor/Agent-Skills-Hub

Signals

Stars
11
Forks
2
Open issues
0
Last commit (this folder)
Feb 25, 2026 (8 months ago)
Last release
Feb 26, 2026 (8 months ago)

From GitHub (fetched Oct 24, 2026).

Details

License
Apache-2.0
Repository
github.com/0x-Professor/Agent-Skills-Hub
First seen
Oct 24, 2026
Last checked
Oct 24, 2026
Source
GitHubgithub-graphql

More from 0x-Professor

Done for you

Rather not set it up yourself?

Chalk Labs scopes, builds and runs agents for your team: the task audit, the eval harness, the integrations and the weekly ops report. Fixed scope, priced before we start.

See how we build AI agents →Read the case studies

Chalk Labs is a two-founder AI and growth studio. We build AI agents, CRMs and MVPs for Web3 and AI companies, and have shipped 50+ product and token launches.

launches shipped
50+
launches shipped
media placements
500+
media placements
founders on every account
2
founders on every account

Press we've placed: Forbes · CoinDesk · Decrypt · Cointelegraph · The Block

Rahil Jain, Co-founder, Chalk Labs. Ex-Goldman Sachs engineer. You talk to the person who builds it.

Get web-frontend-designer running in your business

Tell us what you want to automate. A founder replies within one working day with a plan, not a pitch deck.

Goes to the Chalk Labs founders, not the newsletter. Privacy

Need help deploying web-frontend-designer?

CallGet help
Cite this page

web-frontend-designer skill. Agent Mart. https://agentmart.dev/skills/0x-professor-web-frontend-designer (last updated 2026-10-24)