Claude Skills Guide

Full Stack Web App with Claude Skills Step by Step

Building a complete web application involves multiple phases: planning, frontend development, backend logic, testing, documentation, and deployment. Claude Code skills specialize in each of these areas, letting you move through development faster while maintaining quality. This guide walks you through creating a simple task management API with a React frontend, demonstrating how different skills handle specific challenges.

Prerequisites

Before starting, ensure you have:

You will also need a PostgreSQL database running locally or access to a cloud database service.

Step 1: Project Initialization with supermemory

Every successful project starts with clear requirements. The supermemory skill helps you organize project context, track decisions, and maintain a knowledge base throughout development.

Initialize your project structure:

# Create project directory
mkdir task-manager-api
cd task-manager-api

# Initialize Git
git init

# Set up your remote
git remote add origin git@github.com:yourusername/task-manager-api.git

Before writing code, use supermemory to document your API requirements:

/supermemory
Store the following project context:
- Project: Task Manager API
- Tech stack: Express.js backend, React frontend, PostgreSQL database
- Core features: Create tasks, list tasks, update task status, delete tasks
- Authentication: JWT-based auth
- Frontend: Single page app with task list, task form, and task detail views

This creates a persistent context that Claude Code references throughout development.

Step 2: Backend Development with tdd and pdf Skills

For the backend, use test-driven development to ensure your API is reliable from the start. The tdd skill guides you through writing tests before implementation, a practice that catches bugs early and improves code design.

Setting Up the Express Backend

Create your backend structure:

mkdir server
cd server
npm init -y
npm install express pg dotenv cors jsonwebtoken bcryptjs
npm install --save-dev jest supertest

Create your first test file using the tdd approach:

// server/tests/task.test.js
const request = require('supertest');
const app = require('../app');

describe('Tasks API', () => {
  let authToken;

  beforeAll(async () => {
    // Create test user and get token
    const response = await request(app)
      .post('/api/auth/register')
      .send({ email: 'test@example.com', password: 'password123' });
    authToken = response.body.token;
  });

  test('POST /api/tasks creates a new task', async () => {
    const response = await request(app)
      .post('/api/tasks')
      .set('Authorization', `Bearer ${authToken}`)
      .send({ title: 'Test Task', description: 'Test description' });

    expect(response.status).toBe(201);
    expect(response.body).toHaveProperty('id');
    expect(response.body.title).toBe('Test Task');
  });

  test('GET /api/tasks returns all tasks for user', async () => {
    const response = await request(app)
      .get('/api/tasks')
      .set('Authorization', `Bearer ${authToken}`);

    expect(response.status).toBe(200);
    expect(Array.isArray(response.body)).toBe(true);
  });
});

Run your tests with the tdd skill active:

/tdd
Run the task test suite and show me the coverage report

The tdd skill provides guidance on test structure, assertions, and helps interpret test failures. Once tests pass, implement the route handlers following the same pattern.

Generating API Documentation

The pdf skill helps you create comprehensive API documentation. After implementing your endpoints, generate documentation:

/pdf
Generate API documentation in PDF format with endpoint descriptions, request/response schemas, and authentication requirements

Your documentation file becomes valuable for future reference and for frontend developers who need to integrate with your API.

Step 3: Frontend Development with frontend-design and canvas-design

For the React frontend, use the frontend-design skill to generate component structures rapidly. This skill understands React patterns and creates accessible, well-structured components.

Creating the Task List Component

Describe your component to the frontend-design skill:

/frontend-design
Create a TaskList component that displays tasks from an API. 
Requirements:
- Fetch tasks from GET /api/tasks
- Show loading state while fetching
- Display each task as a card with title, description, status badge
- Include empty state when no tasks exist
- Use React with hooks, TypeScript preferred

The skill generates the component structure with proper state management, error handling, and styling approach suggestions.

Adding Visual Elements with canvas-design

For custom graphics like status icons or empty state illustrations, use the canvas-design skill:

/canvas-design
Create a simple checkmark icon and an empty inbox illustration for a task management app. Output as PNG files at 64x64 pixels.

This eliminates the need for external design tools for simple assets.

Step 4: Integration and End-to-End Testing

Connect your frontend to backend by setting up environment variables:

// frontend/src/config.js
export const API_BASE_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000/api';

For comprehensive testing, use the tdd skill to write integration tests:

/tdd
Write integration tests that verify the full user flow: 
login, create task, view task in list, update task status, delete task

These tests ensure your frontend and backend work together correctly.

Step 5: Documentation and Knowledge Management

As your project grows, maintaining documentation becomes critical. The pdf skill creates user guides, while supermemory tracks technical decisions.

Generate a README using your existing code:

/pdf
Generate a project README from the codebase structure. 
Include: installation instructions, API endpoints, environment variables, 
and basic usage examples

Store project context in supermemory for future reference:

/supermemory
Add these development notes:
- Database schema: users(id, email, password_hash), tasks(id, user_id, title, description, status, created_at)
- Auth: JWT tokens expire in 24 hours
- Deployment: frontend on Vercel, backend on Render
- Known issues: None currently

Step 6: Deployment

Deploy your backend to a platform like Render or Railway:

# Example Render deployment configuration
# render.yaml
services:
  - type: web
    name: task-manager-api
    env: node
    buildCommand: npm install && npm run build
    startCommand: npm start
    envVars:
      - key: DATABASE_URL
        fromDatabase:
          name: task-manager-db
          property: connectionString
      - key: JWT_SECRET
        generateValue: true

Deploy your React frontend to Vercel or Netlify. Both platforms integrate with GitHub for automatic deployments.

Summary

This workflow demonstrates how Claude Code skills handle different aspects of full stack development:

Each skill specializes in a specific domain, letting you focus on architecture and business logic while Claude handles repetitive tasks. As you build more projects, these skills adapt to your preferences and coding style.

Built by theluckystrike — More at zovo.one

Explore Our Developer Guides

© 2026 theluckystrike Developer Guides