Cursor Plugin
The design-system-core plugin adds CFA Design System skills to your agent. Skills cover judgment: which patterns to use, how to structure UI, when to stay on documented components and tokens.
The plugin versions independently of @cfa/react-core. Version-matched skills for using @cfa/react-core, @cfa/icons and @cfa/design-tokens-core ship inside those packages. The plugin skills cover higher-level decisions and complement them. See Package skills.
Install it as part of Get started with AI. For prop contracts, component guidance, tokens, and icons, use the MCP.
Skills
Section titled “Skills”| Skill | Use when the agent needs to… |
|---|---|
cfa-design-system | Choose CFA patterns, typography, action hierarchy, and compliant UI structure |
design-tokens | Pick token tiers, naming patterns, and token-backed styling for custom components |
cfa-design-system
Section titled “cfa-design-system”Forms, overlays, empty states, destructive actions, spacing, theming, and compliance with documented CFA patterns.
Good for “how should I structure this filter panel?” Bad for “what props does Button accept?” Use the MCP for that.
design-tokens
Section titled “design-tokens”Semantic, component, and primitive tokens from @cfa/design-tokens-core, plus naming conventions and token selection for custom styling.
Good for picking or structuring token names. For import paths and output formats of the installed @cfa/design-tokens-core version, the package’s cfa-design-tokens-core skill applies. To search the published catalog, use the MCP search_tokens tool.
Plugin and MCP together
Section titled “Plugin and MCP together”Use both in Cursor for AI-assisted React Core work. The plugin handles design decisions. The MCP returns data from the package versions your app installs.