Feature: Analytics charts (Sample)

This package contains a sample implementation of packages/template/feature.

A "feature" can be composed of any of the following:

• Extension of the base app via @salesforce/webapp-template-cli-experimental
• Components
• Rules
• Skills

Components

This sample ships AnalyticsChart (line/bar) and ChartContainer so you can see how a feature packages reusable UI. Use them in an app or as a reference for your own feature components.

• AnalyticsChart: chartType ("time-series" | "categorical"), data, theme (red | green | neutral), optional title. Data: { x, y } or { name, value }.
• ChartContainer: Simple wrapper for chart blocks. Depends on recharts; peer: react, react-dom.

npm install @salesforce/webapp-template-feature-react-chart-experimental

import {
  AnalyticsChart,
  ChartContainer,
} from "@salesforce/webapp-template-feature-react-chart-experimental";

<ChartContainer>
  <AnalyticsChart
    chartType="time-series"
    data={[
      { x: "2024-01", y: 42 },
      { x: "2024-02", y: 55 },
    ]}
    theme="green"
    title="Trend"
  />
</ChartContainer>;

Rules

https://docs.cline.bot/features/cline-rules

The sample includes rules to show how a feature can define agent conventions (which components, data shape, theming, placement).

Copy rules/analytics-charts-rule.md into your project’s .clinerules/ (Cline) or .cursor/rules/ (Cursor) to try them, or use the file as a template for your own rules.

Skills

https://docs.cline.bot/features/skills

The sample includes a skill to show how a feature can bundle an on-demand workflow (e.g. “add a chart from data”: interpret type, map schema, choose theme, generate JSX).

Copy the skills/building-analytics-charts/ folder into .cline/skills/ (Cline) or .cursor/skills/ (Cursor) to try it, or use it as a template for your own skills.

Build & Testing

You can test the extension of the base app and the components via the following:

npm run build   # apply patches → dist
npm run dev     # run from dist
npm run watch   # watch and re-apply

Note that this does not test rules and skills. To do so, you need to copy the rules and skills to the appropriate folders for your coding agent.