PolicyEngine

Create New Component — Design skill for Claude Code

Design community

Build new UI components for @policyengine/ui-kit — with design token validation, tests, visual preview, and PR creation.

How to install Create New Component

Installs to ~/.claude/skills/policyengine-policyengine-claude-create-new-component/SKILL.md

Terminal
mkdir -p ~/.claude/skills/policyengine-policyengine-claude-create-new-component && curl -fsSL https://raw.githubusercontent.com/PolicyEngine/policyengine-claude/HEAD/commands/create-new-component.md -o ~/.claude/skills/policyengine-policyengine-claude-create-new-component/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Create New Component does

Build new UI components for @policyengine/ui-kit — with design token validation, tests, visual preview, and PR creation.

Alternatives in Design

  • Brainstorm Experiments New — Design lean pretotypes for new product validation 7.8k ★
  • Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
  • Visual Content Pack — Visual content creation skills 1.6k ★

Full documentation available on GitHub

View Source Repository

Related Skills

Qb — Design skill for Claude Code

Qb

Behavior validation - verify tests pass and outputs match design.

Design community
Token — Design skill for Claude Code

Token

Design token creation and updates. Use when adding, modifying, or checking Dialtone design tokens (--dt- CSS v

Design community
Utility — Design skill for Claude Code

Utility

CSS utility class creation and updates. Use when adding, modifying, or checking Dialtone CSS utilities (d- cla

Design community
Add CMS UI — Design skill for Claude Code

Add CMS UI

Create content management UI for editing static JSON content files. Build content editor forms with validation

Design community
Lwc In Chat — Design skill for Claude Code

Lwc In Chat

Turn a Figma design into a Lightning Web Component that renders inside an Agentforce chat bubble. Guided walkt

Design community
Design Handoff — Design skill for Claude Code

Design Handoff

Generate a developer handoff document from a Figma file — spacing specs, token maps, component APIs, and produ

Design community

Related Agents

Token Auditor — Security agent for Claude Code

Token Auditor

Scans ui/src/ for hardcoded visual values, duplicate components, and shadcn replacement candidates; produces d

Security community
Design System Curator — Design agent for Claude Code

Design System Curator

Curates design tokens (color/type/space/radius/motion), component specs (props/states/a11y/content slots), and

Design community
Canvas To Code Mapper — Design agent for Claude Code

Canvas To Code Mapper

The keystone agent. Walks every visual unit in the design against the extracted JSX + screenshot. Produces the

Design community