Sourceful Energy

Claude Code Setup

Configure your project to use the Sourceful Design System with Claude Code.

Why use CLAUDE.md?

Claude Code automatically reads CLAUDE.md files in your project root. By adding our template, Claude will automatically:

  • Use components from @sourceful-energy/ui
  • Follow Sourceful design patterns and color tokens
  • Avoid creating custom components when design system components exist
  • Apply correct dark mode and accessibility practices

Setup Steps

1. Install the package

npm install @sourceful-energy/ui

2. Add styles to your app

Import the styles in your root layout or app entry point:

import "@sourceful-energy/ui/styles.css"

3. Add the CLAUDE.md template

Download the template to your project root:

curl -o CLAUDE.md https://raw.githubusercontent.com/srcfl/srcful-design-system/main/CLAUDE.project-template.md

4. Customize for your project

Open CLAUDE.md and add any project-specific context at the bottom. This helps Claude understand your specific codebase patterns.

Template Contents

The template includes:

  • Component quick reference - Table mapping needs to components
  • Import patterns - Correct way to import components and styles
  • Key patterns - Theming, colors, toasts, forms
  • Don't list - Common mistakes to avoid
  • Project notes section - Space for your custom context

Example Prompts

Once set up, you can give Claude Code prompts like:

"Create a form for adding a new site with name, location, and capacity fields"

"Add a card showing battery status with a progress bar"

"Create a data table for displaying device list with sorting"

Claude will automatically use the correct design system components, patterns, and styling.

Existing Projects

For existing projects that don't use the design system yet:

  1. Follow the setup steps above
  2. Ask Claude to "migrate this component to use @sourceful-energy/ui"
  3. Review and test the changes
  4. Repeat for other components as needed

You don't need to migrate everything at once. The design system components can coexist with existing code.

View the template: CLAUDE.project-template.md on GitHub