web-dev

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.