Claude Skills Guide

Claude Code Cookbook: Practical Recipes Collection

Claude Code transforms how developers approach coding tasks by providing specialized skills that handle complex workflows. This cookbook presents practical recipes you can implement immediately, covering document generation, frontend development, test-driven development, and knowledge management.

PDF Generation with the pdf Skill

The pdf skill streamlines document creation by converting markdown directly to formatted PDF files. This proves invaluable for generating reports, invoices, and technical documentation without leaving your development environment.

---
name: pdf
description: Converts markdown documents to PDF files
---

To generate a PDF, invoke the pdf skill with your markdown content. The skill handles pagination, headers, and formatting automatically. This approach works particularly well for automated report generation in CI/CD pipelines.

# Example: Convert markdown to PDF
claude --print "/pdf --input report.md --output report.pdf"

The pdf skill supports custom styling through CSS, allowing you to match your organization’s branding guidelines. You can specify page margins, font families, and header/footer templates within your skill configuration.

Frontend Design with frontend-design

Building user interfaces often requires iterating between design tools and code. The frontend-design skill bridges this gap by generating production-ready HTML, CSS, and JavaScript from design specifications.

---
name: frontend-design
description: Generates responsive frontend components and layouts
---

A practical workflow involves describing your component requirements in plain language:

Create a responsive navigation bar with a hamburger menu for mobile.
The desktop view should show links: Home, About, Services, Contact.
Use a clean, modern aesthetic with a subtle shadow on scroll.

The frontend-design skill generates semantic HTML5 markup with scoped CSS, reducing the boilerplate typically required for responsive components. You can then refine the output using the edit_file tool for specific adjustments.

Test-Driven Development with tdd

The tdd skill implements test-driven development workflows by generating test files alongside your implementation code. This ensures your code remains testable and catches regressions early.

---
name: tdd
description: Implements test-driven development workflows
---

The tdd skill follows the red-green-refactor cycle:

  1. Red: Write a failing test describing the desired behavior
  2. Green: Implement the minimum code to pass the test
  3. Refactor: Improve code quality while maintaining test coverage

For JavaScript projects, the tdd skill generates Jest-compatible test files. For Python projects, it produces pytest configurations. This standardization means your test suite remains consistent across different modules.

// Example test generated by tdd skill
describe('calculateTotal', () => {
  it('should sum all item prices correctly', () => {
    const items = [{ price: 10 }, { price: 20 }, { price: 15 }];
    expect(calculateTotal(items)).toBe(45);
  });
  
  it('should return 0 for empty array', () => {
    expect(calculateTotal([])).toBe(0);
  });
});

Memory Management with supermemory

Long-running projects accumulate valuable context that you shouldn’t lose between sessions. The supermemory skill persists conversation context, code decisions, and project knowledge across sessions.

---
name: supermemory
description: Manages persistent memory and context for projects
---

Using supermemory involves explicitly saving important context:

@superstore Save this decision: We chose PostgreSQL over MongoDB for the user database because of better ACID compliance requirements.

The skill organizes memories using tags and timestamps, making retrieval straightforward:

@superstore Retrieve all decisions related to database choices.

This proves particularly valuable when returning to a project after weeks or months, eliminating the need to re-explain architectural decisions to Claude.

Combining Skills for Complex Workflows

Individual skills become powerful when combined. Consider a workflow where supermemory remembers project context, tdd ensures test coverage, and pdf generates documentation:

  1. Start with supermemory to load previous architectural decisions
  2. Use tdd to implement a new feature with tests
  3. Generate API documentation with the docx skill
  4. Export user guides as PDF using the pdf skill

This chain eliminates context-switching and maintains consistency across deliverables. Each skill handles its domain while passing results to the next tool in your workflow.

Skill Composition Patterns

Advanced users compose skills using the sequential tool calling pattern. Instead of invoking skills individually, you can specify a sequence:

---
name: feature-pipeline
description: Implements a complete feature workflow
---

This approach standardizes your development process while allowing flexibility for project-specific requirements.

Performance Optimization Tips

When using multiple skills in a session, consider these optimization strategies:

Declare tool requirements explicitly: Each skill should specify only the tools it needs. This reduces token consumption and improves response times.

Batch related operations: Rather than invoking a skill repeatedly for similar tasks, combine operations into a single invocation when possible.

Use memory strategically: Save context only when it provides future value. Not every decision needs persistence.

Conclusion

These recipes represent starting points for integrating Claude skills into your development workflow. The combination of specialized skills like pdf, frontend-design, tdd, and supermemory creates a flexible toolkit adaptable to various project requirements. Start with the recipes that address your immediate needs, then explore skill composition as your workflow matures.

Built by theluckystrike — More at zovo.one