skills.rest
andreiverdes
andreiverdesCOMMUNITY
Explore all skills by this author →
Website𝕏@andreiverdesGitHub

web-dev

Convert designs and requirements into full-stack web applications.

Updated Apr 8, 2026
Search Tags:#full-stack#react#vue#nextjs#rest api#express#design-to-code
One-click install
npx skills add https://github.com/andreiverdes/awesome-claude --skill web-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-dev
Source: https://github.com/andreiverdes/awesome-claude/tree/main/skills/web-dev
Command: npx skills add https://github.com/andreiverdes/awesome-claude --skill web-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you go from idea or design to working full-stack code, avoiding the slow, error-prone process of manually wiring up frontend components, APIs, and integration details.

Core Features & Use Cases

  • Design-to-code from .pen: Extract layout, tokens, and component structure from Pencil .pen files and convert them into UI code.
  • Stack selection and project scaffolding: Recommend and scaffold a working Next.js (with shadcn/ui), React + Express, or Vue/Nuxt setup.
  • API-first feature building: Define endpoints and request/response shapes, implement backend logic, add tests, build the UI, and integrate end-to-end.
  • Verification after changes: Validate builds, run tests when available, and visually compare outputs when designs exist.

Quick Start

Use the web-dev skill in interactive mode to scan any existing .pen designs, propose the best stack, scaffold the project, and implement a complete feature for your app using the provided requirements.

Frequently Asked Questions about web-dev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert design files into production-ready React or Vue components?▼

Converting designs to full-stack code requires extracting layout and tokens from .pen files, selecting a stack like Next.js or Vue, scaffolding the project, implementing API endpoints, and building the UI with end-to-end integration.

How do I scaffold a full-stack web application with a REST API and frontend UI?▼

Scaffolding a full-stack application involves recommending a stack like Next.js with shadcn/ui or React with Express, defining REST API endpoints and request shapes, implementing backend logic, and integrating the frontend UI.

Can I build a Next.js application using shadcn/ui directly from a design file?▼

Yes, you can build Next.js applications with shadcn/ui from design files by extracting layout and component structure from .pen files and converting them into working frontend code through the design-to-code workflow.

What is the best way to structure an API-first feature implementation across frontend and backend?▼

API-first feature implementation structures workflows by defining endpoints and request/response shapes first, implementing backend logic with tests, building the UI, and integrating the frontend and backend end-to-end.

How do I verify web application builds and run tests after generating code from designs?▼

Verifying web application builds after code generation involves validating build outputs, running available tests, and visually comparing the generated UI against existing designs to ensure accurate design-to-code conversion.

Does this workflow support Vue and Nuxt projects or is it limited to React and Next.js?▼

This workflow supports Vue and Nuxt projects alongside React and Next.js, allowing you to scaffold and build full-stack applications across multiple frameworks using the same design-to-code and API-first implementation process.

Related Skills

Explore More Software Engineering Skills→
iilleagliilleagl

pen-design-generator

Generate Pencil .pen design drafts from UI requirements using DevUI components.

Community
Advanced
brainbrewlabsbrainbrewlabs
7

doc-publishing

Publishes documentation to GitHub Pages, Vercel, or Netlify from source docs and build outputs.

Official
Intermediate
seo-jinseokseo-jinseok

moai-domain-uiux

Guide UI/UX design systems with W3C DTCG 2025.10 tokens and WCAG 2.2 compliance.

Community
Advanced
KatlyngKatlyng

convex-quickstart

Scaffold Convex projects and wire frontend frameworks with the official CLI.

Community
Intermediate