Spec To Repo
Turns a natural-language product specification into a runnable, structured codebase, choosing an appropriate stack and scaffolding the full repo rather than a single file.
Before & after
Same prompt, same agent — the only difference is the skill.
I can definitely help you build a weather dashboard! That sounds like a great project. Before I get started, I have a few questions to clarify the scope. What weather data are you planning to use — OpenWeatherMap API, a government weather service, or something else? Should it show forecasts for multiple cities or just one location? Do you want real-time updates or will static data work? Also, I'm wondering about the UI — are you thinking a minimalist design or something more feature-rich with charts and graphs? And do you need user authentication, or should it be public-facing? I can certainly scaffold out a React project with TypeScript, but knowing these details would help me tailor it to your exact needs. What's your timeline like?
WEATHER DASHBOARD - NEXT.JS + TYPESCRIPT STARTER REPO STRUCTURE - app/page.tsx (main dashboard) - app/api/weather/route.ts (OpenWeatherMap proxy) - components/WeatherCard.tsx - components/ForecastGrid.tsx - lib/weather-service.ts (API client) - types/weather.ts (full TypeScript types) TECH STACK Next.js 15 (App Router), React 19, TypeScript 5.6, Tailwind CSS, shadcn/ui components, axios for HTTP, next-env for env vars FEATURES INCLUDED Current weather display with temp, humidity, wind speed. 5-day forecast with hourly breakdown. Search by city name. Geolocation auto-detect. Dark mode toggle. Responsive mobile-first design. Type-safe API layer. SETUP STEPS 1. npm create next-app@latest weather-dash -- --typescript 2. npm install axios shadcn-ui 3. Add NEXT_PUBLIC_WEATHER_API_KEY to .env.local 4. Copy components to app/ and components/ folders 5. npm run dev on http://localhost:3000 CORE WEB VITALS LCP target: 0.8s (image optimization built-in). CLS target: 0.05 (fixed layout, no layout shifts). Initial bundle: 45KB gzipped. All static pages pre-rendered at build time.
About this skill
name: spec-to-repo description: Use when Use when the user says 'build me an app', 'create a project from this spec', 'scaffold a new repo', 'generate a starter', 'turn this idea into code', 'bootstrap a project', 'I have requirements and...
Spec To Repo
Use when the user says 'build me an app', 'create a project from this spec', 'scaffold a new repo', 'generate a starter', 'turn this idea into code', 'bootstrap a project', 'I have requirements and need a codebase', or provides a natural-language project specification and expects a complete, runnable repository. Stack-agnostic: Next.js, FastAPI, Rails, Go, Rust, Flutter, and more.
What you get
- Public GitHub repo (alirezarezvani/claude-skills)
- the spec-to-repo skill folder with SKILL.md. Part of a 337-skill / 30-agent / 70-command install.
Customize your output
- Fork the repo and adapt the skill's instructions and references to your workflow.
Example output
Activates automatically when your request matches Spec To Repo; chains with the other skills, agents, and commands in the collection.
Best for
Creators, builders, and teams using Claude Code.
SKILL.md preview
---
name: spec-to-repo
description: Use this skill when the user provides a natural-language project specification and expects a complete, runnable repository scaffolded from it.
version: 1.0.0
category: Business & Ops / Product
author: AgentVolt
license: proprietary
tags:
- business-ops
- product
---
# Spec To Repo
Turns a natural-language product specification into a runnable, structured codebase, choosing an appropriate stack and scaffolding the full repo rather than a single file.
## When to use
… (sign up to view the full skill)More business & ops skills
View all Business & Ops skills →Product Manager Toolkit
Comprehensive toolkit for product managers including RICE prioritization, customer interview analysis, PRD templates, discovery frameworks, and go-to-market strategies.
Product Skills
Coordinates a set of product-management sub-skills — prioritization, discovery, UX research, competitive teardown, analytics, roadmapping.
Experiment Designer
Use when planning product experiments, writing testable hypotheses, estimating sample size, prioritizing tests, or interpreting A/B outcomes with practical statistical rigor.
UX Researcher & Designer
UX research and design toolkit for Senior UX Designer/Researcher including data-driven persona generation, journey mapping, usability testing frameworks, and research synthesis.