leonvanzyl

Planning Phase — Design skill for Claude Code

Design community

We are building a production-style full-stack web application using the existing project setup, design system, skills, conventions, and rules already present in this repository.

How to install Planning Phase

Installs to ~/.claude/skills/leonvanzyl-claude-code-pro-workflow-demo-planning-phase/SKILL.md

Terminal

mkdir -p ~/.claude/skills/leonvanzyl-claude-code-pro-workflow-demo-planning-phase && curl -fsSL https://raw.githubusercontent.com/leonvanzyl/claude-code-pro-workflow-demo/HEAD/PROMPTS/planning-phase.md -o ~/.claude/skills/leonvanzyl-claude-code-pro-workflow-demo-planning-phase/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Planning Phase does

We are building a production-style full-stack web application using the existing project setup, design system, skills, conventions, and rules already present in this repository.

Before writing any code, your job is to create a detailed implementation plan.

Project Goal

Build a multi-user AI-powered web app where users can submit article URLs, the app retrieves the public web content, summarizes the article with an LLM, generates useful tags, and stores the result in the user's account.

Alternatives in Design

Makepad Skills — Makepad UI development skills for Rust apps: setup, patterns, shaders, packaging, and troubleshooting 723 ★
Website Builder Setup — Build professional animated websites with Claude Code — no coding needed 313 ★
Design Present — Generate an interactive HTML presentation from Figma screens — annotated walkthrough with transitions, speaker 309 ★